网页前端优化:优化浏览器页面渲染
|
2019-06-28 15:28 |
0
如何尽可能缩短页面在浏览器上的渲染时间，文章从以下几个方面着手:
一，写成高效率的css样式编码
首先，找出浏览器解析html代码的过程:构建一个dom树，页面上显示的所有元素都将被创建到该树中。每当一个新的元素被添加到dom树中时，浏览器将通过css引擎搜索css样式表，以找到与该元素匹配的样式规则，并将它们应用于该元素。css引擎寻找样式表，并从右到左匹配每个规则。
在理解了这个过程之后，我们可以看到我们可以从两个方面优化css代码:1。定义的css样式规则越少越好，所以从css文件中快速删除不必要的样式定义；2.为每个规则优化选择器的编写方法，并尝试让css引擎一目了然地知道这个规则是否需要应用于当前元素，这样引擎就可以避免不必要的迂回。
二，防止应用css样式关系式
Css表达式只能在ie浏览器下工作。微软不建议在ie8之后使用CSS表达式，因为这会严重影响页面性能:无论触发什么事件，如窗口大小调整事件、鼠标移动等，都会随时重新计算CSS表达式。
三，把css样式文档放到网页页面顶端
把外联或内联样式表放到body一部分会危害网页页面3D渲染的速率，由于电脑浏览器只能在全部样式表免费下载进行后才会再次下载网页别的內容。此外，内嵌样式表(放置在<style>中的样式可能会导致页面重新呈现或显示隐藏页面中的某些元素。建议不要使用内嵌样式表。
四，特定网页页面照片的规格
指定页面图片的大小应符合图片的实际大小(不要通过指定大小来缩放图片)，这样可以避免大小变化引起的页面结构效果的变化，从而有利于加快页面渲染速度。
五，网页页面头顶部标出文本文档编号
html语言文本文档要以包括文本文档编号信息内容的数据流方法在互联网间传送。页面的编码信息通常在超文本传输协议响应的标题信息中或者在文档中的超文本标记中表示。客户端浏览器只有在确定页面代码后才能正确呈现页面，所以在绘制页面或执行任何javascript代码之前，大多数浏览器(ie6、ie7和ie8除外)都会缓冲某个字节的数据来查找编码信息，并且预缓冲的字节数在不同的浏览器之间是不同的。如果浏览器在接收到设定数量的预缓冲数据后没有找到页面的编码信息，它将根据每个浏览器指定的默认编码开始渲染页面。如果此时再次获得页面的编码信息，并且该信息与当前使用的编码不一致，则必须重新呈现整个页面，并且在某些情况下，甚至可能需要重新获得数据。因此，对于大小大于1KB的页面(1KB是根据每个浏览器中的测试结果预先缓冲的最大数据量)，应尽早标记编码信息。
最佳化建议:
a，尽可能在http报头信息中标明页码(这需要在服务器端设定)。像火狐浏览器一样，如果编码信息是在超文本传输协议报头信息中获得的，那么预缓冲的数据会更少，以减少不必要的数据缓冲时间；
b、在html的<head>部分标明代码信息
c,要习惯性给文本文档特定编号；
d、分配给页面的代码应符合页面的实际代码；如果您在网页标题信息和网页标签中都指定了编码，请确保编码信息是一致的。
