提高浏览器渲染页面速度

怎样尽可能的缩短浏览器上页面渲染的时间，可以从以下几方面着手：

写出高效的css代码
避免使用css表达式
把css文件放在页面顶部
指定页面图片的尺寸
页面头部标明文档编码

一，写出高效的css代码

首先弄清浏览器解析html代码的过程：构建一个dom树，页面要显示的各元素都会创建到这个dom树当中。每当一个新元素加入到这个dom树当中，浏览器便会通过css引擎查遍css样式表，找到符合该元素的样式规则应用到这个元素上。css引擎查找样式表，对每条规则都按从右到左的顺序去匹配。

了解过程后，我们可以看出可以从两方面优化我们的css代码：1，定义的css样式规则条数越少越好，所以赶紧删除css文件中不必要的样式定义；2，优化每条规则的选择符书写方式，尽量让css引擎一看就知道这个规则是否需要应用到当前这个元素上，让引擎少走不必要的弯路。

如以下几种效率不高的css书写方式：

body * {...}
hide-scrollbars * {...}

b, 用标签做关键选择符

ul li a {...}
#footer h3 {...}
* html #atticPromo ul li a {...}

c, 画蛇添足的写法

ul#top_blue_nav {...}
form#UserLogin {...}

d, 给非连接标签添加 :hover 伪类，这会对用了strict doctype的页面在IE7和IE8下变的很慢。

h3:hover {...}
.foo:hover {...}
#foo:hover {...}
div.faa :hover {...}

优化建议：

a, 避免使用通配符；

b, 让css引擎快速辨别该规则是否适用于当前元素：多用id或class选择符，少用标签选择符；

c, 不要画蛇添足把id和class或标签和class等连着写；

d, 尽量避免使用后代选择符，去除不必要的祖先元素，可以考虑使用class选择符来替换后代选择符；

/*给无序和有序的li定义不同颜色，你可能会这样写：*/
ul li {color: blue;}
ol li {color: red;}
/*给li添加class，这样定义效率会更高：*/
.unordered-list-item {color: blue;}
.ordered-list-item {color: red;}

e, 避免给非连接标签添加 :hover 伪类。

二，避免使用css表达式

css表达式仅在ie浏览器下才起作用，微软已在ie8后不推荐使用，因为它会严重影响页面性能：任何时候，不管任何一个事件被触发，例如窗口的 resize 事件，鼠标的移动等等，css表达式都会重新计算一遍。

三，把css文件放在页面顶部

把外联或内联样式表放在body部分会影响页面渲染的速度，因为浏览器只有在所有样式表下载完成后才会继续下载页面其他内容。另外，内联样式表（放在<style>内的样式）有可能会引起页面重新渲染或显示隐藏页面中的某些元素，建议不要使用内联样式表。

四，指定页面图片的尺寸

指定页面图片尺寸，要符合图片的真实尺寸（不要通过指定尺寸来缩放图片），可以避免尺寸改变导致的页面结构效果的变化，所以对加快页面渲染速度有益。

五，页面头部标明文档编码

HTML文档是以包含文档编码信息的数据流方式在网络间传输。页面的编码信息一般会在HTTP响应的头部信息或在文档内的HTML标记中指明。客户端浏览器只有在确定了页面编码后才能正确的渲染页面，所以在绘制页面或执行任何的javascript代码前，大部分的浏览器（ie6、ie7、ie8除外）都会缓冲一定字节的数据来从中查找编码信息，不同的浏览器当中预缓冲的字节数是不一样的。如果浏览器在接收到了设定的预缓冲数据量后还没有找到页面的编码信息，便会根据各自指定的默认编码开始渲染页面，如果这时再获取到页面编码信息，而又跟现在所用编码不一致，那整个页面就得重新渲染，某些情况下甚至需要重新获取数据。所以，对于大小超过1KB的页面（根据在各浏览器的测试情况，预缓冲数据量最多的也就1KB）应当尽早标明编码信息。

优化建议：

a, 尽量在HTTP头部信息中标明页面编码（这个需要在服务器端设置）。像Firefox浏览器，如果在HTTP头部信息就获取到了编码信息，便会预缓冲更少的数据从而减少不必要的数据缓冲时间；

b, 在HTML的 <head> 部分标明编码信息；

c, 要习惯给文档指定编码；

d, 给页面指定的编码要符合页面实际编码；如果你在HTTP头部信息和HTML标记中同时指定了编码，需确保编码信息一致。

原文链接：http://www.wufangbo.com/browser-page-rendering-speed/

提高浏览器渲染页面速度相关推荐

关于提高浏览器渲染页面速度的建议
怎样尽可能的缩短浏览器上页面渲染的时间,文章从以下几方面着手: 写出高效的css代码避免使用css表达式把css文件放在页面顶部指定页面图片的尺寸页面头部标明文档编码一,写出高效的css代码 ...
多个html页面拼接成一个页面_浏览器渲染页面机制以及如何减少DOM操作
为了能更好.更快的为用户呈现出他们想要的页面,基于浏览器的渲染机制,我们在开发中应该了解浏览器,了解浏览器的运行机制,以及在开发中我们能更好的提高性能,虽然现在市面上流行的VUE和react,但也应该 ...
div置于页面底部_浏览器渲染页面的原理及流程
浏览器渲染页面的原理及流程浏览器将域名通过网络通信从服务器拿到html文件后,如何渲染页面呢? 1.根据html文件构建DOM树和CSSOM树.构建DOM树期间,如果遇到JS,阻塞DOM树及CSSO ...
浏览器渲染页面的原理及流程---------重绘与重排（回流）--优化
浏览器渲染页面的原理及流程浏览器将域名通过网络通信从服务器拿到html文件后,如何渲染页面呢? 1.根据html文件构建DOM树和CSSOM树.构建DOM树期间,如果遇到JS,阻塞DOM树及CSSO ...
解决Google浏览器打开页面速度太慢问题
看别人google打开的网页速度飞快,而自己的却慢的着急,所以在网上找了半天资料+自己摸索了一下午,终于解决了Google浏览器打开页面速度太慢的问题,下面是我自己遇到的一些问题,希望对大家有所帮助. ...
浏览器渲染页面全流程
上文对浏览器渲染页面的过程只是一笔带过,本文将展开讲述一下浏览器拿到html/css等文件资源后是如何对页面进行渲染的,总体可以分为以下几步: 解析HTML,构建DOM树. 解析CSS,生成CSSOM ...
如何用php直接渲染页面,总结浏览器渲染页面的方法
转载自web fundamental 构建对象模型浏览器渲染页面前需要先构建 DOM 和 CSSOM 树.因此,我们需要确保尽快将 HTML 和 CSS 都提供给浏览器.字节 → 字符 → 标记 → ...
如何提高页面加载速度 || 前端的性能优化 || 浏览器渲染页面的过程是什么
1.降低请求量 ① 合并资源,减少http请求数量. ② lazyLoad,如图片懒加载.分批加载,每次只加载一部分. ③ 使用字体图标或CSS绘制,来代替部分图片. 2.加快请求速度 ...
浏览器渲染页面的原理、回流、重绘
目录一.浏览器的渲染过程 1.面试题 (1).DNS 域名解析 (2).建立 TCP 连接 (3).发送 HTTP 请求 (4).处理请求返回的 HTTP 响应 (5).页面渲染 (6).关闭 TC ...

提高浏览器渲染页面速度

提高浏览器渲染页面速度相关推荐

最新文章

热门文章