高性能网站建设之前端优化

日期:2016-08-18点击:2871
                                               
广州网络公司分享高性能网站建设之前端优化
前端优化的重要性:
 
改进前端通常只要较少的时间和资源,例如修改Web服务器配置文件、将脚本和样式表放在特定位置、合并图片、合并脚本等,这些修改只需要几个小时或几天;而改进后端通常很麻烦,例如重新设计应用程序架构和代码、查找和优化临界代码路径、添加或改动硬件、对数据库进行分布化等,这些需要花费数周或数月。
 
只有10%~20%的最终用户响应时间花在了下载HTML文档上,其余的80%~90%时间花在了下载页面中的所有组件上。

 
高性能网站建设前端优化的举措:
 
减少http请求次数(http请求次数对性能的影响很大):
 
在图片方面,有三个具体方案:图片地图、CSS Sprites、内联图片三种,最值得关注的是CSS Sprites。
 
脚本和样式表也要合并,虽然合并有悖于模块化开发的原则,但非常有利于性能。
 
缓存可以使一些http请求转为调用客户端的已有资源。所以,必须关注Expires头的设置。另外,HTTP1.1引入了“Cache-Control”头,可以用“max-age”来设置缓存的时间长度。
 
移除ETag或者对ETag进行专门配置,以免影响缓存调取。因为默认配置的ETag,和原始服务器的属性相关,当多台服务器时,会导致缓存调取失败。(N台服务器,缓存调取成功的概率是1/N)
 
对于用户的着陆页(Landing Page),脚本和样式表究竟应该内联(写到html里)还是应该外置?内联有利于减少http请求数,外置有利于缓存。对这个问题的探讨,产生了所谓“加载后下载(Post-Onload Download)”的方案:内联,但在页面加载完成后通过onload事件,动态下载外部脚本和样式表。
 
充分利用并行下载:
 
使用两个主机名。HTTP1.1建议浏览器从每个主机名并行下载两个元素,使用多个主机名能进行更多的并行下载,但由于带宽和CPU速度,过多的并行下载也会降低性能。Yahoo!的研究表明,使用两个主机名性能最优。
 
将脚本放在底部,以避免对并行下载的影响。因为下载脚本时,并行下载是禁止的。
 
减小元素的大小:
 
精简脚本。用JSMin精简外置脚本,这能移除所有的注释以及不必要的空白字符,使脚本减小20%。(内联的脚本也应该尽量精简)
 
优化CSS。CSS中的注释和空白字符比较少,优化空间在于合并相同的类、移除不使用的类。同时,应避免使用CSS表达式,改用一次性表达式和使用事件处理器。因为CSS表达式会频繁求值,当页面滚动、甚至用户鼠标移动时都会求值。
 
务必使用Gzip对脚本、样式表、html文档进行压缩,这通常能减小60%的数据量。删除注释、缩短URL等虽然也有用,但费事得多且效果微弱。
 
其他:
避免没必要的重定向(例如在URL的结尾必须出现“/”但没有出现时),因为在重定向完毕并且html文档下载完毕之前,没有任何东西展示给用户;对于为了跟踪流量而使用的重定向,建议改用“referer”(仅可监测流向内部的流量),或“beacon+XMLHttpRequest”(可检测所有流量,但方法较复杂)
 
使用CDN(Content Delivery Network),缩小内容和用户的距离。
 
将样式表放在顶部,这样能使内容在浏览器中逐步呈现。尽管整个页面的加载总耗时可能并无变化,但逐步呈现内容,能使用户感觉更快。
 
适当减少主机名,以减少DNS查找。
张生:13751841126
梁生:13826047785
.com