前端页面性能基础知识

一、初识前端性能

不管网站设计的多牛逼，后端多么屌，这些对于用户来说都是无感知的，用户只关心页面的展现速度，所以需要我们抽出一些精力放到前端

首先，关注前端的性能对整体对提升有很大帮助，如果可以将后端对响应时间缩短一般，整体的响应时间只能减少5-10%，如果关注前端性能，则整体可减少40-45%

其次，对前端的改造比起后端来说工作量要小的多，带来的性价比却很实在

二、性能黄金法则

只有10-20%的最终用户响应时间花在下载HTML文件上，其余80-90%用户是花在下载页面的组件上

对于web应用前端性能的研究，并不是为了准确的得到一个响应时间数据，实际上，一部分取决于web服务器和应用服务器（建立链接、下载资源文件），另一部分取决于浏览器的实现机制、js/css文件的执行，与服务端的负载和压力无关
前端性能探讨的目的不是为了得到这部分响应时间的准确数据，而是为了推动更好的web应用的前端性能，减少总响应时间。

三、HTTP协议结构

HTTP：超文本传输协议，是一种请求/响应式的协议，一个客户机与服务器建立连接后，发送一个请求给服务器；服务器接到请求后，给予响应的响应信息
HTTPS：安全增强版的HTTP，是HTTP协议与安全套接口层（SSL）的结合，使HTTP协议数据在传输过程中更加安全。

状态码.png

请求过程分析.jpg

协议层次.png

更多内容可以了解TCP三次握手四次放手

四、常见浏览器引擎

不同浏览器的工作方式不完全一样，大体上浏览器的核心就是浏览器引擎（Brower Engine）
目前市场占有率最高的几种浏览器几乎都使用了不同的引擎，如：
IE：Trident
FireFox：Gecko、Safari
Chrome：Webkit
360：双核模式，兼容模式是Trident，极速模式是Webkit

五、常见工具

1、Firebug：Firefox浏览器的一个插件，可以调试所有网站语言，比如html、css，进行网站整体分析
2、yslow：依赖Firebug的插件，
安装方法参考：https://www.cnblogs.com/wajika/p/6278825.html
可以对网站页面进行分析，并告诉我们为了提高网站性能，如何基于某些规则进行优化，为每个规则都提供整体报告，如果页面可以进行优化，则会列出具体的修改意见
（PS：如果运行失败，有可能是浏览器版本太高了）

image.png

3、page speed：Chrome的插件，主要用户分析检测页面的加载速度
4、在线分析网址
http://www.alibench.com
http://gtmetrix.com