提高页面渲染速度的建议以及方案

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

写出高效的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标记中同时指定了编码，需确保编码信息一致。

转载于:https://www.cnblogs.com/BlogofOldK/p/5285862.html

提高页面渲染速度的建议以及方案相关推荐

仅使用CSS提高页面渲染速度
用户在访问一个Web网站(页面)或应用时,总是希望它的加载速度快,功能流畅.如果过于慢,用户就很有可能失去耐心而离开你的Web网站或应用.作为开发人员,给自己应用提供更快的访问速度,提供很好的用户体验 ...
提高Web页面渲染速度的7个技巧
用户在访问一个Web网站(页面)或应用时,总是希望它的加载速度快,功能流畅.如果过于慢,用户就很有可能失去耐心而离开你的Web网站或应用.作为开发人员,给自己应用提供更快的访问速度,提供很好的用户体验 ...
利用curl并发来提高页面访问速度
在我们平时的程序中难免出现同时访问几个接口的情况,平时我们用curl进行访问的时候,一般都是单个.顺序访问,假如有3个接口,每个接口耗时500毫秒那么我们三个接口就要花费1500毫秒了,这个问题太头疼 ...
【转】提高VR渲染速度的最好方法（经典转载）
[转]提高VR渲染速度的最好方法(经典转载) VR的基本渲染方法掌握起来并不难,但是最迫切需要解决的问题是VR的出图速度问题.动则需要数小时的渲染时间真的是很难以接受,我们从三个影响速度的参数结合网上 ...
提高页面显示速度的秘技
在安排Web页面的布局时,最常用的方法之一是用HTML表格界定页面的结构.例如,假设Web页面由顶端的导航条和它下面的两栏(列)构成--左边的列是一个导航条,右边的列是实际安置内容的区域.对于这样一个 ...
一个可能让页面渲染速度提升数倍的CSS属性
浏览器在接收到服务端返回的 HTML 之后,需要把这段数据渲染成用户看到的页面,在开始渲染第一个元素之前可能还需要经过很多步骤.这个过程会适用于整个页面,包括当前不可见的内容. 所以在首屏渲染时,是有 ...
一个可能让你的页面渲染速度提升数倍的CSS属性
本文来自:Code秘密花园浏览器在接收到服务端返回的 HTML 之后,需要把这段数据渲染成用户看到的页面,在开始渲染第一个元素之前可能还需要经过很多步骤.这个过程会适用于整个页面,包括当前不可见的内 ...
提高页面载入速度简单易行的四个办法。
1.去掉页面中不用的JS.CSS引用. 2.降低页面连接数,即降低请求server的次数. 3.配置GZIP.对页面进行压缩,加快页面从server到浏览器的传输速度. 4.检查页面查询SQL是否使用 ...
js解决EasyUI页面渲染速度慢问题(Mask遮罩)
1 /** 2 * 页面加载等待页面 3 * 4 * @author gxjiang 5 * @date 2010/7/24 6 * 7 */ 8 var height = window.screen ...
关于提高浏览器渲染页面速度的建议
怎样尽可能的缩短浏览器上页面渲染的时间,文章从以下几方面着手: 写出高效的css代码避免使用css表达式把css文件放在页面顶部指定页面图片的尺寸页面头部标明文档编码一,写出高效的css代码 ...

提高页面渲染速度的建议以及方案

提高页面渲染速度的建议以及方案相关推荐

最新文章

热门文章