zoukankan      html  css  js  c++  java
  • javascript性能优化总结

    js加载顺序优化

    原理:在使用src 属性加载JavaScript 的过程中浏览器必须首先下载外部文件的代码,这要占用一些时间,然后,解析并运行此代码。此过程中,页面解析和用户交互是被完全阻塞的。

    解决方案:

    ——将所有<script>标签放置在页面的底部,紧靠body 关闭标签</body>的上方。

    ——将脚本成组打包。页面的<script>标签越少,页面的加载速度就越快,响应也更加迅速。

    ——为<script>标签添加defer 属性(只适用于Internet Explorer 和Firefox 3.5 以上版本)
    ——动态创建<script>元素,用它下载并执行代码
    ——用XHR 对象下载代码,并注入到页面中

    js对于数据访问优化

    在JavaScript 中,数据存储位置可以对代码整体性能产生重要影响。有四种数据访问类型:直接量,变量,数组项,对象成员。它们有不同的性能考虑。

    直接量和局部变量访问速度非常快,数组项和对象成员需要更长时间。

    局部变量比域外变量快,因为它位于作用域链的第一个对象中。变量在作用域链中的位置越深,访问所需的时间就越长。全局变量总是最慢的,因为它们总是位于作用域链的最后一环。

    嵌套对象成员会造成重大性能影响,尽量少用。

    一个属性或方法在原型链中的位置越深,访问它的速度就越慢。

    一般来说,你可以通过这种方法提高JavaScript 代码的性能:将经常使用的对象成员,数组项,和域外变量存入局部变量中。然后,访问局部变量的速度会快于那些原始变量。

    DOM访问优化

    DOM 访问和操作是现代网页应用中很重要的一部分。但每次你通过桥梁从ECMAScript 岛到达DOM 岛时,都会被收取“过桥费”。

    最小化DOM 访问,在JavaScript 端做尽可能多的事情。

    在反复访问的地方使用局部变量存放DOM 引用.

    小心地处理HTML 集合,因为他们表现出“存在性”,总是对底层文档重新查询。将集合的length 属性缓存到一个变量中,在迭代中使用这个变量。如果经常操作这个集合,可以将集合拷贝到数组中。

    注意重绘和重排版;批量修改风格,离线操作DOM 树,缓存并减少对布局信息的访问。

    动画中使用绝对坐标,使用拖放代理。

    使用事件托管技术最小化事件句柄数量。

    算法和流程优化

    for,while,do-while 循环的性能特性相似,谁也不比谁更快或更慢。

    除非你要迭代遍历一个属性未知的对象,否则不要使用for-in 循环。

    改善循环性能的最好办法是减少每次迭代中的运算量,并减少循环迭代次数。

    一般来说,switch 总是比if-else 更快,但并不总是最好的解决方法。

    当判断条件较多时,查表法比if-else 或者switch 更快。

    浏览器的调用栈尺寸限制了递归算法在JavaScript 中的应用;栈溢出错误导致其他代码也不能正常执行。

    如果你遇到一个栈溢出错误,将方法修改为一个迭代算法或者使用制表法可以避免重复工作。

    运行的代码总量越大,使用这些策略所带来的性能提升就越明显。

  • 相关阅读:
    随机出题问题
    简读《构建之法》提问
    大二下第一次课后作业
    大道至简第七第八章读后感
    继承与接口动手动脑
    大道至简第六章读后感
    数组里的随机数问题
    大道至简第五章读后感
    输入法的用户界面
    搜索水王
  • 原文地址:https://www.cnblogs.com/baiJr/p/6124313.html
Copyright © 2011-2022 走看看