关于前端性能优化
我们先来看一张图来确定一下页面性能是由哪些部分组成的
域名解析:搜索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请求,但像刚才的这种情况是不应该这样做的,对一些所有页面都会用到的我们可以这样做,所以我们在抽离和拆分的时候可要想好了
使用sprites,可以减少Http的请求次数
4.css放在head中
相信做web的同学都知道这条建议,但为什么CSS放在页面顶部有利于网页优化呢?浏览器渲染页面大概是这样的,当浏览器从上到下一边下载html生成DOMtree一边根据浏览器默认及现有CSS生成render tree来渲染页面,当遇到新的CSS的时候下载并结合现有CSS重新生成render tree,刚才的渲染工作就白费了,如果我们把所有CSS都放到页面顶部,这样就没有重新渲染的过程了
5.不要用标签名限制class规则
小结:
Web性能的优化,主要还得根据工具分析来查看,对症下药,应该主要影响方面进行优化。