码迷,mamicode.com
首页 > 编程语言 > 详细

10.高性能JavaScript

时间:2020-02-28 20:57:44      阅读:62      评论:0      收藏:0      [点我收藏+]

标签:处理   闭包   nbsp   性能优化   script   innerhtml   包含   循环   数组   

一.JavaScript代码性能优化

  • JavaScript作用域优化

    • 在作用域上查找变量是从局部变量开始依次向外的技术图片

    • 避免使用with:改变了作用域结构,是访问某个变量变快了但相应的其他局部变量访问变慢
      技术图片

    • 谨慎使用闭包

  • JavaScript流程控制优化

    • 循环控制for-in:
      技术图片

    • 循环控制forEach:增加了开销相对速度较慢
      技术图片

二.DOM操作性能优化

  • 访问DOM次数越多,代码运行速度越慢

    技术图片
  • 在旧版本浏览器中innerHTML的运行效率相对其他DOM操作要高

  • element.cloneNode()比element.createElement()的效率要高

  • 将DOM集合转存在数组中,进行遍历,并且访问集合元素时使用局部变量

  • 合并所有样式处理,一次性修改DOM
    技术图片

三.JavaScript脚本加载优化

  • 将JavaScript脚本文件放到body标记的后面

  • 减少页面当中所包含script标记的数量

 

10.高性能JavaScript

标签:处理   闭包   nbsp   性能优化   script   innerhtml   包含   循环   数组   

原文地址:https://www.cnblogs.com/zhihaospace/p/12379838.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!