YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Frontend » Performance » 前端性能优化:Remove duplicate JavaScript and CSS

前端性能优化:Remove duplicate JavaScript and CSS

今天要介绍的YSlow的前端性能优化规则是 Remove duplicate JavaScript and CSS(移除重复的JavaScriptCSS)。

检查一下 没准你的网站就有重复的 JavaScriptCSS

出现重复的JavaScriptCSS 应该说并不是什么新鲜事情,不管公司大小,出现重复的代码的情况都时不时会发生的。仔细检查一下你的网站,没准就有重复的 JavaScriptCSS

在阿里巴巴工作前,前端几乎都是我一个人维护,这个时候虽然脚本数量并不少,但是都是我个人经手,所以基本上没有遇到过同一页面中出现重复脚本的情况。但也有例外,有几次我要美工做HTML页面,她不熟悉JavaScript怎么加载,调用过重复(不同版本)的jQuery文件。(所以,别学我,在页面中嵌入JavaScript还是自己亲自动手,如果前端只有你和美工。)

当我到AliExpress前端团队以后,也发现了一个页面中有重复JavaScript的情况。有页面中调用旺旺在线的代码被反复加载了3次,有的则是一些公用的CSS代码被重复调用。

重复代码对前端性能的影响

重复代码对性能的影响应该可以说很直接了。如果你是一外部文件调用的方式加载的,就会带来额外的HTTP请求和增加页面总体积,页面的加载速度必然会变慢,尤其是你重复调用很大的代码库的情况。

《High Performance Web Sites》一书中具体说到,在IE浏览器中,无缓存的情况下重复加载JavaScript文件会重复请求同一个文件多次,而Firefox中则不会。YSlow文档中也如是写到:

Unnecessary HTTP requests happen in Internet Explorer, but not in Firefox. In Internet Explorer, if an external script is included twice and is not cacheable, it generates two HTTP requests during page loading. Even if the script is cacheable, extra HTTP requests occur when the user reloads the page.

我实际测试了一下:

CSS 文件重复加载在IE、Firefox和Chrome中都没有多次请求,而JavaScript代码在IE(11)中并没有看到重复请求,而Firefox(27)中有多次请求了。示例页面中的重复调用了jQuery.js文件3次,Firefox 会出现3次HTTP请求,第一次状态码是 200,后两次是304。IE11 测试时,无论是用IE中用自带的网络调试工具还是用 Fiddler2调试,都没有出现重复请求。

所以,这里我这里测试的IE中的情况,目前还不明确是因为我测试工具的问题还是IE11已经修复了这个问题。而 Steve在他的书中也没有说明所使用的测试抓包工具是什么,以及IE浏览器的版本。但是不管怎样,为了更好的性能,你都不应该重复调用JavaScript代码。因为重复执行会有损失,更严重的是如果JS代码调用的依赖顺序出现问题,就不光是性能问题了。

而测试重复加载CSS文件的结果则显示不是那么的糟糕。IE,Firefox,Chrome似乎都没有重复加载CSS,被重复调用的CSS文件都显示只有1个状态码为200的HTTP请求。网页总的流量几乎也没有变。当然页面中重复出现的代码会增加HTML文件的大小,但总的来说没有大的改变。不过CSS样式的解析也是有加载顺序问题的,所以如果严重的话,页面的样式会因为重复加载CSS文件的位置问题,导致页面样式出现问题,这也是很致命的。

不过到目前为止,我可以查到的资料还没有具体说明重复加载CSS文件产生重复HTTP请求的情况。具体的情况我想估计只有在服务器端查看日志文件才看得到了。从我测试的结果,似乎浏览器都会忽视重复调用的CSS外部文件,只加载渲染同一个CSS文件一次。

Remove duplicate JavaScript and CSS

回到主题,避免重复的JavaScriptCSS文件,可以优化你的页面前端性能。除了前面提到的重复加载外部的JavaScriptCSS文件外,我们也应该移除代码中重复的部分,避免重复的CSS代码块反复重写样式,也避免重复的JavaScript代码重复编写和重复调用。

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:前端性能优化:Remove duplicate JavaScript and CSS

« »

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)