性能优化笔记

优化页面加载时间

html 标签顺序

应该把所有能移动的 script 标签移到 html前,这样整个页面都会在各项脚本加载和解析之前进行渲染,从而提升了页面的可感知响应能力

JavaScript 代码 gizp 编码传输

在服务器设置 gzip 编码

缩编混淆和编译

JSMin 缩编

UglifyJS 混淆

Google closure compiler 代码编译

避免全局变量的使用

异步加载 JavaScript 代码

JS 延时加载

减少 dom 操作

实现对页面元素的最小化访问

以变量保存对 dom 元素的引用以便后续使用

通过对单独父元素的引用来访问其子 dom 元素

对新建元素实施 dom 修改后才将其添加至当前实时页面

尽量利用已有元素

复制已经存在的元素以提高性能

尽量使用 css 而非 JavaScript 来操控页面样式

因为修改元素的 style 属性会引发一次重排

建议隐藏元素,再修改元素的 style 属性,减少重排

提升 dom 事件性能

使用事件委托

使用框架化处理频密发出的事件

将计算密集型的代码移至单独的函数中,此函数按较长时间的计时器或时间间隔来执行代码,所使用的是保存在变量中的数据而不是直接取自于事件处理函数

提升函数性能

使用记忆功能保存先前函数的返回结果

使用正则表达式实现更快速的字符串操作

提高数组使用性能

1
2
var myArray = [] ;  //快
var myArray = new Array(); //慢

循环,for 是最快的

避免在循环中创建函数

转移密集型任务到 web worker

Author: liuarui
Link: https://liuarui.github.io/2019/03/20/初入前端/性能优化笔记/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.