前端性能优化之加载技术

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

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

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

解决异步加载脚本的问题

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

// 执行脚本functionexec(src){constscript =document.createElement('script');    script.src = src;// 返回一个独立的promisereturnnewPromise((resolve, reject) =>{vardone =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);    });}functionasyncLoadJS(dependencies){returnPromise.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属性上constlazyLoadImg =function(){constimages =document.getElementsByTagName('img');for(leti =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内部的实现原理上,它会设置一个标志位来判断页面是否加载完毕,如果没有加载完成,会将要执行的函数缓存起来。当页面加载完毕后,再一一执行。这样一来,就将原本应该马上执行的代码,延迟到页面加载完毕后再执行。感兴趣的可以去阅读这一部分的源码,里面还包括了浏览器兼容等处理。

选择时机

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

滚动条监听

事件回调(需要用户交互的地方)

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

滚动条监听

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

// 简单的节流函数functionthrottle(func, wait, mustRun){vartimeout,        startTime =newDate();returnfunction(){varcontext =this,            args =arguments,            curTime =newDate();        clearTimeout(timeout);// 如果达到了规定的触发时间间隔,触发 handlerif(curTime - startTime >= mustRun){            func.apply(context,args);            startTime = curTime;// 没达到触发间隔,重新设定定时器}else{            timeout = setTimeout(func, wait);        }    };};// 判断元素是否在可视范围内functionelementInViewport(element){constrect = element.getBoundingClientRect();return(rect.top >=0&& rect.left >=0&& rect.top <= (window.innerHeight ||document.documentElement.clientHeight));}functionlazyLoadImgs(){constcount =0;returnfunction(){          [].slice.call(images, count).forEach(image=>{if(elementInViewport(elementInViewport(image))) {                image.setAttribute('src', image.getAttribute('data-src'));                  count++;              }          });    }}constimages =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(asyncfunction(){constdialog =awaitimport('./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)

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

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

预加载

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

preload规范

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

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

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

DNS Prefetch 预解析

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

/* 这是用来告知浏览器当前页面要做DNS预解析 */

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

总结

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

参考资料

《Javascript性能优化》

bubkoo.com/2015/11/19/…

2ality.com/2017/01/imp…

segmentfault.com/a/119000000…

perishablepress.com/3-ways-prel…

www.youtube.com/watch?v=wKC…

原文链接:https://juejin.im/post/59b73ef75188253db70acdb5

推荐阅读更多精彩内容

  • 在这个前端用户体验越来越重要的时代,你的页面稍微有点卡顿,都难以挽留用户。而作为一名有追求的前端,势必要力所能及地...
    SCQ000阅读 3,640评论 0 52
  • 前言 在之前的文章 如何优化网站性能,提高页面加载速度 中,我们简单介绍了网站性能优化的重要性以及几种网站性能优化...
    倚剑闯天涯_阅读 376评论 0 3
  • 性能优化方向分类 请求数量: 合并脚本和样式表, CSS Sprites, 拆分初始化负载, 划分主域(使用“查找...
    Www刘阅读 1,515评论 3 8
  • 从雅虎军规看前端性能优化 本文大部分内容翻译自雅虎前端的性能优化,如何让页面加载更快,雅虎给出了多个规则,原文地址...
    cce117b0a0ce阅读 735评论 0 3
  • 网站优化离不开前后端的互相协作,但是对于前端工程师来说,在保证后端技术方案不变时,能不能只利用前端技术来优化网站呢...
    留七七阅读 6,026评论 0 31
  • 投射我儿6月15日中考前心态稳定不急躁,有计划,有目标,中考三天超常发挥,中考成绩超过二中高中录取线,考上广州市二...
    花开生两面阅读 105评论 0 0
  • 今天是编辫子的第2天,依然很开心,中国好同事如何变换一个爱心的造型。 这一天忙下来,其实也没有什么特别有成就感的工...
    豫小文阅读 58评论 0 0
  • 一、学习方面:二:体育方面 三、自我保护能力 四、沟通能力提升、五、生活管理
    宁妈成长日记阅读 128评论 0 0
  • 我是初心,一位热爱育儿,热衷学习的二胎宝妈! 5月28日给自己立下flag:坚持100天的感恩日记。不知何时,我越...
    初心在行动阅读 869评论 0 5
  • 四月的“进”,五月的“乱”, 六月我开始思考, 不能不停的赶路,要学会休息,休息是为了更好的前行! 六月就要接近尾...
    正_成长记录阅读 112评论 0 0