关于前端性能优化

咱们先来看一张图来肯定一下页面性能是由哪些部分组成的

　　

　　域名解析：搜索DNS服务器并解析域名IP所花费的时间，为5.864ms

　　创建连接：客户端经过ip地址与web服务器创建连接的时间，为48.275ms

　　发送请求：客户端向web服务器端发送请求所花费的时间，为0.620ms

　　等待响应：服务器端从接受http请求到开始响应客户端内容所花费的时间，为273.078ms,这段时间包括数据查询，页面转换为html格式等

　　接收数据：服务器端的响应内容所有发送到客服端的时间，为4.55ms

初步诊断网站性能瓶颈：

　　1.首先看一下那个请求花费时间最长，看看这个请求的时间线信息，来肯定是服务器端响应慢了仍是网络问题

　　2.若是每一个请求花费的时间都没有明显高于其余，那就检查一下是否是这个页面发送的http请求次数过多了。由于浏览器对单个域名的并发链接数有限制的，须要处理完一批请求以后，在发送另一批请求。假如页面有100个请求，每一个请求花费时间为1s,浏览器最大并发数显示为10，那么处理完全部请求花费时间为100/10*1s=10s的时间。

关于最大并发数，http1.1的标准是2，而目前主流的浏览器IE、FireFox、Chrome为了提升速度，分别是10,6,6（根据具体版本可能会有变更）

前端性能策略：

　　 一项专门研究网页性能的工程师发现，一个页面从请求到加载完成，80%的时间都花在了前端上。事实也是如此，大多数时间都花费在获取前端静态文件（html,css,js）上，因此优化网站应该从前端性能着手

高性能的Html:

　　1.避免空链接

　　　　什么是空链接？空连接指的就是img,a,script,link,iframe等的src或者href,如（href=""）,通常浏览器会把它解析为blank,可是IE仍是会发送请求的。

　　2.避免标签的深层次嵌套

　　　　层次越多的节点，在初始化构建时候所占用内存越大

　　3.减少html文档大小

　　　　删除对文本无影响的换行，空格或者注释，因此大多数网站上线前都会压缩文件，就是为了减少文件大小

　　4.避免脚本阻塞加载

　　　　浏览器在解析常规script标签时候，会先等待js下载完毕，在执行后边的html代码，因此最好的建议是把script放在页面的底部

高性能的Css:

　　1.使用css压缩

　　　　css压缩其实和html相似，就是把css中的多余的空格，换行，注释等删掉，达到缩减字符的目的，以下图所示：

　　　　

　　2.抽离，拆分css,不加载全部css

　　　　抽离css就是把一些通用的css放到一个公用的文件里，而不是写到各个页面。这样其余页面用到时候就能够医用缓存了，减小了没必要要的重复下载。

　　　　应用抽离原则，在不少时候咱们把页面通用的CSS写到了一个文件，这样加载一次后就能够利用缓存，但这样作并不适合全部场景，之前我写CSS把一些前端插件用的CSS全写到了一个页面，可是有时候页面只会用一个Dialog、有的页面只用到了一个TreeView，但却把十多个插件的CSS都下载到了页面，这就是问题了，因此虽然把CSS写道一个文件能够减小http请求，但像刚才的这种状况是不该该这样作的，对一些全部页面都会用到的咱们能够这样作，因此咱们在抽离和拆分的时候可要想好了

　　3.使用css sprites

　　　　使用sprites，能够减小Http的请求次数

　　4.css放在head中

　　　　相信作web的同窗都知道这条建议，但为何CSS放在页面顶部有利于网页优化呢？浏览器渲染页面大概是这样的，当浏览器从上到下一边下载html生成DOMtree一边根据浏览器默认及现有CSS生成render tree来渲染页面，当遇到新的CSS的时候下载并结合现有CSS从新生成render tree，刚才的渲染工做就白费了，若是咱们把全部CSS都放到页面顶部，这样就没有从新渲染的过程了

　　5.不要用标签名限制class规则

小结：

　　Web性能的优化，主要还得根据工具分析来查看，对症下药，应该主要影响方面进行优化。