浏览器渲染过程
web原理
1.基本过程
->解析HTML,生成DOM树
->解析css,生成渲染树(包含width,颜色等)
->对渲染树上的每一个节点定位、布局layout,确定在页面上的位置。
->遍历渲染树,绘制每一个节点
webkit:
当解析html的时候,会把新来的元素插入dom tree里面,同时去查找css
然后把对应的样式规则应用到元素上,查找样式表是按照从右到左的顺序去匹配的。
tips:(防止二次渲染)定义的样式规则条数越少越好,删除css文件中不必要的样式定义
避免css表达式,因为所有事件都会引发表达式的重新计算,如resize事件
指定图片的尺寸,可以避免尺寸改变导致的页面结构效果的变化,所以对加快页面渲染速度有益
指定img、table尺寸,如果浏览器可以立即决定图像或tables的大小,那么它就可以马上显示页面而不要重新做一些布局安排的工作,这不仅加快了页面的显示,也预防了页面完成加载后布局的一些不当的改变
image使用height和width
table使用table-layout: fixed并使用col和colgroup标签指定columns的width
css放head,script放后面。把CSS放到前面可以保证先渲染的一部分元素样式是正确的,而把CSS放到后面会引起大量的浏览器重绘。把script标签放到尾部,因为浏览器会预处理js文件,把js文件放到头部会延迟页面元素的渲染,让用户觉得页面打开变慢了。
实例用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件;
浏览器开始载入html代码,发现<head>标签内有一个<link>标签引用外部CSS文件;
浏览器又发出CSS文件的请求,服务器返回这个CSS文件;如果此时有script【备注】立即执行式的,并不等页面渲染完。只有用到 onload 或者 监听
*document.addEventListener("DOMContentLoaded", handler, false)
才会等到页面完成时运行 function
且有修改dom操作,会因为找不到dom报错并跳过。
此时还在head部分,浏览器只会读取,生成树,并不渲染。当第一次读到body部分时,开始渲染,每个标签边读边查找css样式表渲染
浏览器在代码中发现一个<img>标签引用了一张图片,向服务器发出请求。此时浏览器不会等到图片下载完,而是继续渲染后面的代码;
服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排布,因此浏览器需要回过头来重新渲染这部分代码;
浏览器又发现了一个包含一行Javascript代码的<script>标签,立刻执行,它命令浏览器隐藏掉代码中的某个<div> (style.display=”none”),浏览器不得不重新渲染这部分代码;
所以少用inline script呐,浏览器会假设它会更改页面布局,会重绘的
终于等到了</html>的到来...
如果此时js让浏览器换了一下<link>标签的CSS路径,会重新请求css然后重新渲染页面的......