• 35648

    文章

  • 23

    评论

  • 20

    友链

  • 最近新加了很多技术文章,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

高性能JavaScript

欢迎来到阿八个人博客网站。本 阿八个人博客 网站提供最新的站长新闻,各种互联网资讯。 喜欢本站的朋友可以收藏本站,或者加QQ:我们大家一起来交流技术! URL链接:https://www.abboke.com/ITjs/2019/0611/686.html   在“高性能网站的十四条黄金法则”中,我高度概括性的介绍了建设高性能网站的十四条操作指南;在“使用微软CDN优化网页加载速度”中,我介绍了使用微软提供的CDN服务提高我的网站的加载速度。今天,我还要接着“高性能”来展开论述。

  在“十四条黄金法则”中,第六、八、十、十四等四条法则都和JavaScript中有着直接的关系。可见,JavaScript在Web开发中占据着多么重要的作用。

  根据Nicholas Zakas的研究显示,在多数浏览器使用单进程处理UI更新和JavaScript运行等多个任务,而同一时间只能有一个任务被执行。JavaScript运行了多长时间,那么在浏览器空闲下来响应用户输入之前的等待时间就有多长。从基本层面说,这意味着<script>标签的出现使整个页面因脚本解析、运行而出现等待。

  综上所述,提高JavaScript的性能,是提高用户体验的一个重要途径。那么,我们可以从哪些方面提高JavaScript的性能呢?下面,我从“脚本引入位置”、“变量的使用”、“DOM树的操作”等几个方面来简要论述一下。

  • JavaScript脚本的引入位置
    1. <script>标签的引入位置最好放在</body>(注意:是body的结束标签)之前,以并且仅靠</body>。这样,可以减少JavaScript解析对页面渲染的阻塞;
    2. 尽量将一个页面中出现的多个JavaScript文件合并成一个JavaScript文件。这样,可以减少http请求次数,节省浏览器发起、接受以及解析HTTP请求的时间。
  • 变量的使用
    1. 尽量使用局部变量,如果需要多次引用当前作用域之外的变量,最好先将该变量缓存为局部变量使用;
    2. 所有变量都必须使用var声明;
  • DOM树操作
    1. getElementsByName、getElementsByClassName和getElementsByTagName等方法返回的是HTML集合对象不是一个真正的数组,并且该集合处于实时状态 (更新HTML,则相应的集合也会立刻更新),所以遍历时需要缓存length来提高效率,必要时可以将HTML集合先拷贝到普通数组中再处理;
    2. 合并多次对DOM和样式的修改,使用element.style.cssText = "float:right;margin-left:20px;"这种方式,以避免浏览器发生多次重排或重绘;
    3. 离线操作DOM树:对DOM树结构进行较大的改变时,需要先将元素脱离文档流,然后进行改变操作,最后再放回到文档流中;
      • 可以将元素隐藏来使其脱离文档的正常流;
      • 使用createDocumentFragment创建文档碎片节点;
  • 逻辑操作
    1. 只有在需要遍历对象的时候使用for-in循环,否则请使用for,while,do-while循环;
    2. if-else的排列从大概率到小概率,把出现最多的情况写在前面;有时也可以使用嵌套的if-else-if 这种方式,以减少条件的判断次数;
    3. 条件语句中需要测试的条件数量越大,越推荐使用switch来代替if-else;
    4. 当连接大量字符串时,在IE6 IE7 中字符串连接使用数组的join方式,其他浏览器中使用“+”或“+=”操作符;
  • 其他
    1. 避免使用eval,Function等函数(需要再次调用解释引擎);
    2. 使用[]代替new Array()定义数组,使用{}代替new Object()定义对象;
    3. 尽量避免使用try{} catch{} ,with{};
    4. 每行代码结束必须有分号;
    5. 使用setTimeout和setInterval时,避免传入字符串,而应该传入函数;
      如:

                
                setTimeout("alert(123)",100);
                
                

      应该改为:

                
                setTimeout(function{alert(123);},100);
                
                

注:

  • 这是我同事写的一篇文章。我向要约稿,以他发名义(使用以他名字命名的帐号)发表出来。

参考资料:

  1. 《高性能JavaScript》


相关文章

暂住......别动,不想说点什么吗?
  • 全部评论(0
    还没有评论,快来抢沙发吧!