网站优化中如何去优化浏览器的渲染

原创 小猫SEO优化  2018-05-27 23:03  阅读 230 次 评论 0 条

如何去优化浏览器的渲染

一:html和CSS中图像尺寸的指定

图像尺寸的制定:网页的设计中指定所有图像的宽度和高度,这样可以通过消除不必要的回流和重绘是页面更快的去渲染。

当浏览器进行页面布局时,需要能够可替换的元素,如图像。浏览器开始呈现渲染页面之前下载图像,如果没有尺寸指定在包含的文档中,或者如果指定的图片不匹配那些实际图像,浏览器将要求回流和重画一次下载图像。

浏览器渲染

浏览器渲染

为了防止回流,请在 HTML 中的所有图像<img>标记,或在 CSS 中指定的宽度和高度。

二:指定字符集

浏览器使用的字符编码​​信息,呈现在屏幕上的字符转换成字节流。因为浏览器不能正确渲染页面,不知道如何构建页面的字符,大多数浏览器缓冲一定数量的字节,然后再执行任何JavaScript或渲染画页,Internet Explorer版本6,7,8却是个例外。

然而,一旦有缓冲所需的字节数,并开始渲染页面,如果他们遇到了不符合他们的默认字符集规范,他们需要重新解析的输入和重绘页面。有时候可能有rerequest资源,如果不匹配会影响外部资源的URL。

三:CSS 放在文档头

将内嵌样式和 文档主体<LINK>元素放在head头部,文档的head提高渲染性能。

HTML的body内指定外部的样式表和内联样式 ​​,浏览器的渲染性能产生负面影响。因此,把外部的样式表,以及内联样式 ​​放在在页面头部的。通过确保样式表首先下载并分析,你可以让浏览器逐步呈现页面。

 

四:避免使用CSS表达式

CSS表达式降低渲染性能 用其他可替代取代IE浏览器用户的浏览器的渲染。

CSS表达式只适用于Internet Explorer 5到7,支持CSS表达式。在Internet Explorer 8中的CSS表达式已被弃用,不支持其他浏览器。

从IE5开始css 表达式成为了可以在响应事件中更改文档属性的一种手段。他们经常被用于提供一个动态的风格和更炫的效果。而且还能使CSS更加紧凑方便实现一个功能和效果。

我们用到过一个比如 每一个小时切换一个背景的CSS表达式。

background-color: expression( (new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00” );

expression中使用了JavaScript表达式。CSS属性根据JavaScript表达式的计算结果来设置。expression方法在其它浏览器中不起作用,因此在跨浏览器的设计中单独针对Internet Explorer设置时会比较有用。不仅仅是在页面显示和缩放时,就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。

一个减少CSS表达式计算次数的方法就是使用一次性的表达式,它在第一次运行时将结果赋给指定的样式属性,并用这个属性来代替CSS表达式。如果必须使用CSS表达式,一定要记住它们要计算成千上万次并且可能会对你页面的性能产生影响。

五:使用有效的CSS选择器

首先:删除未使用的CSS是提高渲染性能的第一个重要步骤。页面渲染计算每个CSS规则由右至左,从最右边的选择器(称为“钥匙”),并通过每一个选择,直到找到一个匹配或丢弃CSS规则。

以下的类别CSS规则被认为是低下的:

body * {...}
.hide-scrollbars * {...}
ul li a {...}
#footer h3 {...}
* html #atticPromo ul li a {...]

比较适合的CSS规则:

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

ID选择器是唯一定义的。不需要像类选择器去向上遍历DOM树去评估每个元素,然后一个一个去匹配到达根元素。html标签写的不要太深。否则也会影响性能。

本文地址:http://www.xmaoseo.com/site-optimizing/21.html
关注我们:请关注一下我们的微信公众号:扫描二维码SEO自学教程网_网站优化推广技术培训的公众号,公众号:TopHtml
版权声明:本文为原创文章,版权归 小猫SEO优化 所有,欢迎分享本文,转载请保留出处!

发表评论


表情