javascript在浏览器中运行的性能,可以认为是开发者所面临的最严重的可用性问题。这个问题因为javascript的阻塞性而变得复杂,事实上,多数浏览器使用单一进程来处理用户界面和js脚本执行,所以同一时刻只能做一件事。js执行过程耗时越久,浏览器等待响应的时间越长。
加载和执行
1.提高加载性能
1.IE8,FF,3.5,Safari 4和Chrome都允许并行下载js文件,当script下载资源时不会阻塞其他script的下载。但是js下载仍然会阻塞其他资源的下载,如图片。尽管脚本下载不会互相影响,但页面仍然必须等待所有js代码下载并执行完才能继续。因此仍然存在脚本阻塞问题.推荐将所有js文件放在body标签底部以减少对整个页面的影响。
2.减少页面外链脚本文件的数量将会提高页面性能:http请求会带来额外的开销,因此下载单个300k的文件将比下载10个30k的文件效率更高。
3.动态脚本加载技术:无论何时启动下载,文件的下载和执行都不会阻塞页面其他进程。
1 | function laodScript(url,callback){ |
- 4.无阻塞加载类库——LABjs,使用方法如下:
1 | <script src="lab.js"></script> |
2.数据存取与JS性能
- 1.在js中,数据存储的位置会对代码整体性能产生重大影响。数据存储共有4种方式:字面量,变量,数组项,对象成员。他们有着各自的性能特点。
2.访问字面量和局部变量的速度最快,相反,访问数组和对象相对较慢
3.由于局部变量存在于作用域联的起始位置,因此访问局部变量的比访问跨域作用变量更快
4.嵌套的对象成员会明显影响性能,应尽量避免
5.属性和方法在原型链位置越深,访问他的速度越慢
6.通常我们可以把需要多次使用的对象成员,数组元素,跨域变量保存在局部变量中来改善js性能
3.DOM编程
- 1.访问DOM会影响浏览器性能,修改DOM则更耗费性能,因为他会导致浏览器重新计算页面的几何变化。<通常的做法是减少访问DOM的次数,把运算尽量留在JS这一端。
注:如过在一个对性能要求比较高的操作中更新一段HTML,推荐使用innerHTML,因为它在绝大多数浏览器中运行的都很快。但对于大多数日常操作而言,并没有太大区别,所以你更应该根据可读性,稳定性,团队习惯,代码风格来综合决定使用innerHTML还是createElement()
- 2.HTML集合优化
HTML集合包含了DOM节点引用的类数组对象,一直与文档保持连接,每次你需要最新的信息时,都会重复执行查询操作,哪怕只是获取集合里元素的个数。
1.优化一——集合转数组collToArr
1 | function collToArr(coll){ |
2.缓存集合length
3.访问集合元素时使用局部变量(即将重复的集合访问缓存到局部变量中,用局部变量来操作)
- 3.遍历DOM
1.使用只返回元素节点的API遍历DOM,因为这些API的执行效率比自己实现的效率更高:
属性名 | 被替代属性 |
children | childNodes |
childElementCount | childNodes.length |
firstElementChild | firstChild |
lastElementChild | lastChild |
nextElementSibling | nextSibling |
previousElementSibling | previousSibling |
2.选择器API——querySelectorAll()
querySelectorAll()方法使用css选择器作为参数并返回一个NodeList——包含着匹配节点的类数组对象,该方法不会返回HTML集合,因此返回的节点不会对应实时文档结构,着也避免了HTML集合引起的性能问题。
1 let arr = document.querySelectorAll('div.warning, div.notice > p')
- 4.重绘和重排
浏览器在下载完页面的所有组件——html,js,css,图片等之后,会解析并生成两个内部数据结构—— DOM树,渲染树.一旦DOM树和渲染树构建完成,浏览器就开始绘制页面元素(paint).
1.重排发生的条件:
添加或删除可见的DOM
元素位置变化
元素尺寸改变
内容改变
页面渲染器初始化
浏览器窗口尺寸变化
出现滚动条时会触发整个页面的重排
重排必定重绘
- 5.渲染树变化的排列和刷新
大多数浏览器通过队列化修改并批量执行来优化重排过程,然而获取布局信息的操作会导致队列强制刷新。
1 | offsetTop,offsetWidth... |
一些优化建议:将设置样式的操作和获取样式的操作分开:
1 | // 设置样式 |
另外,获取计算属性的兼容写法:
1 | function getComputedStyle(el){ |
- 6.最小化重绘和重排
1.批量改变样式
1 | /* 使用cssText */ |
2.批量修改dom的优化方案——使元素脱离文档流-对其应用多重改变-把元素带回文档
1 | function appendDataToEl(option){ |
上面的优化方法使用了文档片段: 当我们把文档片段插入到节点中时,实际上被添加的只是该片段的子节点,而不是片段本身。可以使得dom操作更有效率。
3.缓存布局信息
1 | //缓存布局信息 |
4.慎用:hover
如果有大量元素使用:hover,那么会降低相应速度,CPU升高
5.使用事件委托(通过事件冒泡实现)来减少事件处理器的数量,减少内存和处理时间
1 | function delegation(e,selector,callback){ |
4.算法和流程控制
1.循环中减少属性查找并反转(可以提升50%-60%的性能)
1 | // for 循环 |
2.使用Duff装置来优化循环(该方法在后面的文章中会详细介绍)
3.基于函数的迭代(比基于循环的迭代慢)
1 | items.forEach(function(value,index,array){ |
4.通常情况下switch总比if-else快,但是不是最佳方案
5.字符串和正则表达式
1.除了IE外,其他浏览器会尝试为表达式左侧的字符串分配更多的内存,然后简单的将第二个字符串拷贝到他的末尾,如果在一个循环中,基础字符串位于最左侧,就可以避免重复拷贝一个逐渐变大的基础字符串。
2.使用[\s\S]来匹配任意字符串
3.去除尾部空白的常用做法:
1 | if(!String.prototype.trim){ |
6.快速响应的用户界面
1.浏览器的UI线程:用于执行javascript和更新用户界面的进程。
2.在windows系统中定时器分辨率为15毫秒,因此设置小于15毫秒将会使IE锁定,延时的最小值建议为25ms.
3.用延时数组分割耗时任务:
1 | function multistep(steps,args,callback){ |
4.记录代码运行时间批处理任务:
1 | function timeProcessArray(items,process,callback){ |
5.使用Web Worker:它引入了一个接口,能使代码运行且不占用浏览器UI线程的时间。一个Worker由如下部分组成:
1.一个navigator对象,包括appName,appVersion,user Agent和platform.
2.一个location对象,只读。
3.一个self对象,指向全局worker对象
4.一个importScripts()方法,用来加载worker所用到的外部js文件
5.所有的ECMAScript对象。如object,Array,Date等
6.XMLHttpRequest构造器
7.setTimeout(),setInterval()
8.一个close()方法,它能立刻停止worker运行
- 应用场景
1.编码/解码大字符串
2.复杂数学运算(包括图像,视屏处理)
3.大数组排序
1 | // worker.js |
7.ajax优化
1.向服务器请求数据的五种方式:
1.XMLHttpRequest
2.Dynamic script tag insertion 动态脚本注入
3.iframes
4.Comet(基于http长连接的服务端推送技术)
5.Multipart XHR(允许客户端只用一个http请求就可以从服务器向客户端传送多个资源)2.单纯向服务端发送数据(beacons方法)——信标
1 | // 唯一缺点是接收到的响应类型是有限的 |
3.ajax性能的一些建议
1.缓存数据
- 1.在服务端设置Expires头信息确保浏览器缓存多久响应(必须GET请求)
- 2.客户端把获取到的信息缓存到本地,避免再次请求
8.编程实践
1.避免重复工作
1 | // 1.延迟加载 |
2.使用Object/Array字面量
3.多用原生方法
9.构建与部署高性能的js应用
1.js的http压缩
当web浏览器请求一个资源时,它通常会发送一个Accept-Encoding HTTP头来告诉Web服务器它支持那种编码转换类型。这个信息主要用来压缩文档以获取更快的下载,从而改善用户体验。Accept-Encoding可用的值包括:gzip,compress,deflate,identity.
如果Web服务器在请求中看到这些信息头,他会选择最合适的编码方式,并通过Content-Encoding HTTP头通知WEB浏览器它的决定。
2.使用H5离线缓存
3.使用内容分发网络CDN
4.对页面进行性能分析
1 | // 检测代码运行时间 |
10.浏览器缓存
1.添加Expires头
2.使用cache-control
cache-ontrol详解
浏览器缓存机制
11.压缩组件
1.web客户端可以通过http请求中的Accept-Encoding头来表示对压缩的支持
1 | // 浏览器请求时对http header设置 |
2.压缩能将响应的数据量减少将近70%,因此可考虑对html,脚本,样式,图片进行压缩
12.白屏现象的原因
浏览器(如IE)在样式表没有完全下载完成之前不会呈现页面,导致页面白屏。如果样式表放在页面底部,那么浏览器会花费更长的时间下载样式表,因此会出现白屏,所以最好把样式表放在head内。白屏是浏览器对“无样式闪烁”的修缮。如果浏览器不采用“白屏”机制,将页面内容逐步显示(如Firefox),则后加载的样式表将导致页面重绘重排,将会承担页面闪烁的风险。
13.css表达式使用一次性表达式(但最好避免css表达式)
使用css表达式时执行函数重写自身
1 | // css |
14.减少DNS查找
1.DNS缓存和TTL
1 | 1.DNS查找可以被缓存起来以提高性能:DNS信息会留在操作系统的DNS缓存中(Microsoft Windows上的“DNS Client服务”,之后对该主机名的请求无需进行过多的查找 |