最近看到的不熟悉的词挺多的,只能一个个找资料一个个字看,然后自己根据自己的理解进行一定的总结,若有不对之处,还请路过的大佬不吝指正。
一.什么是渲染
页面渲染引擎的基本操作,简单而言是从一个网页的Url开始,根据Url所对应的网页各项资源,输出可视化的结果的过程;
基本流程可大致分为:
- Compute Style。根据Url读取解析Html、Css文件,根据Html代码形成Dom(文本对象模型)Tree,根据Css形成Css Rule Tree(Css规则树);
- Construct Frames。在根据Dom Tree和Css Rule Tree之上,创建一颗由一组待生成对象组成的Rendering Tree (渲染树);
- Layout。计算每个Element(对象)的位置,定位坐标和大小,是否换行,各种position, overflow, z-index属性等等等等;
- Painting。将Rendering Tree(渲染树)上的元素展现在浏览器上,形成可视化结果。
整个过程中可以注意的一些小问题:
1. 浏览器载入 HTML 代码,检测到 <head> 中有 <link> 引用外部 CSS 文件,则浏览器立即发送CSS文件请求,获取浏览器返回的CSS文件; (CSS文件合并,减少HTTP请求) 2. 浏览器载入 HTML 中 <body> 部分的代码ÿ