前端页面性能优化
一、Js 脚本文件
1、脚本位置
浏览器在解析到 <body> 标签之前，不会渲染页面的任何部分。把脚本放到顶部将会导致明显的延迟。
因此推荐所有的 <script> 标签尽可能放到 <body> 标签的底部，以尽量减少对整个页面下载的影响。
2、组织脚本
把多个 js 文件合并成一个，这样只需要引用一个 <script> 标签，可以减少性感的消耗。
3、使用 defer 加载 js
带有 defer 属性的 <script> 标签可以放置在文档的任何位置，对应的 javascript 文件将在页面解析到 <script> 标签时开始下载，但不会执行，直到DOM加载完成。
它不会阻塞浏览器的其他进程，因此这类文件可以与页面中的其它资源并行下载。
任何带有 defer 属性的 <script> 标签的元素在 DOM 完成加载之前都不会被执行，无论内嵌还是外链。
defer 属性仅当scr属性声明时才生效。
<script type="text/javascript" src="file.js" defer></script>
4、动态加载js脚本元素
function loadScript(url,callback){
var script=document.createElement("script")
script.type="text/javascript"
if(script.readyState){ //ie
script.onreadystatechange=function(){
if(script.readyState==="loaded" || script.readyState==="complete"){
script.onreadystatechange=null
callback()
}
}
}else{
script.onload=function(){
callback()
}
}
script.src=url
document.getElementByTagName("head")[0].appendChild(script)
}
5、XMLHttpRequest 脚本注入
创建一个 XHR 对象，使用它下载 javascrip 文件，最后通过创建动态 <script> 标签元素将代码注入到页面中。
注意：下载的 JavaScript 文件必须与所请求页面在同一个域，这样意味 JavaScript 文件不能通过 CDN 下载。
6、使用 LazyLoad 类库
7、LABjs
二、访问 DOM
1、访问集合元素时使用局部变量
当遍历一个集合时，第一优化原则是把集合存储在局部变量中，并把length缓存在循环外部，使用局部变量代替需要多次读取的元素。
例子：
function collectionNodesLocal(){
var coll=document.getElementsByTagName('div'),
len =coll.length,
name='',
el=null;
for(var count=0;count<len;count++){
el=coll[count]
name=el.nodeName
name=el.nodeType
name=el.tagName
}
return name;
}
2、批量修改 DOM 如何减少 重排和重绘
i、隐藏元素，应用修改，重新显示
ii、使用文档片段 ，最后将文档片段一次性添加到 DOM 节点中
iii、为修改的DOM 创建一个备份，然后对副本进行操作，最后用新的节点替代旧的节点
3、使用缓存布局信息减少DOM 重排 重绘
例如，把一个元素沿对角线移动，每次都移动一个像素，到500像素 x 500 像素结束。
更好的方式应该是，获取一次起始位置的值，然后将其赋值给一个变量，每次循环的时候对变量进行递增，最后通过当前变量进行直接复制style 属性。
4、使用迅速更快的 API ，比如 querySelectorAll() 和 firstElementChild
5、使用事件委托来减少事件处理器的数量
浙公网安备 33010602011771号