web性能-js优化
script标签的位置
- script标签可以阻塞渲染,从而延迟页面在浏览器中的显示。
- 将<script>标签放在文档底部可以加快页面渲染速度。
如果可以管理脚本的执行,则使用async属性(异步加载)可以进一步提供性能。
- 引申出模块化(比如 jq.js 和a.js 同时async,a.js依赖jq,a.js因为小,所以必然先加载,此时jq还没初始化,就会报错)
- 管理使用async的相互依赖的脚本的执行可能是一项挑战。第三方脚本加载库(如Alameda或RequireJS)可以为管理脚本依赖项提供一个方便的接口,同时还能提供异步加载和执行脚本的好处。
- webpack工程化,可以使用 import('moment').then(moment => { xxx })
具体细节可以参考博主的姊妹篇:<link>和<script>和dom解析渲染之间的关系
精简资源方案
- jQ的精简方案有zepto等(如果还用jQ的话,可考虑用原生的,性能最佳)
- 各种第三方资源vender也有mini压缩版
- Fetch API
- 提供了一个方便的原生接口,用于通过AJAX请求远程资源。对于不支持它的浏览器,也可以有效地polyfill它。
js动画
简单的可以直接用css动画,要写js动画的话:用requestAnimationFrame 替代定时器(能提高 渲染和绘制 速度),还有velocity动画库(可以脱离jq动画)
高效的dom操作
内容较多,可以参考博主的姊妹篇: web性能-优化dom操作(重排 重绘)
js操作优化
- 结论:性能:普通 for 循环 > forEach > for of > map > for in
- 其中forEach和map不能在遍历中停止
计算密集型或高延迟的任务 用 web worker
核心:一些计算密集型或高延迟的任务,可以用web worker处理
JavaScript 语言采用的是单线程模型,所有任务只能在一个线程上完成,一次只能做一件事。
- 前面的任务没做完,后面的任务只能等着。随着电脑计算能力的增强,尤其是多核 CPU 的出现,单线程带来很大的不便,无法充分发挥计算机的计算能力。
Web Worker 的作用,就是为 JavaScript 创造多线程环境,允许主线程创建 Worker 线程,将一些任务分配给后者运行。
- 在主线程运行的同时,Worker 线程在后台运行,两者互不干扰。
- 等到 Worker 线程完成计算任务,再把结果返回给主线程。
好处是:
- 一些计算密集型或高延迟的任务,被 Worker 线程负担了,主线程(通常负责 UI 交互)就会很流畅,不会被阻塞或拖慢。
Worker 线程一旦新建成功,就会始终运行,不会被主线程上的活动(比如用户点击按钮、提交表单)打断。
- 这样有利于随时响应主线程的通信。但是,这也造成了 Worker 比较耗费资源,不应该过度使用,而且一旦使用完毕,就应该关闭
使用:
var worker = new Worker('oneWork.js'); // Worker()构造函数的参数是一个脚本文件,该文件就是 Worker 线程所要执行的任务。由于 Worker 不能读取本地文件,所以这个脚本必须来自网络。如果下载没有成功(比如404错误),Worker 就会默默地失败。
worker.postMessage('Hello World'); // 可以发消息给 oneWork.js
worker.postMessage({method: 'echo', args: ['Work']}); // 可以发消息给 oneWork.js
worker.onmessage = function (event) { // 监听oneWork.js
console.log('Received message ' + event.data); // 得到oneWork.js的返回值
doSomething(event.data);
}
function doSomething(data) {
console.log('Received message ' + data);
// 执行任务
...
// 执行完了
worker.postMessage('Work done!');
}
// Worker完成任务后,需关闭worker (比如放在vue的 beforeDestory(){} 里面)
worker.terminate();
离线缓存 用 service worker
一种JavaScript Worker,它在一个独立的线程上运行,与发生在主处理线程上的所有其他脚本活动分离
- 要求使用https(本机开发可以不用)
离线缓存
原理:允许用户拦截网络请求,并通过CacheStorage API有条件地将项目存储在一个特殊的缓存中。
- 此缓存与浏览器本地缓存分开,使用它即可在用户离线时,从CacheStorage缓存向用户提供内容。还可以使用这个特殊的缓存提高页面的渲染性能
- 具体是:将CacheStorage与Service Worker的fetch事件配合使用,拦截和缓存网络请求。 断网时,通过一个接口拦截网络请求并从CacheStorage缓存中读取或写入数据
离线缓存之资源更新的问题 -- 和浏览器缓存解决类似
- 每次都要取最新index.html(并缓存他),如果返回失败(断线情况),用缓存的index.html
- 如果有资源更新,直接更新资源的名字就行(名字带hash值)
- 资源更新后,需处理失效的资源
- 把cacheVersion 变量从 v1 变成 v2,删除( .delete() )不在白名单中的所有缓存,确保网站的资源更改时 及时清理失效资源
具体操作可以参考: www.zhangxinxu.com/wordpress/2…
未来可能持续完善,有疑问和错误可以留言,如果有用,谢谢点赞~
web worker部分,参考www.ruanyifeng.com/blog/2018/0…
性能优化合集快速入口: