精读《高效 javascript》

前言

本期我来给你们推荐的书是《高性能JavaScript》,在这本书中咱们可以了解 javascript 开发过程当中的性能瓶颈,如何提高各方面的性能，包括代码的加载、运行、DOM交互、页面生存周期等。一样咱们今天仍是用思惟导图的方式来精读一遍。（思惟导图图片可能有点小，记得点开看，你会有所收获）

加载和执行

管理浏览器中的 JavaScript 代码是个棘手的问题,由于代码执行阻塞了其余浏览器处理过程,诸如用户 界面绘制。每次遇到 <script>标签,页面必须停下来等待代码下载(若是是外部的)并执行,而后再继续处 理页面其余部分。可是,有几种方法能够减小 JavaScript 对性能的影响:

1. 将全部<script>标签放置在页面的底部,紧靠 body 关闭标签</body>的上方。此法能够保证页面在脚本 运行以前完成解析。
2. 将脚本成组打包。页面的<script>标签越少,页面的加载速度就越快,响应也更加迅速。不论外部脚本 文件仍是内联代码都是如此。

有几种方法可使用非阻塞方式下载 JavaScript:

• 为<script>标签添加 defer 属性(只适用于 Internet Explorer 和 Firefox 3.5 以上版本)
• 动态建立<script>元素,用它下载并执行代码
• 用 XHR 对象下载代码,并注入到页面中

经过使用上述策略,你能够极大提升那些大量使用 JavaScript 代码的网页应用的实际性能。

数据存取

在 JavaScript 中,数据存储位置能够对代码总体性能产生重要影响。有四种数据访问类型:直接量,变 量,数组项,对象成员。它们有不一样的性能考虑。

直接量和局部变量访问速度很是快,数组项和对象成员须要更长时间。局部变量比域外变量快,由于它位于做用域链的第一个对象中。变量在做用域链中的位置越深,访问所需 的时间就越长。全局变量老是最慢的,由于它们老是位于做用域链的最后一环。避免使用 with 表达式,由于它改变了运行期上下文的做用域链。并且应当当心对待 try-catch 表达式的 catch 子句,由于它具备一样效果。嵌套对象成员会形成重大性能影响,尽可能少用。

一个属性或方法在原形链中的位置越深,访问它的速度就越慢。通常来讲,你能够经过这种方法提升 JavaScript 代码的性能:将常用的对象成员,数组项,和域外变 量存入局部变量中。而后,访问局部变量的速度会快于那些原始变量。经过使用这些策略,你能够极大地提升那些须要大量 JavaScript 代码的网页应用的实际性能。

DOM 编程

DOM 访问和操做是现代网页应用中很重要的一部分。但每次你经过桥梁从 ECMAScript 岛到达 DOM 岛 时,都会被收取“过桥费”。为减小 DOM 编程中的性能损失,请牢记如下几点:

最小化 DOM 访问,在 JavaScript 端作尽量多的事情。在反复访问的地方使用局部变量存放 DOM 引用.当心地处理 HTML 集合,由于他们表现出“存在性”,老是对底层文档从新查询。将集合的 length 属性缓 存到一个变量中,在迭代中使用这个变量。若是常常操做这个集合,能够将集合拷贝到数组中。

若是可能的话,使用速度更快的 API,诸如 querySelectorAll()和 firstElementChild。注意重绘和重排版;批量修改风格,离线操做 DOM 树,缓存并减小对布局信息的访问。动画中使用绝对坐标,使用拖放代理。使用事件托管技术最小化事件句柄数量。

算法和流程控制

正如其余编程语言,代码的写法和算法选用影响 JavaScript 的运行时间。与其余编程语言不一样的是, JavaScript 可用资源有限,因此优化技术更为重要。

for,while,do-while 循环的性能特性类似,谁也不比谁更快或更慢。除非你要迭代遍历一个属性未知的对象,不然不要使用 for-in 循环。改善循环性能的最好办法是减小每次迭代中的运算量,并减小循环迭代次数。

通常来讲,switch 老是比 if-else 更快,但并不老是最好的解决方法。当判断条件较多时,查表法比 if-else 或者 switch 更快。

浏览器的调用栈尺寸限制了递归算法在 JavaScript 中的应用;栈溢出错误致使其余代码也不能正常执行。若是你遇到一个栈溢出错误,将方法修改成一个迭代算法或者使用制表法能够避免重复工做。

运行的代码总量越大,使用这些策略所带来的性能提高就越明显。

字符串和正则表达式

密集的字符串操做和粗浅地编写正则表达式多是主要性能障碍,但本章中的建议可帮助您避免常见缺陷。当链接数量巨大或尺寸巨大的字符串时,数组联合是 IE7 和它的早期版本上惟一具备合理性能的方法。若是你不关心 IE7 和它的早期版本,数组联合是链接字符串最慢的方法之一。使用简单的+和+=取而代之, 可避免(产生)没必要要的中间字符串。

回溯既是正则表达式匹配功能基本的组成部分,又是正则表达式影响效率的常见缘由。回溯失控发生在正则表达式本应很快发现匹配的地方,由于某些特殊的匹配字符串动做,致使运行缓慢 甚至浏览器崩溃。避免此问题的技术包括:使相邻字元互斥,避免嵌套量词对一个字符串的相同部分屡次 匹配,经过重复利用前瞻操做的原子特性去除没必要要的回溯。

提升正则表达式效率的各类技术手段,帮助正则表达式更快地找到匹配,以及在非匹配位置上花费更少 时间(见《更多提升正则表达式效率的方法》)。正则表达式并不老是完成工做的最佳工具,尤为当你只是搜索一个文本字符串时。

虽然有不少方法来修整一个字符串,使用两个简单的正则表达式(一个用于去除头部空格,另外一个用于 去除尾部空格)提供了一个简洁、跨浏览器的方法,适用于不一样内容和长度的字符串。从字符串末尾开始 循环查找第一个非空格字符,或者在一个混合应用中将此技术与正则表达式结合起来,提供了一个很好的 替代方案,它不多受到字符串总体长度的影响。

快速响应用户界面

JavaScript 和用户界面更新在同一个进程内运行,同一时刻只有其中一个能够运行。这意味着当 JavaScript 代码正在运行时,用户界面不能响应输入,反之亦然。有效地管理 UI 线程就是要确保 JavaScript 不能运行 太长时间,以避免影响用户体验。最后,请牢记以下几点:

1. JavaScript 运行时间不该该超过 100 毫秒。过长的运行时间致使 UI 更新出现可察觉的延迟,从而对总体 用户体验产生负面影响。
2. JavaScript 运行期间,浏览器响应用户交互的行为存在差别。不管如何,JavaScript 长时间运行将致使用 户体验混乱和脱节。
3. 定时器可用于安排代码推迟执行,它使得你能够将长运行脚本分解成一系列较小的任务。

网页工人线程是新式浏览器才支持的特性,它容许你在 UI 线程以外运行 JavaScript 代码而避免锁定 UI。网页应用程序越复杂,积极主动地管理 UI 线程就越显得重要。没有什么 JavaScript 代码能够重要到允 许影响用户体验的程度。

Ajax

高性能 Ajax 包括:知道你项目的具体需求,选择正确的数据格式和与之相配的传输技术。

做为数据格式,纯文本和 HTML 是高度限制的,但它们可节省客户端的 CPU 周期。XML 被普遍应用 广泛支持,但它很是冗长且解析缓慢。JSON 是轻量级的,解析迅速(做为本地代码而不是字符串),交 互性与 XML 至关。字符分隔的自定义格式很是轻量,在大量数据集解析时速度最快,但须要编写额外的 程序在服务器端构造格式,并在客户端解析。

当从页面域请求数据时,XHR 提供最完善的控制和灵活性,尽管它将全部传入数据视为一个字符串, 这有可能下降解析速度。另外一方面,动态脚本标签插入技术容许跨域请求和本地运行 JavaScript 和 JSON, 虽然它的接口不够安全,并且不能读取信息头或响应报文代码。多部分 XHR 可减小请求的数量,可在一次响应中处理不一样的文件类型,尽管它不能缓存收到的响应报文。当发送数据时,图像灯标是最简单和最 有效的方法。XHR 也可用 POST 方法发送大量数据。

除这些格式和传输技术以外,还有一些准则有助于进一步提升 Ajax 的速度:

1. 减小请求数量,可经过 JavaScript 和 CSS 文件打包,或者使用 MXHR。
2. 缩短页面的加载时间,在页面其它内容加载以后,使用 Ajax 获取少许重要文件。
3. 确保代码错误不要直接显示给用户,并在服务器端处理错误。
4. 学会什么时候使用一个健壮的 Ajax 库,什么时候编写本身的底层 Ajax 代码。

Ajax 是提高你网站潜在性能之最大的改进区域之一,由于不少网站大量使用异步请求,又由于它提供 了许多不相关问题的解决方案,这些问题诸如,须要加载太多资源。对 XHR 的创造性应用是如此的与众 不一样,它不是呆滞不友好的界面,而是响应迅速且高效的代名词;它不会引发用户的憎恨,谁见了它都会 爱上它。

编程实践

JavaScript 提出了一些独特的性能挑战,关系到你组织代码的方法。网页应用变得愈来愈高级,包含的 JavaScript 代码愈来愈多,出现了一些模式和反模式。请牢记如下编程经验:

1. 经过避免使用 eval_r()和 Function()构造器避免二次评估。此外,给 setTimeout()和 setInterval()传递函数参 数而不是字符串参数。
2. 建立新对象和数组时使用对象直接量和数组直接量。它们比非直接量形式建立和初始化更快。
3. 避免重复进行相同工做。当须要检测浏览器时,使用延迟加载或条件预加载。
4. 当执行数学远算时,考虑使用位操做,它直接在数字底层进行操做。
5. 原生方法老是比 JavaScript 写的东西要快。尽可能使用原生方法。

构建并部署高性能 javascript 应用

开发和部署过程对基于 JavaScript 的应用程序能够产生巨大影响,最重要的几个步骤以下:

1. 合并 JavaScript 文件,减小 HTTP 请求的数量
2. 使用 YUI 压缩器紧凑处理 JavaScript 文件
3. 以压缩形式提供 JavaScript 文件(gzip 编码)
4. 经过设置 HTTP 响应报文头使 JavaScript 文件可缓存,经过向文件名附加时间戳解决缓存问题
5. 使用内容传递网络(CDN)提供 JavaScript 文件,CDN 不只能够提升性能,它还能够为你管理压缩和缓 存

全部这些步骤应当自动完成,不管是使用公开的开发工具诸如 Apache Ant,仍是使用自定义的开发工具 以实现特定需求。若是你使这些开发工具为你服务,你能够极大改善那些大量使用 JavaScript 代码的网页 应用或网站的性能。

工具

当网页或应用程序变慢时,分析网上传来的资源,分析脚本的运行性能,使你可以集中精力在那些须要 努力优化的地方。使用网络分析器找出加载脚本和其它页面资源的瓶颈所在,这有助于决定哪些脚本须要延迟加载,或者 进行进一步分析。传统的智慧告诉咱们应尽可能减小 HTTP 请求的数量,尽可能延迟加载脚本以使页面渲染速度更快,向用户 提供更好的总体体验。使用性能分析器找出脚本运行时速度慢的部分,检查每一个函数所花费的时间,以及函数被调用的次数, 经过调用栈自身提供的一些线索来找出哪些地方应当努力优化。虽然花费时间和调用次数一般是数据中最有价值的点,仍是应当仔细察看函数的调用过程,可能发现其 它优化方法。这些工具在那些现代代码所要运行的编程环境中再也不神秘。在开始优化工做以前使用它们,确保开发时 间用在解决问题的刀刃上。

😊往期的读书笔记 && 技术文章

为了系统的串联前端知识，我平时喜欢用思惟导图来记录读书笔记，我在 github 建了仓库放这些思惟导图的原件，和读书笔记。若是你也喜欢用思惟导图的方式来记录读书笔记，也欢迎和我一同维护这个仓库，欢迎留言或则微信（646321933）与我交流

精读《你不知道的 javascript（上卷）》

精读《你不知道的javascript》中卷

精读《深刻浅出Node.js》

精读《图解HTTP》

javascript 垃圾回收算法

你须要知道的单页面路由实现原理

javascript 实现高仿 growingIO

新鲜出炉的8月前端面试题

思惟导图下载地址