高性能javascript-总结(一)

时间:2022-08-13 17:17:04

 性能优化

第一章:加载和执行

总结:

  1. 将所有<script>标签放到页面底部。这能确保在脚本执行前页面已经渲染了。
  2. 合并脚本。<script>标签越少,加载越快,响应速度也更迅速。
  3. 有多种无阻塞下载js方法: 

    1)使用<script>标签的defer属性;  defer属性只有ie4+和Firefox3.5+游览器支持

    2)动态创建<script>元素来下载执行代码;

    3)使用XHR对象下载js代码并注入页面中;

 

第二章:数据存储

总结:

  1. 访问字面量和局部变量的速度最快,相反,访问数组元素和对象成员相对较慢。
  2. 变量,属性或方法在作用域链中的位置越深,访问所需要时间就越长。全局变量处在作用域链的最末端,因此访问速度也是最慢的。
  3. 避免使用with语句,因为它会改变执行环境作用域链,同样,try-catch也会,因此要小心使用
  4. 嵌套的对象成员尽量少用
  5. 通常来说,你可以通过把常用的对象成员、数组元素、跨域变量保存在局部变量中来改善js性能,因为局部变量访问速度更快。

 

第三章:获取dom元素优化

总结:

  1. 减少dom访问次数,如果需要多次访问dom节点请定义一个局部变量存储它的引用。
  2. 推荐使用速度更快的API,比如querySelectorAll()。
  3. 留言重绘重排,批量修改样式,动画中使用绝对定位。

innerHTML和createElement():

innerHTML相对createElement在创建节点速度更快,大约是3.6倍。且大多数游览器均innerHTML使用更快,除webkit游览器,createElement相对会快些。

对DOM中特定元素操作时,开发者通常需要得到比getElementById()和getElementsByTagName()更好的控制。有时候为了得到需要的元素列表,你需要组合它们并遍历返回的节点,但这种繁密的过程效率低下。这时候,使用css选择器也是一种定位节点的便利途径,这时候javascript库提供了大量API,最新的游览器提供了一个名为quertSekectorAll()的原生DOM方法。这种方法自然比使用js和DOM来遍历查找元素快,同时对目前游览器的兼容性更高。

querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素,请使用 querySelectorAll() 方法替代。

<div id="menu">
<a>123</a>
<a>456</a>
</div>
<script>
//获取id,遍历该id下的所有a元素 ,打印出个数
var elements=document.getElementById('menu').getElementsByTagName('a');
console.log(elements.length) //2
//使用querySelectorAll(),兼容ie6及以上
var elements2=document.querySelectorAll('#menu > a');
console.log(elements2.length) //2
</script>
同样能查找获取,如果需要大量组合查询,使用下面的效率会更好,速度很提高很多。

重绘与重排
例如:
var bodyColor=document.body.style; //背景色被修改了2次,游览器需要刷新渲染队列 var bodyColor=document.body.style;
var bgcolor=bodyColor.background;      =========================>    v
bgcolor='red';                        优化            bgcolor='red';
console.log(bgcolor);                                  bgcolor='blue'
bgcolor="blue";                                    console.log(bgcolor);
console.log(bgcolor);                                //这里只需要读取一次

改变样式:
var eldocument.getElementById("mydiv");          var el=document.getElementById("mydiv");
el.style.borderLeft='1px';      =================>  el.style.cssText='border-left:1px; border-right:2px; padding:5px;'
el.style.borderRight='2px';        优化        //合并所有改变,然后一次处理。这样只会修改一次DOM,可以优化
el.style.padding='5px';                   //方法2: 使用className ,调用的是一个写好的css样式

//这段代码执行下来,会触发3次重排!!!              el.className='active'