前端性能优化之加载技术

2017-09-12 本文已影响1298人 SCQ000

在这个前端用户体验越来越重要的时代，你的页面稍微有点卡顿，都难以挽留用户。而作为一名有追求的前端，势必要力所能及地优化我们前端页面的性能。今天，就来谈一谈那些前端性能优化的加载技术，利用这些技术可以很好地提高网站的响应速度和用户体验。

页面渲染

在理解真正的优化技术之前，我们需要先了解为什么需要优化？这得从浏览器的渲染引擎谈起。浏览器从获取HTML文档开始，就进入了渲染引擎的工作阶段，其目的是将网页的内容显示在浏览器屏幕上。大体可以描述为从解析HTML内容，构造DOM节点再到DOM元素布局定位最后再绘制DOM元素的这样一个过程。更加详细的内容可以参考How browser works, 要看中文的童鞋可以看这篇译文。

在页面渲染的这样一个过程中，有一个关键点是如果在解析内容的过程中遇到了脚本标签，如：<script src="example.js"></script>，浏览器就会暂停内容的解析，转而开始下载脚本。并且只有等脚本下载完并执行结束后，渲染引擎才会继续解析。那么这样一来，页面显示的时间必然会被延长。因此我们需要优化的点就是尽可能地让页面更早地被渲染出来。

脚本加载的优化

要解决上面说到的脚本加载问题，通常有三种解决方案：将脚本放在HTML末尾、动态加载脚本以及异步加载脚本。最常用的应该就是将所有脚本放置在HTML文档的末尾了。这应该是每个前端刚入门时，被教的最多的。对于这个方法，这里就不多做介绍，直接上重头戏。

动态加载

所谓动态加载脚本就是利用javascript代码来加载脚本，通常是手工创建script元素，然后等到HTML文档解析完毕后插入到文档中去。这样就可以很好地控制脚本加载的时机，从而避免阻塞问题。

function loadJS(src) {
  const script = document.createElement('script');
  script.src = src;
  document.getElementsByTagName('head')[0].appendChild(script);
}
loadJS('http://example.com/scq000.js');

异步加载

我们都知道，在计算机程序中同步的模式会产生阻塞问题。所以为了解决同步解析脚本会阻塞浏览器渲染的问题，采用异步加载脚本就成为了一种好的选择。利用脚本的async和defer属性就可以实现这种需求：

<script type="text/javascript" src="./a.js" async></script>
<script type="text/javascript" src="./b.js" defer></script>

虽然利用了这两个属性的script标签都可以实现异步加载，同时不阻塞脚本解析。但是使用async属性的脚本执行顺序是不能得到保证的。而使用defer属性的脚本执行顺序可以得到保证。另一方面，defer属性是在html文档解析完成后，DOMContentLoaded事件之前就会执行js。async一旦加载完js后就会马上执行，最迟不超过window.onload事件。所以，如果脚本没有操作DOM等元素，或者与DOM时候加载完成无关，直接使用async脚本就好。如果需要DOM，就只能使用defer了。

这里介绍的两种方法在实际运用过程中需要权衡一下的，渲染速度变快也就意味着脚本加载时间会变长。

解决异步加载脚本的问题

上面介绍的异步加载脚本并不是十分完美的。如何处理加载过程中这些脚本的互相依赖关系，就成了实现异步加载过程中所需要考虑的问题。一方面，对于页面中那些独立的脚本，如用户统计等插件就可以放心大胆地使用异步加载。而另一方面，对于那些确实需要处理依赖关系的脚本，业界已经有很成熟的解决方案了。如采用AMD规范的RequireJS,甚至有采用了hack技术（通过欺骗浏览器下载但不执行脚本)的labjs（已过时)。如果你熟悉promise的话，就知道这是在JS中处理异步的一种强有力的工具。下面以promise技术来实现处理异步脚本加载过程中de的依赖问题：

// 执行脚本
function exec(src) {
    const script = document.createElement('script');
    script.src = src;
    
    // 返回一个独立的promise
    return new Promise((resolve, reject) => {
        var done = false;

        script.onload = script.onreadystatechange = () => {
            if (!done && (!script.readyState || script.readyState === "loaded" || script.readyState === "complete")) {
              done = true;

              // 避免内存泄漏
              script.onload = script.onreadystatechange = null;
              resolve(script);
            }
        }

        script.onerror = reject;
        document.getElementsByTagName('head')[0].appendChild(script);
    });
}

function asyncLoadJS(dependencies) {
    return Promise.all(dependencies.map(exec));
}

asyncLoadJS(['https://code.jquery.com/jquery-2.2.1.js', 'https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js']).then(() => console.log('all done'));

可以看到，我们针对每个脚本依赖都会创建一个promise对象来管理其状态。采用动态插入脚本的方式来管理脚本，然后利用脚本onload和onreadystatechange(兼容性处理)事件来监听脚本是否加载完成。一旦加载完毕，就会触发promise的resovle方法。最后，针对依赖的处理，是promise的all方法，这个方法只有在所有promise对象都resolved的时候才会触发resolve方法，这样一来，我们就可以确保在执行回调之前，所有依赖的脚本都已经加载并执行完毕。

懒加载(lazyload)

懒加载是一种按需加载的方式，也通常被称为延迟加载。主要思想是通过延迟相关资源的加载，从而提高页面的加载和响应速度。在这里主要介绍两种实现懒加载的技术：虚拟代理技术以及惰性初始化技术。

虚拟代理加载

所谓虚拟代理加载，即为真正加载的对象事先提供一个代理或者说占位符。最常见的场景是在图片的懒加载中，先用一种loading的图片占位，然后再用异步的方式加载图片。等真正图片加载完成后就填充进图片节点中去。

// 页面中的图片url事先先存在其data-src属性上
const lazyLoadImg = function() {
  const images = document.getElementsByTagName('img');
  for(let i = 0; i < images.length; i++) {
      if(images[i].getAttribute('data-src')) {
          images[i].setAttribute('src', images[i].getAttribute('data-src'));
          img.onload = () => img.removeAttribute('data-src');
      }
  }
}

惰性初始化

惰性初始模式是在程序设计过程中常用的一种设计模式。顾名思义，这个模式就是一种将代码初始化的时机推迟（特别是那些初始化消耗较大的资源），从而来提升性能的技术。

jQuery中大名鼎鼎的ready方法就用到了这项技术，其目的是为了在页面DOM元素加载完成后就可以做相应的操作，而不需要等待所有资源加载完毕后。与浏览器中原生的onload事件相比，可以更加提前地介入对DOM的干涉。当页面中包含大量图片等资源时，这个方法就显出它的好处了。在jQuery内部的实现原理上，它会设置一个标志位来判断页面是否加载完毕，如果没有加载完成，会将要执行的函数缓存起来。当页面加载完毕后，再一一执行。这样一来，就将原本应该马上执行的代码，延迟到页面加载完毕后再执行。感兴趣的可以去阅读这一部分的源码，里面还包括了浏览器兼容等处理。

选择时机

选择时机：比较常见的两种

滚动条监听

事件回调（需要用户交互的地方）

当然，你也可以根据具体的业务场景选择延迟加载的时机。

滚动条监听

滚动条监听，常常用在大型图片流等场景下。通过对用户滚动结束的区域进行计算，从而只加载目标区域中的资源。这样就可以实现节流的目的。


// 简单的节流函数
function throttle(func, wait, mustRun) {
    var timeout,
        startTime = new Date();

    return function() {
        var context = this,
            args = arguments,
            curTime = new Date();

        clearTimeout(timeout);
        // 如果达到了规定的触发时间间隔，触发 handler
        if(curTime - startTime >= mustRun){
            func.apply(context,args);
            startTime = curTime;
        // 没达到触发间隔，重新设定定时器
        }else{
            timeout = setTimeout(func, wait);
        }
    };
};

// 判断元素是否在可视范围内
function elementInViewport(element) {
    const rect = element.getBoundingClientRect();
    return (rect.top >= 0 && rect.left >= 0 && rect.top <= (window.innerHeight || document.documentElement.clientHeight));
}

function lazyLoadImgs() {
    const count = 0;
    return function() {
        [].slice.call(images, count).forEach(image => {
            if(elementInViewport(elementInViewport(image))) {
                image.setAttribute('src', image.getAttribute('data-src'));
                count++;
            }
        });
    }
}

const images = document.getElementByTagName('img');
// 采用了节流函数, 加载图片
window.addEventListener('scroll',throttle(lazyLoadImgs(images),500,1000));

事件回调

这种场景就是那些需要用户交互的地方，如点击加载更多之类的。这些资源往往通过在用户交互的瞬间（如点击一个触发按钮），发起ajax请求来获取资源。比较简单，在此不再赘述。

利用webpack实现脚本加载优化

现如今，对于大型项目大家都会用上打包工具。现代化的工具使得我们不必再写那些又长又难懂的代码。针对懒加载，webpack也提供了十分友好的支持。这里主要介绍两种方式。

import()方法

我们知道，在原生es6的语法中，提供了import和export的方式来管理模块。而其import关键字是被设置成静态的，因此不支持动态绑定。不过在es6的stage 3规范中，引入了一个新的方法import()使得动态加载模块成为可能。所以，你可以在项目中使用这样的代码：

$('#button').click(function() {
  import('./dialog.js')
    .then(dialog => {
        //do something
    })
    .catch(err => {
        console.log('模块加载错误');
    });
});

//或者更优雅的写法
$('#button').click(async function() {
    const dialog = await import('./dialog.js');
  //do something with dialog
  
});

由于该语法是基于promise的，所以如果需要兼容旧浏览器，请确保在项目中使用es6-promise或者promise-polyfill。同时，如果使用的是babel，需要添加syntax-dynamic-import插件。

require.ensure

require.ensure与import()类似，同样也是基于promise的异步加载模块的一种方法。这是在webpack 1.x时代官方提供的懒加载方案。现在，已经被import()语法取代了。为了文章的完整性，这里也做一些介绍。

在webpack编译过程中，会静态地解析require.ensure中的模块，并将其添加到一个单独的chunk中，从而实现代码的按需加载。

语法如下：

require.ensure(dependencies: String[], callback: function(require), errorCallback: function(error), chunkName: String)

一个十分常见的例子是在写单页面应用的时候，使用该技术实现基于不同路由的按需加载：

const routes = [
    {path: '/comment', component: r => require.ensure([], r(require('./Comment')), 'comment')}
];

预加载

首屏加载的问题解决后，用户在具体的页面使用过程中的体验也很重要。如果能够通过预判用户的行为，提前加载所需要的资源，则可以快速地响应用户的操作，从而打造更加良好的用户体验。另一方面，通过提前发起网络请求，也可以减少由于网络过慢导致的用户等待时间。因此，“预加载”的技术就闪亮登场了。

preload规范

preload 是w3c新出的一个标准。利用link的rel属性来声明相关“proload"，从而实现预加载的目的。就像这样：

<link rel="preload" href="example.js" as="script">

其中rel属性是用来告知浏览器启用preload功能，而as属性是用来明确需要预加载资源的类型，这个资源类型不仅仅包括js脚本(script)，还可以是图片(image)，css(style)，视频(media)等等。浏览器检测到这个属性后，就会预先加载资源。

这个规范目前兼容性方面还不是很好，所以可以先稍微了解一下。webpack现在也已经有相关的插件，如果感兴趣的话，请移步preload-webpack-plugin。对于更加详细的技术细节，这里推荐一篇博客https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/。

DNS Prefetch 预解析

还有一个可以优化网页速度的方式是利用dns的预解析技术。同preload类似，DNS Prefetch在网络层面上优化了资源加载的速度。我们知道，针对DNS的前端优化，主要分为减少DNS的请求次数，还有就是进行DNS预先获取。DNS prefetch就是为了实现这后者。其用法也很简单，只要在link标签上加上对应的属性就行了。

<meta http-equiv="x-dns-prefetch-control" content="on" /> /* 这是用来告知浏览器当前页面要做DNS预解析 */
<link rel="dns-prefetch" href="//example.com">

在支持该标准的浏览器上，会自动对链接中的地址域名做DNS解析缓存。不过，像Goolge、火狐这样的现代浏览器即使不设置这个属性，也能在后台做自动预解析。如果你的页面中需要大量访问不同域名的资源，可以利用这项技术加快资源的获取，从而获得更好的用户体验。需要注意的是，DNS预解析虽好，但是也不能滥用。如果对多页面重复DNS预解析，会增加DNS的查询次数。

总结

通常对于大型应用来说，完整加载所有javascript代码是十分耗时的工作。因此，通常会将JavaScript分为两个部分（一部分是渲染初始化页面所必须的，另一部分则是剩下的脚本）来进行加载。这样就可以尽可能快速地渲染出网页。通过监听onload事件，可以很好地控制回调的时机，同时采用异步加载等技术能够同时并行加载多个脚本，从而大大提高最终页面的渲染速度。最好是把在onload事件之前执行的代码拆分成一个单独的文件。当然，在处理脚本加载这一过程中还存在着几个问题：1.如何找到需要拆分的代码？ 2 怎样处理竞争状态？3.如何延迟加载其余部分的代码？希望这篇文章能够给你启发！对于文中有错漏之处，欢迎指出。鉴于本人水平有限，也欢迎大家来多多交流。