《高性能JavaScript》读后总结

1月15日到1月17日，3天时间阅读完毕，对性能优化有了一定的了解。将从浏览器及代码配合的角度，从宏观到微观总结。

一、web高性能指标是什么？

网页是一种发布信息的工具，在此过程中，用户与网页参与互动，比如提交表单、点击产生特效、用户发布评论等。首先是让用户看见初始内容，再者就是流畅快速交互。所以，指标主要有：
1、加载时间。
（1）网页原文件都部署于服务器端，从地理位置来看，服务器可放置于全球任何地方。客户端与服务器地理位置越近，个别文件加载时间越短。
（2）实现相同功能的前提下，文件大小越小，个别文件加载时间越短。
（3）每分别加载一个资源，包括js文件、css文件、图片等，都会有一次http请求。请求数越少，总加载时间越短。
浏览器采用单一线程来处理用户界面（UI）刷新 和 js脚本执行。
2、js运行时间。
3、UI渲染时间。
4、线程中任务执行流程调配。

二、浏览器与js代码的关系？

浏览器本身含有原生代码，是由低级语言比如C++编写的，执行速度更快。HTML是标记语言，用于内容及其结构的呈现；CSS是对内容样式的渲染；JS是脚本语言，用于行为产生与用户交互。浏览器内置

• JavaScript引擎，把js代码转化为机器码来执行。引擎优化，属于编译器层面的优化。
• 渲染引擎，关于css，用于UI渲染。
• DOM引擎，DOM（文档对象模型）是一个独立于语言的，用于操作XML和HTML程序接口，其在浏览器中的接口用js实现。dom和js为两个相互独立的功能，所以用js操作dom特别耗时。

三、如何提升性能？

• 文件加载与执行
  js阻塞解决：（1）并发下载（2）将UI初始化渲染完毕后，再加载js，将外部链接js代码放在html底部。

• DOM操作。
  尽量减少访问DOM的次数，把运算尽量留在js一端。 使用innerHTML。
  访问和修改DOM。当涉及到网页页面样式变化是，会导致重绘和重排，比如页面上方弹出新的提示框导致页面所有文本下移，则页面重新绘制且dom结构重排。
  事件委托。利用冒泡原理，将多个事件监听由其共同父元素代理，减少事件代理程序的多次绑定
  元素脱离文档流。绝对定位->修改元素，只产生部分重绘->恢复定位，发生一次重排重绘。

• 代码语法
  数据存取。存储格式有变量、数组、对象。
  处于作用域的不同位置，访问速度不同。
  访问对象属性层次越深，访问速度越慢。
  对象的原型链。对象通过内部属性 proto 绑定到它的原型。
  所以把经常访问的对象成员、数组元素、跨域变量保存在局部变量中改善js性能。
  循环语句。
  使用倒序循环。使对数组长度只一次属性查找。减少控制条件比较。
  循环体执行代码优化。
  条件语句。
  依据判断条件类型选择 if switch。
  减少判断次数。将概率大的条件写在前面。

• 快速响应用户界面。
  让出UI渲染空余时间。使每一次js代码任务执行时间少于100ms。使用定时器分割任务。由于定时器指从调用此代码开始延迟一定时间后将预处理js任务放入执行队列，由于浏览器识别精度问题，延时时间一般大于25ms。
  使用worker运行环境，开启其他线程，并行处理。新版浏览器支持，Safari 4 和Chrome 3只允许在页面和worker之间传递字符串。