高性能JavaScript

发布日期:2018-03-07    浏览次数:358

零、组织结构

根据引言,作者将全书划分为四个部分:
一、页面加载js的最佳方式(开发前准备)
二、改善js代码的编程技巧(开发中)
三、构建与部署(发布)
四、发布后性能检测与问题追踪(线上问题优化)
这样的组织结构也符合我们的开发习惯,首先进入第一部分。

一、JavaScript加载

起因:script脚本的加载会阻塞浏览器渲染页面和处理用户交互,如果加载的script脚本太多太大,就会长时间阻塞,造成页面假死。
解决方案:

1.脚本位置

放在底部。
放在底部可以保证页面主体结构已经基本加载完成展示给用户,才去加载script脚本。这条准则也有特例,如果是一些公司的埋点脚本,可能要求必须放在head里,以确保能上报页面加载时长。

2.组织脚本

减少script数量,合并脚本。
不论是使用concat打包工具合并,还是cdn提供的combo,都能达到该目的。

3.无阻塞脚本

在页面加载完成之后再去触发加载js,这样可以防止script加载阻塞页面。

原生defer

script标签自带defer属性,可以达到这个目的。捎带一提,async属性可以触发异步加载,合理利用了宽带。

动态脚本

或者使用动态脚本元素,通过js文件动态创建script标签,文件加载完成之后会立刻执行。

这个技术的重点在于不论在何时启动下载,文件的下载和执行过程都不会阻塞页面其他进程。

XMLHttpRequest脚本注入

通过XHR加载脚本,由于不是在script标签中加载,所以可以控制script标签中的代码执行时间。在需要的时候再去把script标签添加到页面上。
这也是jsonp的原理。

作者推荐的无阻塞模式

先加载很少量的jsLoader代码,之后通过loader来加载剩余的代码。

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.getElementsByTagName('head')[0].appendChild(script);
}

loadScript('rest.js', function () {
    Rest.init()
});

YUI3、LazyLoad、LABjs

作者介绍了上述3个类库中lazyload的使用方式,其实原理就是上述所说,在体验上各有不同。关键就是loader中监听script的onload事件,决定script的执行时机。

二、高性能编程技巧

这个部分从2到8章分别介绍不同的提高性能的技巧。

1.数据存取

  • 数据的存取有四种方式,字面量、变量、数据项、对象。字面量和变量快于数组项和对象。
  • 局部变量位于作用域链的开始,查找速度最快,所处的位置越深,查找越慢,全局变量查找最慢。
  • with可以影响作用域链,try-catch语句中的catch也会影响。慎重使用。
  • 如果当前对象没有某个属性或者方法,就会去遍历原型链上的属性和方法,也会造成性能损耗。
  • 嵌套对象层数越多,也会减慢速度。例如,location.href要快于window.location.href。

  • 解决方法:
    大部分的性能损耗都是与对象查找相关,所以建议缓存对象,减少查找次数。

    2.DOM编程

  • 由于DOM渲染引擎和JS引擎一般是分离实现的,要让两个相互独立的模块建立通讯,就会产生消耗。所以,我们需要减少DOM操作,已经获取的DOM节点,缓存下来,防止多次重复操作。
  • 其次,要注意重绘和重排,对DOM的哪些操作会引起重绘和重排,减少这方面的操作。
    最后,需要注意DOM事件处理用户交互。

  • 使用innerHTML和原生的document.createElement()类似的方法,速度相差不大。在最新版的webkit内核浏览器(chrome和safari)以外,innerHTML会更快,而且相较而言,代码量也少很多。

  • HTML集合是包含了DOM节点引用的类数组对象,例如document.getElementByName()这样的方法,需要注意的是HTML集合一直与文档保持着连接,每次需要新信息的时候,都会重新查询。

  • 在查找DOM元素时,尽可能使用原生方法,如最新支持比较完善的querySelectorAll()。

  • 在页面布局和几何属性改变时就需要“重排”,例如:
  1. 添加或者删除可见的DOM元素
  2. 元素位置改变
  3. 元素尺寸改变(包括:外边距、内边距、边框厚度、宽度、高度等属性改变)。
  4. 内容改变,例如:文本改变或者图片被另一个尺寸的图片替代
  5. 页面渲染器初始化
  6. 浏览器窗口尺寸改变
  • 为了减少重排和重绘,批量修改样式时,“离线”操作DOM树,使用缓存,并减少访问布局信息的次数。在动画中使用绝对定位,使用拖放代理。

  • 使用事件委托来减少事件处理器的数量。

3.算法和流程控制

  • 减少迭代的工作量,比如使用局部变量缓存数组的长度,减少查询次数。
  • 减少迭代次数,使用Duff's Device。
  • 尽可能不用forin,forin要比for、while、do-while要慢。
  • switch比if-else要快,但要综合考虑代码可读性。
  • 判断条件较多时,查找表要比if-else和switch更快。
  • 递归容易造成栈溢出,控制递归的循环次数。

4.字符串和正则表达式

  • 连接巨大的字符串时,数组项合并在IE7或更早之前版本是最优方法。
  • 如果在现代浏览器中,推荐使用简单的+和+=操作符代替,避免不必要的中间字符串。
  • 回溯是正则的基本组成,也会带来性能问题。
  • 回溯失控发生在正则表达式本应快速匹配的地方,因为某些特殊的字符串匹配动作导致运行缓慢甚至浏览器崩溃。为了避免这种情况,应该使相邻的字元互斥,避免嵌套量词对同一字符串的相同部分多次匹配,通过利用预查的原子组去除不必要的回溯。

5.快速响应的用户界面

  • 任何JavaScript任务不应该超过100ms,否则用户体验会变差。
  • JavaScript运行期间,浏览器响应用户交互的行为存在差异。
  • 定时器可用来安排代码延迟执行,但不一定绝对精确。
  • web worker允许程序员在UI线程外执行JavaScript代码,从而避免锁定UI。

6.AJAX

  • 减少请求数
  • 缩短页面加载时间,页面主要内容加载完成之后,用Ajax获取次要内容
  • 代码错误尽可能对用户屏蔽

7.最佳实践

  • 避免使用eval和Function构造器带来双重求值带来的性能损耗。
  • 使用直接量创建对象和数组,直接量更快
  • 避免重复工作,需要检测浏览器时,可使用延迟加载或者条件预加载。
  • 进行数学计算时,考虑使用位运算。
  • 尽量使用原生方法

三、构建与部署

  • 合并JavaScript文件以减少HTTP请求数
  • 使用YUI Compressor压缩JavaScript文件(事实上,如今nodejs下的打包工具更加好用)
  • 在服务端压缩JavaScript文件(Gzip编码)
  • 通过正确设置HTTP响应头来缓存JavaScript文件,通过向文件名加时间戳来避免缓存问题
  • 使用CDN

四、发布后性能检测与问题追踪

  • 使用网络分析工具找出加载脚本和页面中其他资源的瓶颈。
  • 把脚本延迟加载可以加快页面渲染速度,带来更好的用户体验
  • 使用性能分析工具找出脚本运行速度慢的地方,检查每个函数消耗的时间,以及函数被调用的次数,通过调用栈自身的一些线索来找出需要集中精力优化的地方
    一些工具:
  • YUI Profile
  • Firebug
  • Page Speed
  • Fiddler
  • YSlow
  • dynaTrace Ajax Edition

事实上,这些工具的功能在新版的chrome开发工具都有了,所以我建议好好学习chrome开发者工具。
感谢阅读。

本文网址:https://www.wyxxw.cn/blog-detail-1-4-969.html

返回列表

非特殊说明,本文版权归原作者所有,转载请注明出处

提示:本站所有资源仅供学习与参考,请勿用于商业用途。图片来自互联网~如侵犯您的权益,请联系QQ:1067507709.

提示:转载请注明来自:https://www.cnblogs.com/liuyongjia/p/8502576.html 。 转载人:momo