1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

关于提高浏览器渲染页面速度的建议

作者:用户 来源:互联网 时间:2016-03-11 19:47:54

css浏览器编码页面样式信息页面编码js和css内联外联渲染速度重新编码TextView预渲染

关于提高浏览器渲染页面速度的建议 - 摘要: 本文讲的是关于提高浏览器渲染页面速度的建议, 怎样尽可能的缩短浏览器上页面渲染的时间,文章从以下几方面着手: 写出高效的css代码 避免使用css表达式 把css文件放在页面顶部 指定页面图片的尺寸

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

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



以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索css , 浏览器 , 编码 , 页面 , 样式 , 信息 , 页面编码 , js和css内联外联 , 渲染速度 , 重新编码 TextView预渲染 浏览器渲染页面的过程、浏览器渲染页面原理、浏览器如何渲染页面、浏览器页面渲染过程、浏览器渲染页面,以便于您获取更多的相关知识。

android Html内容如何预先加载到缓存,提高webview刷新速度呢

...,提高webview的显示速度呢? 解决方案 浏览器的作用就是将得到的数据显示出来,跟你得到文本流再在textview中显示一样,你说的渲染太耗时除非是你过去网络资源时没有开辟子线程,或者要显示的图形或者js太...

JavaScript关于提高网站性能的几点建议(一)_javascript技巧

...放静态文件,另外也提供下载、安全服务等功能。 3 设置浏览器缓存(避免重复HTTP请求) 使用Expire/Cache-control   浏览器通过使用缓存可以避免每次都进行重复的请求,HTTP 1.0和HTTP1.1分别有不同的缓存实现方式,Expires(1.0)和Cach...

提升Web性能的8个技巧总结

...带来巨大的性能损失,这些性能损失并不能通过更快速的浏览器、网络和小工具得到缓解。而且随着时间的推移,这样影响还将持续恶化。响应式设计建立在样式表和JavaScript之上。然而,低效的CSS和JS所带来的性能问题远远大于...

前端性能监控系统

... Page Speed 是谷歌开发的分析和优化网页的工具,可以作为浏览器插件使用。工具基于一系列优化规则对网站进行检测,对于未通过的规则会给出详细的建议。与此类似的工具还有 Yslow 等,推荐使用gtmetrix网站同时查看多个分析工...

JavaScript关于提高网站性能的几点建议(一)

...放静态文件,另外也提供下载、安全服务等功能。 3 设置浏览器缓存(避免重复HTTP请求) 使用Expire/Cache-control   浏览器通过使用缓存可以避免每次都进行重复的请求,HTTP 1.0和HTTP1.1分别有不同的缓存实现方式,Expires(1.0)和Cac...

前三篇
后三篇