weixin_42733155的博客

补充：因《高性能javascript》一书成书较早，书中介绍的许多知识已过期或者有新的标准，我尽量结合自己的理解以及书中的观点进行总结和阐述。如有错误之处还请指出。一、脚本的加载和执行1、为什么脚本会阻塞页面大多数浏览器是单线程（js线程和ui线程共享同一个线程），所以，在执行js代码时，ui层无法做出响应。所以，在下载或者执行js过程中，页面渲染和交互是阻塞的。2、防止页面阻塞的...

二、数据的读取速度1、四种读取数据方式的比较字面量、局部变量、数组元素、对象元素是常见的四种数据（并非严格意义上的数据类型，而是代码中常见的、按照读取方式分类的四种数据类型）。字面量（书中应该指Array、Object、Math等，这和全局变量有所区别。这些内置的对象是绑定在js环境内的）、局部变量读取速度最快，访问对象成员和数组成员更慢。2、作用域与作用域链的分析es6中出现...

四、算法和流程控制1、循环的分析循环的类型，可以参考我之前的文章：《数组遍历的几种方法及用法》，除此之外，还有最基础的for循环，while循环，do while循环，以及遍历对象的for in 循环（for in循环遍历的顺序是按照键值对加入对象的时间从先到后遍历的，并且会遍历继承自原型的属性。建议用for of 遍历Object.keys()或者Objec）。在这些循环/遍历的方法...

五、字符串和正则表达式的优化1、字符串拼接方式的分析常见的拼接方式如上（因成书较早，不含es6模板字符串的方法。）（1）+操作符与+=操作符有一个例子：str+='one'+'two；在运行时，浏览器会经理四个步骤：<1>、在内存中创建一个临时字符串；<2>、连接后的字符串'onetwo'被赋值给该临时字符串；<3>、临时字符...

六、快速响应的用户界面1、ui线程浏览器用于执行javascript和更新用户界面的线程叫做ui线程，工作原理基于简单的队列系统。任务（包括js代码和界面更新--重绘回流）按照在队列的顺序依次执行。一个界面交互可能会引起多个任务。当前任务执行完毕，ui线程会执行下一个任务，知道队列中没有任务，这时浏览器ui线程处于空闲状态。注意的一点是，任务运行期间如果与页面发生交互，对应的ui更新无...

七、ajax分析1、数据传输ajax是一种与服务器通信而无需重载页面的方法（即局部刷新。）目前，有五种向服务器请求数据的技术：XMLhttpRequest(XHR)、Dynamic script tag insertion(动态脚本注入)、iframes、Comet、Multipart XHR。其中，用的最多的是XHR、动态脚本注入、multipart XHR这三种...

八、实际开发的一些注意事项1、避免双重求值javascript代码允许在代码中提取一个包含代码的字符串然后动态执行它，有四种方法可以实现：eval()、Function()狗贼函数、setTimeout()和setInterval()。当在一段js代码中执行另一段js代码时，都会导致双重求值的性能消耗。所以，尽量避免使用eval和Function()（eval也会导致安全问题），至...

三、dom操作的性能问题1、为什么dom操作普遍较慢？dom（文档对象模型）和js独立实现。我们通过js去控制、修改dom，用的办法就是api。因为js和dom在浏览器内部独立实现，所以通过js操作dom就会带来性能消耗。2、优化dom操作的方式（1）优化dom操作最直接也最简单的方式，就是减少对dom访问与操作的次数。尽量优先处理数据，然后统一操作dom。（2）值得一提的是，...