延迟加载，晋升首屏的加载速度

　　当用户打开一个很长的网页时，首屏内容的加载给了最直不美观的速度体验。所以，让首屏尽快的完成加载也是用户权衡该页面是否够“快”的最首要的身分。5173的首页，图片根基都集中不才面的位置，让下面的这些图片全数都延迟加载就可以尽可能快的晋升首屏的加载速度。常见的图片延迟加载手艺想必巨匠都不会目生了，这里就不复述。在 TAB 内容中也同样有良多图片，这里也让它们在触发 TAB 菜单的时辰再进行加载。给图片在HTML代码中添加固定的尺寸自然也不再话下。so easy? no!

　　具体实施

　　图片中不仅仅有营业设置装备摆设的图片，也有来自第三方广告系统的图片(搜罗首屏的轮播年夜图也是此类型的)。这些广告图片的 URL 是一个 JavaScript 链接，其中包含了使用 document.write 的体例来加载广告图片的代码。还有些 TAB 中包含了使用 iframe 嵌入到页面的合作站点的内容。广告图片以及 iframe 都是梗阻页面加载的元凶。

　　最初的设法是年夜头开发一套广告系统，换一种广告加载体例，可是开发成本太高。最后想到了使用 textarea 来延迟加载广告和 iframe，玉伯供给的这种体例确实挺好用的。textarae 是个好工具，非论是通俗的 HTML 代码亦或是 CSS、JavaScript 代码，都可以扔到琅缦沔去实现延迟加载。广告图片的优化斗劲麻烦，我在另一篇文章中有具体的介绍。有了 textarea，良多内容都可以像实现图片延迟加载那样来实施延迟加载，在 TAB 内容中的 iframe 也可以在触发 TAB 菜单时再去加载 iframe。

　　处事端的优化

　　针对页面总体积过年夜的问题，代码的重构确实能减小不少的体积，此外静态资本一律都要添加gzip，仅仅是添加gzip，带来的机能晋升也是斗劲较着的。

　　合理的操作浏览器端的缓存也是很主要的，除了登录信息以及 cookie 的这种时效性较高的请求外，所有能添加 cache-control 的请求都加上了 max-age 的过时时刻。关于浏览器端的缓存添加，这里有一篇斗劲具体的文章 Cache them if you can。缓存的添加也会给更新带来麻烦，所以要有响应的体例来断根缓存，给静态资本的请求加上时刻戳即可。

　　此外处事端此次也斗胆的采用了 varnish 作为缓存加速处事器，这在国内年夜型网站中应该还不多见。

　　优化成不美观

　　做了这么多工作是时辰看磕暌古化成不美观了，先来砍寤鏖数据对比：

　　优化前后的请求数对比：

　　请求数的年夜年夜削减，缓解了处事器的压力，可以撤失踪良多处事器了。

　　优化前后的静态资本的文件体积对比，没有包含ajax数据等其他文件体积：

　　JavaScript的重构太孔殷了，原本竟有41个 JavaScript 外链文件，当然这些外链也搜罗了15个广告的外链，广告的优化我稍后再说，可是还剩下26个外链 JavaScript。这些臃肿不胜的 JavaScript文件即是造成页面加载堵塞的元凶，也是系统资本占用的蛀虫，这是整个项目的可贵之一。

　　年夜文件体积的对比来看，优化后节约了494KB的下载量，假若按照日PV1000000(估值，现实值弘远于该值，氖灼恋耐计?隙啵??允灼恋乃俣瓤欤?墒亲芗釉厥笨桃?ち级啵?比凰?堑南略亓恳惨?暌沽级啵?173的首屏是DOM数较多，下载量也小良多，所以总时刻和首屏时刻相当接近。这里说得总下载量是页面初度加载完成的总下载量，因为都用到延迟加载手艺，向下滚动时又会有图片加载，这些时刻是不计较在内的。

　　到底应该若何来权衡网页加载的快慢?此次的优化我没有用 yslow 和 pagespeed 等测试分数的软件，而是以现实的加载速度为优化的方针，首屏的加载速度晋升就是最合适现实的声名。如不美观一个网站打开半天仍是白屏，相信年夜年夜都人城市感受很慢。这就是现实的体验，测分软件是纺暌钩不出来的。

　　原载于：雨夜带刀's Blog

　　本文链接：http://stylechen.com/5173homepage-optimized.html

　　如需转载请以链接形式注明原载或原文地址。