提升浏览器渲染页面速度

时间 2019-11-09

原文原文链接

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

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

一，写出高效的css代码css

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

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

如如下几种效率不高的css书写方式：浏览器

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

b, 用标签作关键选择符服务器

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

c, 多此一举的写法markdown

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

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

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

优化建议：dom

a, 避免使用通配符；ide

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代码前，大部分的浏览器（ie六、ie七、ie8除外）都会缓冲必定字节的数据来从中查找编码信息，不一样的浏览器当中预缓冲的字节数是不同的。若是浏览器在接收到了设定的预缓冲数据量后尚未找到页面的编码信息，便会根据各自指定的默认编码开始渲染页面，若是这时再获取到页面编码信息，而又跟如今所用编码不一致，那整个页面就得从新渲染，某些状况下甚至须要从新获取数据。因此，对于大小超过1KB的页面（根据在各浏览器的测试状况，预缓冲数据量最多的也就1KB）应当尽早标明编码信息。

优化建议：

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

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

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

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

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