2018年04月6日网站服务器迁移完成……

关于网站性能优化的十四个准则

web 苏 demo 1312℃ 0评论

规则一:减少HTTP请求。这本书的规则顺序是按照其重要性来排名的,减少HTTP请求作为第一个规则,足见其重要性。根据黄金法则,减少组件数量从而减少HTTP请求是最有效的性能优化方式,其中有几项技术值得提一下:

  1. CSS Sprites。应该前端人都比较熟悉了,把图片整合到一个大图里,利用background-position 来定位。

  2. data:URL。值得一说把图片变为内联的,减少了图片请求,webpack里图片小于8kb就会转为base64的data:URL。

  3. 合并脚本和CSS。

规则二:使用CDN。这个规则不用多说,分发内容使之更靠近终端用户,减少了请求时间。

规则三:添加Expires头。善用缓存,给长久不变的内容组件设置有效期较久的Expires头。

规则四:压缩组件。利用gzip等内容编码对文档或组件进行压缩,通常能将相应数据量减少 70% 左右。

规则五:将样式表放在顶部。页面在打开工程中逐步呈现,用户会觉得页面快一些,也让用户在等待过程中有一个良好的反馈。把CSS放在底部的话有可能出现白屏现象。

规则六:将脚本放在底部。页面下载脚本时会阻止其他内容下载与呈现,以防止浏览器的重绘重排。所以把脚本放在页面的底部不会阻止页面内容的呈现,而且页面一些可视化组件可以尽早下载而不被阻塞。

规则七:避免使用CSS表达式。CSS表达式会进行频繁的求值,导致了性能低下。

规则八:使用外部JavaScript和CSS。纯粹而言,内联更快一些,因为满足了规则一的减少HTTP请求,但是这个问题上,一定要考虑 缓存 带来的性能优化,外部文件很有可能被缓存下来,从而提升了性能。

规则九:减少DNS查找。善用DNS缓存,比如持久连接。

规则十:精简JavaScript。移除不必要的字符空格,我们常见的.min.js就是如此。

规则十一:避免重定向。3xx的响应状态码代表着一股重定向的响应。其中URL结尾缺少斜线造成的重定向需要特别注意,不要因为这一点失误损伤性能。

规则十二:删除重复脚本。

规则十三:配置ETag。说起这个不得不说条件请求If-Modified-Since和If-None-Match,都是用来进行缓存再验证。ETag的问题是服务器构造ETag时,尽管两个文件完全一样,但如果处于不同的服务器的话还是会有不同的ETag,增加了HTTP进行请求下载的次数,这对于后台是服务器集群的网站性能损伤很大。

规则十四:使Ajax可缓存。虽然Ajax是异步的,但也不能让等待响应的时间过长。优化准则的话参见上面的性能准则,其中善用缓存依然是我们重点关注的。

打赏

转载请注明:苏demo的别样人生 » 关于网站性能优化的十四个准则

   如果本篇文章对您有帮助,欢迎向博主进行赞助,赞助时请写上您的用户名。
支付宝直接捐助帐号oracle_lee@qq.com 感谢支持!
喜欢 (0)or分享 (0)
发表我的评论
取消评论
表情