高性能Javascript 读书笔记

来源：互联网发布：香港域名注册不备案编辑：程序博客网时间：2024/05/21 22:43

高性能Javascript 读书笔记

最近看了《高性能JavaScript》一书，里面有讲很多提高js性能的书，所以根据个人见解记下一些我觉得有用的有意思的点，供以后学习参考。

前言：

尽管现在已经发展出了各种方法，压缩，合并、模块化等加载方式，以及强大的JS处理引擎提高js性能，但仍有一些javascript引擎力不能及的地方：DOM交互、网络延迟、JavaScript的阻塞和并发下载等。也就是说除了借助工具和引擎外，更需要我们关注JavaScript的底层性能。

加载与执行

避免浏览器阻塞，把js放在</body>结束标签之前而不是<head></head>标签内部，能够提升用户体验，避免了以为加载js而出现页面空白的情况。
减少使用<script>标签总数。

数据存取

本章介绍了作用域链、执行上下文、活动对象、全局对象、闭包等基础概念，这里就不细说了。
本章重点函数中局部变量的访问速度总是最快的,而全局变量总是处于运行期上下文作用域链的最后一个位置,所以总是最远才能触及的，通常是最慢的。
也就是说，函数使用变量的时候会从最近的地方（函数内部的局部变量）开始找，找不到再往上一层作用域找去。所以为了提升性能，一般会将一些较深的变量赋值给局部变量，使得函数内部能直接调用到这个局部变量。

DOM编程

用脚本进行DOM操作的代价很昂贵，本书有一个生动的比喻：把DOM和Javascript各自想象成一个岛屿，他们之间用收费桥来连接，javascript每次访问DOM都要途径这个桥并交纳过桥费，访问DOM次数越高，费用就越高，因此为了提高星能应该尽可能的减少过桥次数，努力待在javascript岛上。

DOM操作往往容易引起浏览器的重绘与重排。
重排: 指的是页面的布局和几何属性改变时所发生的事情；
重绘: 是指把dom元素绘制到屏幕上面的过程。
由于浏览器需要重新计算页面所有元素的大小与位置，然后把它们安置在正确的地方，因此重排往往会造成性能问题的，要提升页面的性能，很重要的一个举措就是避免页面的重排。

访问DOM需要代价，修改元素更为昂贵，如下面的例子，每次循环都对DOM元素访问了两次，一次是读取内容，一次是修改它。

　　//在循坏中更新页面，问题所在：    function changeDOM(){        for(var i=0; i < 15000; i++){        document.getElementById('here').innerHTML += 'a';       }    }

换一种效率更高的方法，用局部变量修改使用局部变量存好改变量，在循环结束时一次性写入

      function changeDOM(){        var content =''；        for(var i=0; i < 15000; i++){            content += 'a';        }       document.getElementById('here').innerHTML += content;    }

另外一点，尽可能避免多次引用全局查找，例如，只要简单地将 document 存储在一个局部变量中,就可以获得性能上的提升
例如： var doc = document

算法和流程控制

本章介绍了javascript算法中的效率比较。
for-in的效率非常低，除非要迭代遍历一个属性未知的对象,否则不要使用 for-in 循环。
一般情况下，switch总是比if-else快，但并不总是最好的解决方法。
当判断条件较多时,查找表比 if-else 或者 switch 更快。
for循环时，若终止条件调用到HTML某元素集合的长度时，不建议直接作为循环终止条件，最好将集合的长度赋给一个变量，然后使用变量作为循环终止条件，否则每次循环迭代过程都会计算一次终止条件在所有的浏览器上都会产生明显的性能损失。
for(var i = 0;i<arr.length;i++)
改为如下效率更高
for(var i = 0,len = arr.length;i<len;i++)
运行的代码数量越大，使用这些策略所带来的提升就越明显。

快速响应的用户界面

由于javascript和用户界面的更新是在同一个进程中进行的，也就意味着当javascript代码正在运行时，用户界面不能响应输入，反之亦然。
任何javascript任务不应当执行超过100毫秒，否则将会对用户体验产生负面影响。
当遇到一些比较复杂会超出100毫秒的任务时，可以适当的使用定时器让出UI线程的控制权，把长时间运行脚本分解成一系列的小任务。
知识点
Web worker是新版浏览器才支持的特性,它允许你在 UI 线程之外运行 JavaScript 代码而避免锁定 UI。

编程优化

使用直接量创建对象和数据效率比较高。
当执行数学远算时,考虑使用位操作,它直接在数字底层进行操作。
尽量使用javascript的原生方法，原生方法是用低级语言写在浏览器中的，成为了浏览器的一部分，不会像自己写javascript那样受到各种限制，所以使用原生方法总会比你写的任何代码都要快。
避免做重复的运算工作。当需要检测浏览器时，可使用延迟加载或者条件预加载。

开发和部署

合并多个javascript文件，减少页面渲染所需的HTTP请求数。
使用压缩器处理javascript文件
通过正确设置 HTTP 响应头来缓存 JavaScript 文件,通过向文件名附加时间戳避免缓存问题
以上几点都应该使用各种工具自动化处理。

阅读全文

0 0