location.href-- 返回或设置当前文档的 URL location.search -- 返回 URL 中的查询字符串部分。例如 https://www.drex.wang/drex?id=5&name=drex 返回包括(?)后面的内容?id=5&name=drex location.hash -- 返回 URL#后面的内容,如果没有#,返回空 location.host -- 返回 URL 中的域名部分,例如 www.drex.wang location.hostname -- 返回 URL 中的主域名部分,例如 drex.wang location.pathname -- 返回 URL 的域名后的部分。例如 https://drex.wang/xhtml/ 返回/xhtml/ location.port -- 返回 URL 中的端口部分。例如 https://drex.wang:8080/xhtml/ 返回 8080 location.protocol -- 返回 URL 中的协议部分。例如 https://drex.wang:8080/xhtml/ 返回(//)前面的内容 http: location.assign -- 设置当前文档的 URL location.replace() -- 设置当前文档的 URL,并且在 history 对象的地址列表中移除这个 URL location.replace(url); location.reload() -- 重载当前页面
// 获取 performance 数据var performance = {// memory 是非标准属性,只在 Chrome 有memory: {usedJSHeapSize: 16100000, // JS 对象(包括V8引擎内部对象)占用的内存,一定小于 totalJSHeapSizetotalJSHeapSize: 35100000, // 可使用的内存jsHeapSizeLimit: 793000000, // 内存大小限制},// 页面来源navigation: {redirectCount: 0, // 如果有重定向的话,页面通过几次重定向跳转而来type: 0, // 0 即 TYPE_NAVIGATENEXT 正常进入的页面(非刷新、非重定向等)// 1 即 TYPE_RELOAD 通过 window.location.reload() 刷新的页面// 2 即 TYPE_BACK_FORWARD 通过浏览器的前进后退按钮进入的页面(历史记录)// 255 即 TYPE_UNDEFINED 非以上方式进入的页面},timing: {// 在同一个浏览器上下文中,前一个网页(与当前页面不一定同域)unload 的时间戳,如果无前一个网页 unload ,则与 fetchStart 值相等navigationStart: 1591112691935,// 前一个网页(与当前页面同域)unload 的时间戳,如果无前一个网页 unload 或者前一个网页与当前页面不同域,则值为 0unloadEventStart: 0,// 和 unloadEventStart 相对应,返回前一个网页 unload 事件绑定的回调函数执行完毕的时间戳unloadEventEnd: 0,// 第一个 HTTP 重定向发生时的时间。有跳转且是同域名内的重定向才算,否则值为 0redirectStart: 0,// 最后一个 HTTP 重定向完成时的时间。有跳转且是同域名内部的重定向才算,否则值为 0redirectEnd: 0,// 浏览器准备好使用 HTTP 请求抓取文档的时间,这发生在检查本地缓存之前fetchStart: 1591112692155,// DNS 域名查询开始的时间,如果使用了本地缓存(即无 DNS 查询)或持久连接,则与 fetchStart 值相等domainLookupStart: 1591112692155,// DNS 域名查询完成的时间,如果使用了本地缓存(即无 DNS 查询)或持久连接,则与 fetchStart 值相等domainLookupEnd: 1591112692155,// HTTP(TCP) 开始建立连接的时间,如果是持久连接,则与 fetchStart 值相等// 注意如果在传输层发生了错误且重新建立连接,则这里显示的是新建立的连接开始的时间connectStart: 1591112692155,// HTTP(TCP) 完成建立连接的时间(完成握手),如果是持久连接,则与 fetchStart 值相等// 注意如果在传输层发生了错误且重新建立连接,则这里显示的是新建立的连接完成的时间// 注意这里握手结束,包括安全连接建立完成、SOCKS 授权通过connectEnd: 1591112692155,// HTTPS 连接开始的时间,如果不是安全连接,则值为 0secureConnectionStart: 0,// HTTP 请求读取真实文档开始的时间(完成建立连接),包括从本地读取缓存// 连接错误重连时,这里显示的也是新建立连接的时间requestStart: 1591112692158,// HTTP 开始接收响应的时间(获取到第一个字节),包括从本地读取缓存responseStart: 1591112692686,// HTTP 响应全部接收完成的时间(获取到最后一个字节),包括从本地读取缓存responseEnd: 1591112692687,// 开始解析渲染 DOM 树的时间,此时 Document.readyState 变为 loading,并将抛出 readystatechange 相关事件domLoading: 1591112692690,// 完成解析 DOM 树的时间,Document.readyState 变为 interactive,并将抛出 readystatechange 相关事件// 注意只是 DOM 树解析完成,这时候并没有开始加载网页内的资源domInteractive: 1591112693093,// DOM 解析完成后,网页内资源加载开始的时间// 在 DOMContentLoaded 事件抛出前发生domContentLoadedEventStart: 1591112693093,// DOM 解析完成后,网页内资源加载完成的时间(如 JS 脚本加载执行完毕)domContentLoadedEventEnd: 1591112693101,// DOM 树解析完成,且资源也准备就绪的时间,Document.readyState 变为 complete,并将抛出 readystatechange 相关事件domComplete: 1591112693214,// load 事件发送给文档,也即 load 回调函数开始执行的时间// 注意如果没有绑定 load 事件,值为 0loadEventStart: 1591112693214,// load 事件的回调函数执行完毕的时间loadEventEnd: 1591112693215,},};
window.requestIdleCallback(callback[, options]): 在浏览器的空闲时段内调用的函数排队,这使开发者能够在主事件循环上执行后台和低优先级工作,而不会影响延迟关键事件,如动画和输入响应。函数一般会按先进先调用的顺序执行,然而,如果回调函数指定了执行超时时间 timeout
,则有可能为了在超时前执行函数而打乱执行顺序。
window.cancelIdleCallback(handle): 方法用于取消之前调用 window.requestIdleCallback()
的回调
window.requestAnimationFrame(callback): 告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行
window.mozCancelAnimationFrame(requestID): 取消一个先前通过调用 window.requestAnimationFrame()
方法添加到计划中的动画帧请求.
Web Worker 作为浏览器多线程技术, 在页面内容不断丰富, 功能日趋复杂的当下, 成为缓解页面卡顿, 提升应用性能的可选方案. HTML5 中的 Web Worker 可以分为两种不同线程类型,一个是专用线程 Dedicated Worker,一个是共享线程 Shared Worker。两种类型的线程各有不同的用途。下面对这两种工作线程作了详细的说明和描述。
主线程
// 创建专用线程示例代码var worker = new Worker('dedicated.js');// 接收来至工作线程示例代码worker.onmessage = function (event) { ... };// 高效的发送 ArrayBuffer 数据代码worker.postMessage({operation: 'list_all_users',//ArrayBuffer objectinput: buffer,threshold: 0.8,}, [buffer]);// 关闭worker.terminate();
子线程
// 写法一self.addEventListener('message', function (e) {self.postMessage('You said: ' + e.data);}, false);// 写法二this.addEventListener('message', function (e) {this.postMessage('You said: ' + e.data);}, false);// 写法三addEventListener('message', function (e) {postMessage('You said: ' + e.data);}, false);// 加载脚本importScripts('script1.js');// 关闭self.close();
// 创建共享线程的代码示例如下var worker = new SharedWorker('sharedworker.js', ’ mysharedworker ’ );// 从端口接收数据 , 包括文本数据以及结构化数据worker.port.onmessage = function (event) { define your logic here... };// 向端口发送普通文本数据worker.port.postMessage('put your message here … ');// 向端口发送结构化数据worker.port.postMessage({ username: 'usertext'; live_city:['data-one', 'data-two', 'data-three','data-four']});
Service Worker 首先是一个运行在后台的 Worker 线程,然后它会长期运行,充当一个服务,很适合那些不需要网页或用户互动的功能。它的最常见用途就是拦截和处理网络请求。
Service Worker 是一个后台运行的脚本,充当一个代理服务器,拦截用户发出的网络请求,比如加载脚本和图片。Service Worker 可以修改用户的请求,或者直接向用户发出回应,不用联系服务器,这使得用户可以在离线情况下使用网络应用。它还可以在本地缓存资源文件,直接从缓存加载文件,因此可以加快访问速度。
if ('serviceWorker' in navigator) {window.addEventListener('load', function() {navigator.serviceWorker.register('/service-worker.js');});}
Fullscreen API
让我们能够在 Web app
中启用全屏模式。它使你可以选择要在全屏模式下查看的元素。在 Android
手机中,它将删除浏览器窗口和 Android
顶部状态栏(显示网络状态,电池状态等的地方)。
跨域资源共享 CORS 详解Web API 接口参考Web Worker 使用教程Web Worker 文献综述参考网站