Web性能优化：为何如此关键？如何有效实施？

本文共计802个文字，预计阅读时间需要4分钟。

为什么要提高Web性能？Web性能黄金准则：只有10%〜20%的最终用户响应时间花在下载HTML文档上，其余80%〜90%的时间花在下载页面组件上。Web性能对用户体验及其重要的影响。

为什么要提升web性能？

Web性能黄金准则：只有10%~20%的最终用户响应时间花在了下载html文档上，其余的80%~90%时间花在了下载页面组件上。

　　web性能对于用户体验有及其重要的影响，根据著名的`2-5-8`原则：

• 当用户在2秒以内得到响应，会感觉系统的响应非常快
• 当用户在2-5秒之内得到响应，会感觉系统的响应速度还可以
• 当用户在5-8秒之内得到响应，会感觉系统的响应非常慢，但还可以接受
• 当用户在8秒之后都没有得到响应，会感觉系统糟透了，甚至系统已经挂掉；要么打开竞争对手的网站，要么重新发起第二次请求

　　凡事都需要研究，通过科学的研究我们就可以找到事物的发展规律。这里要感谢雅虎的工程师总结的14条前端优化法则，使得我们可以站在巨人的肩膀上。《高性能网站建设》这本书中的14条优化原则，总结起来主要是以下个方面的优化：

1. 减少HTTP请求
2. 页面内部优化
3. 启用缓存
4. 减少下载量
5. 网络连接上的优化

　　

为什么减少HTTP请求可以提高Web性能？

　　要回答这个问题，我们就要了解当浏览器向服务器发送一个example.com/newuri
　　　Content-Type: text/html

　　浏览器自动重定向请求到Location指定的URL上，重定向的主要问题是降低了用户体验。种最耗费资源、经常发生而很容易被忽视的重定向是URL的最后缺少/，导致自动产生结尾斜线的原因是，浏览器在进行get请求是必须指定一些路径；如果没有路径它就会简单的使用文档根。（主机缺少结尾斜线是不会发生重定向：www.baidu.com）缺少结尾斜线发生重定向是很多web服务器的默认行为。需要在服务器端设置方可消除。以下图片是豆瓣的一个url请求：

　　雅虎的14条优化规则在很长的一段时间里发挥着重要作用，随着技术的发展，单单这十四条原则已经不能够满足前端性能优化。在一些大公司出现了前端工程化这一概念，详细内容可以参考一下这篇文章：前端性能优化工程化进阶

　　参考资料：

web前端性能意思、关注重点、测试方案、

WEB站点性能优化实践（加载速度提升2s）

HTTP协议三次握手过程

高性能WEB开发 - 为什么要减少请求数，如何减少请求数!

我是如何对网站CSS进行架构的

图标字体化浅谈

利用ETag缓存优化请求

透过浏览器看HTTP缓存

Web应用性能优化黄金法则——转

您可以考虑给树发个小额微信红包以资鼓励