高性能Javascript读书笔记
2018-11-27 本文已影响0人
虎妞先生
第一章 加载和执行
-
推荐将所有的<script>标签尽可能的放到<body>标签的底部
-
合并所有外链的JS
-
无阻塞脚本的方法
- script标签的defer属性，可以让它先下载，到全部dom加载完毕后再执行
- 许多浏览器不支持
- 动态创建script dom节点
- 可跨域方案，利用动态插入script元素来让脚本读取、生效。
var scriptElement = document.createElement("script"); scriptElement.src = "http://anydomain.com/A.js"; document.getElementByTagName("head")[0].appendChild(scriptElement);- XMLHttpRequest脚本注入
- 先创建一个XHR对象，然后用它get下载js文件，最后通过创建动态<script>元素代码插入页面中,但是无法跨域 ，大型应用不会使用
- script标签的defer属性，可以让它先下载，到全部dom加载完毕后再执行
第二章 数据存取
- 访问字面量和局部变量的速度最快，访问数组元素和对象成员相对较慢
- 访问局部变量比访问访问跨作用域变量更快，将常用的对象成员，数组元素，全局变量存储到局部变量，加快读写速度。
第三章 DOM编程
- dom操作天生就慢，尽量减少dom操作，减少访问dom的次数。
- 使用document.querySelect来做选择器，比其他方式快。
- 需要多次访问某个dom节点，使用局部变量存储。
- 尽量不要在布局信息改变时做查询。
- 最小化重绘和重排：
-
合并修改操作
-
使文档脱离文档流，操作，再带回文档；三种方法使dom脱离文档
- 隐藏元素（display: none;），操作元素，重新显示
var ul = document.getElementById('mylist'); ul.style.display = 'none'; appendDataToElement(ul, data); ul.style.display = 'block';- 文档片段(推荐，产生的DOM遍历和重排次数最少)
var fragment = document.createDocumentFragment(); appendDataToElement(fragment, data); document.getElementById('mylist').appendChild(fragment);- 为修改的节点创建一个备份
var old = document.getElementById('mylist'); var clone = old.cloneNode(true); appendDataToElement(clone, data); old.parentNode.replaceChild(clone, old);
-
- 使用事件委托来减少事件处理器的数量
第四章 算法和流程控制
- 倒序循环
- 减少对象成员和数组项的查找次数
for(var i=0,len = items.length;i<len;i++){}
- 递归中容易出现栈溢出的情况，需要了解一下尾递归
第五章 正则表达式和字符串
- 字符串合并的时候简单的"+"和“+=”操作符
- str+='abc'+'efg;//2个以上的字符串拼接，会产生临时字符串
- str=str+'abc'+'efg';//推荐，提速10%~40%
*关于正则还有一堆东西，以后在叙。
