网站前端性能优化之javascript和css篇

资料来源：网络整理时间：2023/3/22 2:45:29 共计：3584 浏览

　　之前看过Yahoo团队写的一篇关于网站站点性能优化提升的信息文章，信息文章是2010年左右写的，虽然有点老，但是很多方面还是很有借鉴意义的。关于css的性能优化提升，他提到了如下几点：

　　CSS性能优化提升

　　1、把样式表置于顶部

　　现把样式表放到文档的< head />内部似乎会加快网站页面的下载相应速度。这是因为把样式表放到< head />内会使网站页面有步骤的加载显示。

　　注重性能的前端we服务器往往希望网站页面有秩序地加载。同时，我们也希望查看浏览器把已经接收到信息内容尽可能显示出来。这对于拥有较多信息内容的网站页面和网速较慢的用户使用者来说特别重要。向用户使用者返回可视化的反馈，例如进程指针，已经有了较好的研究并形成了正式文档。在我们的研究中HTML网站页面就是进程指针。当查看浏览器有序地加载文件头、导航栏、顶部的logo等对于等待网站页面加载的用户使用者来说都可以作为可视化的反馈。这从整体上改善了用户体验用户评价。

　　把样式表放在文档底部的问题是在包括包含Internet Explorer在内的很多查看浏览器中这会中止信息内容的有序呈现。查看浏览器中止呈现是为了避免样式改变引起的网站页面元素重绘。用户使用者不得不面对一个空白网站页面。

　　HTML规范清楚指出样式表要放包含在网站页面的< head />区域内：“和< a />不同，< link />只能出现在文档的< head />区域内，尽管它可以多次使用它”。无论是引起白屏还是出现没有样式化的信息内容都不值得去尝试。最好的方案就是按照HTML规范在文档< head />内加载你的样式表。

　　2、避免使用CSS表达式（Expression）

　　表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在网站页面显示和缩放时，就是在网站页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式提升增加一个计数器可以跟踪表达式的计算频率。在网站页面中随便移动鼠标都可以轻松达到10000次以上的计算量。

　　一个减少CSS表达式计算次数的方式方法就是使用一次性的表达式，它在第一次运行时将结果赋给指定的样式属性，并用这个属性来代替CSS表达式。如果样式属性必须在网站页面周期内动态地改变，使用事件句柄来代替CSS表达式是一个可行办法。如果必须使用CSS表达式，一定要记住它们要计算成千上万次并且可能会对你网站页面的性能产生影响。

　　3、使用外部Java和CSS

　　很多性能规则都是关于如何处理外部文件的。但是，在你采取这些措施前你可能会问到一个更基本的问题：Java和CSS是应该放在外部文件中呢还是把它们放在网站页面本身之内呢？

　　在实际应用中使用外部文件可以提升提高网站页面相应速度，因为Java和CSS文件都能在查看浏览器中产生缓存。内置在HTML文档中的Java 和CSS则会在每次请求中随HTML文档重新下载。这虽然减少了HTTP请求的次数，却提升增加了HTML文档的大小。从另一方面来说，如果外部文件中的 Java和CSS被查看浏览器缓存，在没有提升增加HTTP请求次数的同时可以减少HTML文档的大小。

　　关键问题是，外部Java和CSS文件缓存的频率和请求HTML文档的次数有关。虽然有一定的难度，但是仍然有一些指标可以一测量它。如果一个会话中用户使用者会查看浏览你网站站点中的多个网站页面，并且这些网站页面中会重复使用相同的脚本和样式表，缓存外部文件就会带来更大的益处。

　　对于拥有较大查看浏览量的首页来说，有一种技术可以平衡内置代码带来的HTTP请求减少与通过使用外部文件进行缓存带来的好处。其中一个就是在首页中内置 Java和CSS，但是在网站页面下载完成后动态下载外部文件，在子网站页面中使用到这些文件时，它们已经缓存到查看浏览器了。

　　4、削减Java和CSS

　　精简是指从去除代码不必要的字符减少文件大小从而节省下载时间。消减代码时，所有的注释、不需要的空白字符（空格、换行、tab缩进）等都要去掉。在 Java中，由于需要下载的文件体积变小了从而节省了响应时间。精简Java中目前用到的最广泛的两个工具是JSMin和YUI Compressor。YUI Compressor还可用于精简CSS。我之前的一篇信息文章关于前端部署的，ant+YUI Compressor 地址是： xmlns ="" >

　　< head >

　　< title标题 > js test </ title标题 >

　　< meta ; charset=UTF-8" />

　　< link type ="text/css" rel ="stylesheet" href =" >

　　代码2(只加了1个空的嵌入JS)：

　　< head >

　　< title标题 > js test </ title标题 >

　　< meta ; charset=UTF-8" />

　　< link type ="text/css" rel ="stylesheet" href ="中css和js的顺序，样式表必须在嵌入的JS执行前先加载、解析完。而嵌入的JS会阻塞后面的资源加载，所以就会出现上面CSS阻塞下载的情况。

　　嵌入JS应该放在什么位置

　　1、放在底部，虽然放在底部照样会阻塞所有呈现，但不会阻塞资源下载。

　　2、如果嵌入JS放在head中，请把嵌入JS放在CSS前面。

　　3、使用defer

　　4、不要在嵌入的JS中调用运行时间较长的函数，如果一定要用，可以用setTimeout来调用,关于settimeout

　　》》》返回素材圈Sucaiq.Com 查看更多

　　如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对素材圈的支持！若你觉得本文对你有帮助，欢迎，烦请注明出处，谢谢！

　　素材圈_网站建设免费素材下载第三方平台： httP://

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：利用.htaccess实现禁止某个IP访问网站的方法 | ·下一条：使你的网站快速跑起来