不记得什么时候看得这本书了，今天拿来一看，嗯~内容真的是很简单了，，作为纪念还是来总结下吧。
此书，主要是从各个方面讲解了如何最大化的进行前端性能优化。
加载和运行
多个js文件可并行下载，但是仍会阻塞其他文件如图片的下载。
js下载和运行会阻塞浏览器运行，所以在script标签里的js代码一定要注意。
优化：放在body底部，延时加载（defer，dom加载完成后）
每个http请求都会产生额外性能负担，1个100K的文件比4个25Kb的文件下载要快。所以应适当使用打包
数据访问
每一种数据存储位置都具有特定的读写操作负担。大多数情况下，对一个直接量和一个局部变量数据访问，其性能消耗是微不足道的。访问数组和对象成员的代价要高一些。
对不同数据类型进行200,000次读操作所用的时间
1. 作用域：一个变量的可访问区域
作用域链：一个函数在创建时，相应的会产生一个作用域链。这个链有下（当前函数作用域，运行时上下文）层层到上（全局作用域），记录了该函数所有可访问的变量。
在函数运行过程，每遇到一个变量，标识符识别过程要决定从哪里获得或存储数据。此过程先从运行时上下文，层层向上查找（未找到，则将变量定为未定义）。正是这搜索过程影响了性能。
一个标识符的位置越深，他的读写速度越慢，所以函数内局部变量的访问速度是最快的，全局通常是最慢的（部分浏览器会优化此处）。建议：全局变量先存储在局部变量里，如document对象就可以先定义一个局部doc对象存储。
作用域链改变： try发生异常后，会把自己的作用域链转给catch
2. 闭包：允许函数访问局部范围之外的数据。
在经常访问一些范围之外的变量，每次访问都会导致一些性能损失。
一个函数的激活对象与运行期上下文一同销毁，当涉及闭包时，激活对象无法销毁了，因为引用仍然存在于闭包中。这意味着，闭包比非闭包函数需要更多内存消耗。
3.对象： 实例属性，原型属性
js是面向对象的
深入原型链越深，搜索属性的速度越慢
DOM编程
对DOM（文档对象模型）的操作代价昂贵，在富页面应用中通常是一个性能瓶颈。
访问修改DOM元素：
优化：减少访问，先克隆在修改
修改DOM元素，造成重绘或重新排版：
优化：
1. 从文档流中摘除该元素（隐藏，克隆），
2. 使元素脱离文档流（position：absolute）
浏览器在下载完所有资源后，他解析完文件会创建2个内部数据结构：dom树>页面结构，渲染树>dom节点如何显示。一旦dom树和xuanrans构造完毕，浏览器就可以显示页面上的元素了。
ps：渲染树的每个节点称为“框”或者“盒”，符合css模型的定义，将页面元素看做一个具有填充，边距边框和位置的盒。
当dom改变影响元素的几何属性（宽和高），浏览器需要重新计算元素的几何属性，其他元素的几何属性也因此受到影响，然后重构渲染树，这个过程称作重拍版
不是所有dom操作都会影响几何属性，例如改变背景色，只需要重绘
通过DOM事件处理用户相应
事件有3个阶段：捕获，到达目标，冒泡
优化：事件托管在父元素上，阻止冒泡等默认对你无用行为
算法和流程控制
1. 4中循环类型中，for-in性能最差，因为每次操作都要搜索实例或原型属性。
2. 优化循环工作量的第一步是，减少对象成员或数组查找的次数
3. 存储length
4. forEach等基于函数的迭代虽然更加便利，但是要比基于循环（for等）的迭代要慢一些（一般慢8倍）。每个数组项要关联额外的韩式调用是造成速度慢的原因。
5， 当比较数目很多时，switch表达式比if-else更快。
6. if-else优化，应将最常见的条件放在首位，减少比较次数
字符串和正则表达式
在js中，正则是必不可少的东西，他的重要性远超过琐碎的字符串处理。
1. 字符串拼接
如下图：
字符串常见拼接方式
当连接少量字符串时，操作都很快。
当字符串量多时：
第二种比第一种快，因为第一种内存先创建一个临时字符串，最后再讲字符串赋给str。
join 方法比其他方法都慢，因为他多了一个每个字符后插入一个空字符操作
contact，比+ 和+=慢。
2. 正则表达式
原理：？
响应UI
一个用户点击操作后，浏览器执行2个任务：UI响应+js事件code运行已响应点击。
js运行过慢会导致用户体验错乱和脱节。
浏览器在js运行时间上采取了限制：
1. 调用栈尺寸限制
2. 长时间脚本限制：统计脚本运行的总时间， firefox 10s, safari 5s，chrome没有时间限制但使用崩溃检测系统来处理此类限制。达到限制时，浏览器会弹框提示是否继续运行。
3. 接口最优应该在100ms内响应用户。
优化： 用定时器先响应事件再执行任务，分解任务，限时运行任务（过了时间自动return）
ajax异步JavaScript和XML
有5种方法可向服务器发送请求: XHR，动态脚本标签插入，iframes，comet，multipart XHR。不同情况使用不同方法
expires： get请求，告诉浏览器缓存多久
编程实践
避免重复代码：如浏览器检测
num判断是否奇偶：num&1 == 1
网友评论