前语：
最近一向在做功用优化和模块化改造的作业，并完结了一次前端重构。在这里总结出一些经历和得失来帮助咱们思考。共两篇文章，第一篇评论功用优化，第二篇评论模块化结构。而之所以把这两个论题放到一同，是由于这两项作业都涉及到对前端代码进行不一样程度的重构，并且模块化改造其实是咱们在对功用优化做到必定程度以后发现有必要要做的一件事情。本篇是功用优化的有些，下面我把咱们的商品简称为N页面。
应用场景剖析：
N页面作为一个进口页面，对页面加载速度有着极高的请求。一起，N页面内部却又有着非常复杂的功用与交互。N页面的第一版上线时，页面引用的js文件有3个，总共40-50k（紧缩&Gzip以后）。页面onload时刻在1.3秒。
1.3秒的load时刻，相比较绝大多数网站来说都是一个不错的数值。但老板一句话“怎样这个页面翻开这么慢”，马上像是给咱们的后背安了一枚定时炸弹。功用优化成了N页面下一步作业的重中之重。
老板注重页面速度，关于Web前端开发人员来说其实是件幸事，这表明你将有更丰厚的时刻和资本去实习Web功用优化这一课题，不必被辗转反侧的商品升级需要所打扰。那么关于N页面，咱们做了哪些实习：
常规优化手法包含：
CSS置顶，JS置底。
静态资本外联、兼并、紧缩。
图像优化。（Png运用pngcrush；Gif运用gifsicle；Jpeg运用jpegtran）
图像推迟加载。（首要对于首屏外的图像。）
运用CSS Sprite，首屏图像悉数合到一张图上。
静态文件上CDN。（静态文件的下载能提速20%左右。）
静态文件设置强缓存。（射中强缓存82.4%；射中若缓存3.4%；未射中缓存14.2%。）
HTML紧缩。（Gzip后削减%5。）
增强型手法：
根底库定制。（用代码剖析代码，主动打包被运用到的办法作为根底库，使根底库从本来的紧缩后25K减小为9.8K，减小了61%）
页面数据存储优化。（从本来的直接写json形式的script，变为将json隐藏在textarea中，初始化或用到的时分才去获取并进行解析。）
首屏CSS检测。（对首屏用到的CSS进行检测，将不归于首屏的CSS代码独自打包并移到首屏以外进行推迟加载）
js按需加载。（在后面做要点介绍）
监控& 丈量
功用优化最重要的作业不是优化而是监控。这个道理很简单：没有监控系统就没办法衡量功用优化的作用，那么你所做的任何作业都是盲目的。
咱们对功用的监控是从多个维度展开的，包含均匀时刻、时段散布、浏览器散布、省份、运营商等。便于发现和定位任何一个细节的疑问。
而在均匀时刻这一维度，咱们又分为四个等级：
1.Head时刻– head标签加载完结的时刻
2.TTi时刻– 页面可交互时刻（即首屏第一次烘托出来的时刻）
3.Dom时刻– Dom Ready的时刻
4.Load 时刻– 页面彻底加载完结的时刻
这么区分的优点是，页面加载每个环节的耗时一望而知：
Head ：CSS加载时刻
TTI ：全体HTML加载和烘托时刻
DOM 减TTI ： js文件网络传输时刻和在浏览器进行解析的时刻
Load 减Dom ： js初始化+ 图像加载的时刻
并且，咱们经过移动tti时刻点的方位，发现了一个风趣的景象，如下图
能够看出，页面加载的功用瓶颈就在script的下载和解析时刻。
为了进一步定位功用瓶颈，咱们在页面内对用户网速进行了测验，结果很震动：有2%的用户网速小于2k/s，5%的用户网速小于10k/s。（国内的网络状况真是不忍目睹啊）
那么，优化计划就很显着了：最大极限地减小js文件巨细，以减小网络传输时刻，提升页面功用。
经过后来的优化作业咱们发现：js代码紧缩、Gzip后每减小1k，页面加载时刻就能减小10ms左右。
按需加载：
这是除了js紧缩外，你能想到的最有用减小js文件巨细的办法了。
按需加载，望文生义，即是在页面初次加载的时分只提供最需要的js给用户，而剩下的js等用户运用到了有关的功用再去加载。
按需加载合适哪种类型的网站：假如80%的用户来到你的页面只运用20%的功用，那么就有必要把这20%的js作为首屏加载，而剩下的js做按需加载。
从这个视点来讲，几乎一切网站都能够做按需加载，由于总有一些功用是用户很少会用到的。
那么，如何做按需加载：
按需加载需要有一套js模块加载的结构。这个结构的作用是：确保在所需的js加载完结后才去履行回调办法。
按需加载还需要有一套触发条件。在咱们的页面中，对鼠标移动和鼠标点击都进行了监听，以确保在用户想运用某个功用之前或进行了相应操作时，触发js加载。
除此以外，咱们还对js根底库进行了进一步拆分，分为首屏用到的根底办法，和推迟加载的js所需的根底办法。以最大极限地确保首屏js量的最小化。
经过按需加载的拆分，咱们将首屏的js代码从本来的gzip以后40-50k减小到了只有24k。
一起，咱们对CSS的加载也进行拆分，首屏不需要的CSS代码也随JS进行推迟加载。
作用 & 总结
功用优化是一个非常繁琐的作业，页面功用受许多要素的制约，不过相信一点：办法总比疑问多。咱们经过优化，最终将页面加载时刻降到了650ms，仅为优化前的一半。一切优化作业中，作用最显着的即是js按需加载了。
|
咨询服务热线：400-099-8848
