web性能-js优化

·  阅读 957
web性能-js优化

web性能-js优化

script标签的位置

  1. script标签可以阻塞渲染,从而延迟页面在浏览器中的显示。
  2. 将<script>标签放在文档底部可以加快页面渲染速度。

如果可以管理脚本的执行,则使用async属性(异步加载)可以进一步提供性能。

  1. 引申出模块化(比如 jq.js 和a.js 同时async,a.js依赖jq,a.js因为小,所以必然先加载,此时jq还没初始化,就会报错)
  2. 管理使用async的相互依赖的脚本的执行可能是一项挑战。第三方脚本加载库(如Alameda或RequireJS)可以为管理脚本依赖项提供一个方便的接口,同时还能提供异步加载和执行脚本的好处。
  • webpack工程化,可以使用 import('moment').then(moment => { xxx })

具体细节可以参考博主的姊妹篇:<link>和<script>和dom解析渲染之间的关系

精简资源方案

  1. jQ的精简方案有zepto等(如果还用jQ的话,可考虑用原生的,性能最佳)
  2. 各种第三方资源vender也有mini压缩版
  3. Fetch API
    • 提供了一个方便的原生接口,用于通过AJAX请求远程资源。对于不支持它的浏览器,也可以有效地polyfill它。

js动画

简单的可以直接用css动画,要写js动画的话:用requestAnimationFrame 替代定时器(能提高 渲染和绘制 速度),还有velocity动画库(可以脱离jq动画)

高效的dom操作

内容较多,可以参考博主的姊妹篇: web性能-优化dom操作(重排 重绘)

js操作优化

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缓存中读取或写入数据 service worker.png

离线缓存之资源更新的问题 -- 和浏览器缓存解决类似

  1. 每次都要取最新index.html(并缓存他),如果返回失败(断线情况),用缓存的index.html
  2. 如果有资源更新,直接更新资源的名字就行(名字带hash值)
  3. 资源更新后,需处理失效的资源
    1. 把cacheVersion 变量从 v1 变成 v2,删除( .delete() )不在白名单中的所有缓存,确保网站的资源更改时 及时清理失效资源

具体操作可以参考: www.zhangxinxu.com/wordpress/2…


未来可能持续完善,有疑问和错误可以留言,如果有用,谢谢点赞~

web worker部分,参考www.ruanyifeng.com/blog/2018/0…


性能优化合集快速入口:

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改