浏览器渲染原理

浏览器渲染原理

在我们学习前端的过程中经常会和浏览器打交道,但是许多人却不知道浏览器是怎么把我们的代码渲染成一个个好看的页面的,下面就为大家大概的讲一下这个过程。
仅为本笔记供大家参考,大神勿喷,如有错误,还请指教

渲染过程

首先,用户在浏览器中输入url并按下搜索时,浏览器会通过本地的DNS服务器查找对应的ip地址,如果找到了,通过路由器获取远程服务器对应的文件(html,css,js…),如果没找到,继续去rootDNS服务器(全国十三台根服务器)查找,最终拿到文件,拿到文件后,分配栈内存并且分配一个主线程,从文件目录的进口文件进行逐行解析(index.html),生成最后的DOM TREE.如果在解析过程中遇到要家在外部资源的时候,再分配一个线程去请求资源,放到TASK QUEUE任务队列,在主线程加载完DOM TREE后,再去任务队列获取任务,继续进栈执行,生成对应CSSOM,最后把DOM TREE和CSSOM合并生成**render tree,对页面进行渲染(回流和重绘)。

浏览器渲染原理

回流

回流是指当render tree中的内容因为元素的尺寸、布局。隐藏等需要重新构建页面时会触发回流,因为需要重新生成render tree.每个页面至少会触发一次回流(页面第一次加载时)。

重绘

重绘是指rende tree中的内容因为元素的样式等而改变并且不会影响布局的时候会触发重绘,每次回流后会触发重绘。