一、初识前端性能
不管网站设计的多牛逼,后端多么屌,这些对于用户来说都是无感知的,用户只关心页面的展现速度,所以需要我们抽出一些精力放到前端
首先,关注前端的性能对整体对提升有很大帮助,如果可以将后端对响应时间缩短一般,整体的响应时间只能减少5-10%,如果关注前端性能,则整体可减少40-45%
其次,对前端的改造比起后端来说工作量要小的多,带来的性价比却很实在
二、性能黄金法则
只有10-20%的最终用户响应时间花在下载HTML文件上,其余80-90%用户是花在下载页面的组件上
对于web应用前端性能的研究,并不是为了准确的得到一个响应时间数据,实际上,一部分取决于web服务器和应用服务器(建立链接、下载资源文件),另一部分取决于浏览器的实现机制、js/css文件的执行,与服务端的负载和压力无关
前端性能探讨的目的不是为了得到这部分响应时间的准确数据,而是为了推动更好的web应用的前端性能,减少总响应时间。
三、HTTP协议结构
HTTP:超文本传输协议,是一种请求/响应式的协议,一个客户机与服务器建立连接后,发送一个请求给服务器;服务器接到请求后,给予响应的响应信息
HTTPS:安全增强版的HTTP,是HTTP协议与安全套接口层(SSL)的结合,使HTTP协议数据在传输过程中更加安全。
更多内容可以了解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:如果运行失败,有可能是浏览器版本太高了)
3、page speed:Chrome的插件,主要用户分析检测页面的加载速度
4、在线分析网址
http://www.alibench.com
http://gtmetrix.com