《高性能JavaScript编程》笔记

一、浏览器渲染问题
浏览器在渲染在遇到body标签之前不会渲染页面任何部分，遇到<script>标签就会停下来解析javaScript,因为脚本会阻塞其他页面资源的下载过程，所以推荐将所有<script>标签放在尽可能接近body标签底部的位置，尽量减少对整个页面下载的影响。
二、减少JavaScript对性能的影响的方法
1.将脚本成组打包。页面的<script>标签越少，页面的加载速度就越快，响应也就更加迅速。不论外部脚本文件还是内联代码都是如此
2.有几种方法可以使用非阻塞方式下载JavaScript
-为<script>标签添加defer属性(只适用于Internet Explorer和Firefox3.5以上版本)
-动态创建<script>元素，用它下载并执行代码
-用XHR对象下载代码，并注入到页面中
三、闭包的影响
闭包的属性包含与运行期上下文作用域链相同的对象引用，会产生副作用。通常，一个函数的激活对象与运行期上下文一同销毁。当涉及闭包时，激活对象就无法销毁了，因为引用仍然存在于闭包的属性中。这意味着脚本中的闭包与非闭包函数相比，需要更多内存开销。IE使用非本地化JavaScript对象实现DOM对象，闭包可能导致内存泄漏。
四、变量访问速度
可以将经常使用的对象成员，数组项，和域外变量存入局部变量中，访问局部变量的速度会快于原始变量
五、DOM事件技术——时间托管
捕获
到达目标
冒泡

六、优化
1.循环 用变量保存循环次数 倒序循环 尽量不要使用for in
2.字符串
3.正则表达式
工作原理：第一步：编译 创建一个正则表达式对象之后，浏览器检查你的模板有没有错误，然后将它转换成一个本机代码例程，用于执行匹配工作。如果你将正则表达式赋给一个变量，可以避免重复执行此步骤
第二步：设置起始位置 当一个正则表达式投入使用时，首先要确定目标字符串中开始搜索的位置。它是字符串的起始位置，或 者由正则表达式的 lastIndex 属性指定，但是当它从第四步返回到这里的时候（因为尝试匹配失败），此位 置将位于后一次尝试起始位置推后一个字符的位置上。
浏览器厂商优化正则表达式引擎的办法：如果一个正则表达式以^开头，IE 和 Chrome 通常判断在字符串起始位置上是否能够匹配，然后可避免愚蠢 地搜索后续位置；另一个例子是匹配第三个字母是 x 的字符串，一个聪明的办法是先找到 x，然后再从起 始位置回溯两个字符（例如，近的 Chrome 版本实现了这种优化）。
第三步：匹配每个正则表达式的字元 正则表达式一旦找好起始位置，它将一个一个地扫描目标文本和正则表达式模板。当一个特定字元匹配失败时，正则表达式将试图回溯到扫描之前的位置上，然后再进行探寻匹配。
回溯问题会导致浏览器挂掉
第四步：匹配成功或失败 如果字符串在当前位置发现完全匹配，就宣布匹配成功。如果正则表达式的所有可能路径都尝试后仍没有匹配成功，那么正则表达式引擎回到第二步，从字符串的下一个字符重新尝试。只有字符串中的每一个字符都经历了这样的过程还没有匹配成功，才是失败。
4.定时器
停止 JavaScript 运 行，给 UI 线程机会进行更新，然后再继续运行 JavaScript，可以用JavaScript 定时器完成。
setTimeout() 和setInterval()创建定时器，setTimeout()创建定时器只运行一次，setInterval()创建一个周期性重复运行的定时器。
同一时间只有一个定时器存在，只有当这个定时器结束时才能创建一个新的定时器，以这种方式使用定时器不会带来性能问题。
5.网页工人线程：在浏览器UI线程之外运行JavaScript代码
网页工人线程不绑定UI线程，意味着他们不能访问许多浏览器资源
网页工人线程运行环境的组成：(1)一个浏览器对象：只包含四个属性：appName,appVersion,userAgent,platform
(2)一个location对象：和window里的一样，所有属性都是只读的
(3)一个self对象：指向全局工人线程对象
(4)一个importScripts（）方法，使工人线程可以加载外部javaScript文件
(5)所有ECMAScript对象，例如Object，Array，Date等
(6)XMLHttpRequest构造器
(7)setTimeout()和setInterval()
(8)close()可立即停止工人线程
因为网页工人线程有不同的全局运行环境，不能在 JavaScript 代码中创建。需要创建一个 完全独立的 JavaScript 文件，包含那些在工人线程中运行的代码。要创建网页工人线程，必须传入这个 JavaScript 文件的 URL： var worker = new Worker("code.js"); ，代码执行后将为指定文件创建一个新线程和一个新的工人线程运行环境，此文件被异步下载，直 到下载并运行完之后才启动工人线程。
工人线程交互 工人线程和网页代码通过事件进行交互，网页代码可通过postMessage()方法向工人线程传递数据，接收单个参数，即传递给工人线程的数据。在工人线程中还有onmessage事件用于接受信息
例如：var worker = new Worker("code.js");
worker.onmessage = function(event) //定义了一个 onmessage 事件句柄，事件对象具有一个 data 属 性存放传入的数据
{
alert("event.data");
};
worker.postMessage("Nicholas"); //工人线程可通过它自己的 postMessage()方法将信息返回给页面
说明： 工人线程从 message 事件中接收数据。
注：postMessage()可传递参数原始值(string,boolean,number,null,undefined),Object和 Array的实例
6.Ajax 异步 JavaScript 和 XML
向服务器请求数据的技术：XMLHTTPRequest（XHR）
Dynamic script tag insertion （可从不同域上的服务器上获取数据，参数只能通过GET方式传递）
iframes
Comet
MultipartXHR
总结：作为数据格式，纯文本和HTML是高度限制的，但它们可节省客户端的CPU周期。XML被广泛应用，但它非常冗长且解析缓慢。JSON是轻量级的，解析迅速(作为本地代码而不是字符串)，交互性与XML相当。字符分隔的自定义格式非常轻量，在大量数据集解析时速度快，但需要编写额外的程序在服务器端构造格式，并在客户端解析。
7.创建并部署高性能 JavaScript 应用程序
(1)减少渲染页面所需的HTTP请求的数量
(2)压缩文件
(3)使用CDN提供JavaScript文件，CDN不仅能提高性能，还可以管理压缩和缓存
(4)通过设置HTTP响应报头文使JavaScript文件可缓存，通过向文件名附加时间戳解决缓存问题