页面性能优化

页面性能优化是前端从未停止探讨的问题,雅虎将 web 页面的优化分为 7 部分,总结了 35 条军规。这里,总结页面从输入回车到内容展现这一过程中的优化方法,主要目的是为了缩短页面的渲染时间,使页面内容尽可能快的展示出来。

初次加载页面,浏览器请求资源到接收到该资源之间,需要经历一段漫长的网络传输过程。

DNS 解析

浏览器请求一个网络资源,如 html、css、js、img等,如 baidu.com,这是域名,方便人们记忆,但机器只认 IP 地址。为了能够找到正确的服务器,就需要 DNS 解析,找到对应的 IP。当浏览器遇到一个新的域名,就需要进行一次 DNS 解析。

页面中的外部资源域名越多,需要的 DNS 解析总时间就越长。因此,外部资源的域名个数应尽可能的少。

根据 IP 地址请求资源

当 DNS 解析完,获取到对应的 IP 地址后,浏览器会向该服务器发送请求,建立 TCP 连接。不同浏览器对于同一域名的并发连接数量均有限制,2~8个。如果外部资源均部署在同一服务器上,当数量超过浏览器的限制时,就会造成阻塞,后面的资源需要等待前面的资源接受完后才能发送请求。也就是说,外部资源应该尽可能多的部署到不同的服务器上,但这与上文的 DNS 解析优化矛盾了。因此,需要做一个衡量,外部资源应该部署到多少个不同的服务器上。

TCP 连接优化

TCP 每次连接都需要经过三次握手才能建立起来,这是一个耗时的操作。

可以通过合并静态资源,如合并 css、js,使用雪碧图的方式减少外部资源请求次数,从而减少 TCP 连接次数。

(雅虎军规:避免 img 的 src 为空)src为空,浏览器还是会向服务器发送请求的。

资源传输

除去网络因素,资源传输所需的时长取决于该资源的大小,以及接收方与发送方的物理距离。

(雅虎军规:压缩 css、js)减少文件体积。

(雅虎军规:使用 CDN)将静态文件部署到 CND 上,减少接收方与实际发送方的距离。

CRP

浏览器从接收到 html 文件,到页面内容绘制出来之间同样发生了很多事情。浏览器初次绘制页面的过程称为“关键渲染路径”。

对 CRP 不熟悉的可以参看理解关键渲染路径这篇译文。

CRP 主要有 6 部分:

1、构建 DOM 树

2、构建 CSSOM 树

3、运行 js

4、创建 render 树

5、布局

6、绘制

构建 DOM 树

当浏览器接收到 html 文件后,开始解析文件,构建 DOM 树。(雅虎军规:减少 DOM 元素的数量)DOM 元素数量越少,html 文件体积就越小,构建 DOM 树的速度也就越快。由于 DOM 树的构建过程是一个深度遍历的过程,DOM 树结构层次不要过深能够加快遍历,其次,也是为了后续 js 能够更快的访问 DOM 。

构建 CSSOM 树

(雅虎军规:将样式表放在顶部)在解析 html 时,遇到外部资源浏览器会立即发送请求。尽可能快的加载样式表,构建 CSSOM 树,与 DOM 树一起创建 render 树,让页面能够逐步渲染,尽快的现实出内容。

运行js

(雅虎军规:将 js 放在底部)因为 js 脚本会阻塞 html 的解析,不管是内联还是外联,一般会将 js 放置在底部。

布局、绘制

这里会涉及到页面的回流(reflow)和重绘(repaint)。页面如果有 <img>,为它设置宽高,而不是等待 src 的图片加载完后将 img 撑开,这样能够避免页面的回流。

 

时间: 2024-10-10 16:47:27

页面性能优化的相关文章

从四个方面帮你做好移动页面性能优化

从四个方面帮你做好移动页面性能优化 http://www.uisdc.com/mobile-website-performance-optimization

雅虎网站页面性能优化的34条黄金守则(转)

雅虎团队经验:网站页面性能优化的34条黄金守则1.尽量减少HTTP请求次数      终端用户响应的时间中,有80%用于下载各项内容.这部分时间包括下载页面中的图像.样式表.脚本.Flash等.通过减少页面中的元素可以减少HTTP请求的次数.这是提高网页速度的关键步骤.      减少页面组件的方法其实就是简化页面设计.那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢?这里有几条减少HTTP请求次数同时又可能保持页面内容丰富的技术. 合并文件是通过把所有的脚本放到一个文件中

Web页面性能优化(YSlow)

YSlow(解析为Why Slow)是雅虎基于网站优化规则推出的工具,帮助你分析并优化网站性能.旧版Yslow 有13条规则,新版Yslow有23项规则,YSlow会根据这些规则分析你的网站,并给出评级. YSlow评分规则:从A级到F级,A级最高,Web页面通用性能综合评分在C级以上为测试通过. 根据YSlow检查规则进行优化,Web页面性能优化项: 将样式表放在顶部,将脚本放在底部: 使用浏览器缓存: 使目标网页重定向可缓存: 内嵌小型 CSS: 内嵌小型 JavaScript: 压缩 CS

雅虎网站页面性能优化的34条黄金守则

雅虎团队经验:网站页面性能优化的34条黄金守则 1.尽量减少HTTP请求次数      终端用户响应的时间中,有80%用于下载各项内容.这部分时间包括下载页面中的图像.样式表.脚本.Flash等.通过减少页面中的元素可以减少HTTP请求的次数.这是提高网页速度的关键步骤.      减少页面组件的方法其实就是简化页面设计.那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢?这里有几条减少HTTP请求次数同时又可能保持页面内容丰富的技术. 合并文件是通过把所有的脚本放到一个文件

页面性能优化总结

页面性能优化总结         由于本人前几天一直在解决页面性能.加载慢等问题.解决后,对于该方面知识有一定的认识与理解,现将经验码出来,与大家分享:由于单纯讲解知识点会造成知识点认识混乱,故将知识分模块讲解:由于项目中主要使用chrome浏览器,故仅讲解以webkit为内核的浏览器机制1.浏览器加载时间:当浏览器对页面进行加载并且解析时,会产生如下几个主要时间: 1).queueing 时间 该时间为等候时间,也可以叫排队时间.即文件在加载之前的排队等候时间.该排队等候时间会根据优先级进行判

网站页面性能优化的34条黄金守则

雅虎团队经验:网站页面性能优化的34条黄金守则1.尽量减少HTTP请求次数      终端用户响应的时间中,有80%用于下载各项内容.这部分时间包括下载页面中的图像.样式表.脚本.Flash等.通过减少页面中的元素可以减少HTTP请求的次数.这是提高网页速度的关键步骤.      减少页面组件的方法其实就是简化页面设计.那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢?这里有几条减少HTTP请求次数同时又可能保持页面内容丰富的技术. 合并文件是通过把所有的脚本放到一个文件中

浏览器的加载与页面性能优化

浏览器的加载与页面性能优化 Javascript 异步加载详解 HTML5 <script>元素async,defer异步加载 defer/async都是异步加载js,和HTML并行加载不阻塞HTML的加载. 但是defer/async区别在于何时执行. http://blog.csdn.net/renfufei/article/category/1547183 javascript 同步加载与异步加载  

雅虎网站页面性能优化的34条黄金守则(转载)

老是有人问我 关于优化问题我就每次和他们说雅虎性能优化(有些人不会百度 汗..于是我转载过来啊 不是自己写的 不会因为版权被人家打吧!) 雅虎团队经验:网站页面性能优化的34条黄金守则 1.尽量减少HTTP请求次数      终端用户响应的时间中,有80%用于下载各项内容.这部分时间包括下载页面中的图像.样式表.脚本.Flash等.通过减少页面中的元素可以减少HTTP请求的次数.这是提高网页速度的关键步骤.      减少页面组件的方法其实就是简化页面设计.那么有没有一种方法既能保持页面内容的丰

移动前端系列——移动页面性能优化.

随着移动互联网的发展,我们越发要关注移动页面的性能优化,今天跟大家谈谈这方面的事情. 首先,为什么要最移动页面进行优化? 纵观目前移动网络的现状, 移动页面布局越来越复杂,效果越来越炫,直接导致了文件越来越大,下载和运行速度越来越低,而速度低会造成不良影响,据统计: 71%的用户期望移动页面跟pc页面一样快,74%的用户能容忍的响应时间为5秒,所以我们必须保证移动端页面有足够的速度. 移动页面的速度跟三个因素有关,分别是:移动网络带宽速度,设备性能(CPU,GPU,浏览器),页面本身. 目前主流