浏览器是怎么认识HTML的?

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zhonghua_csdn/article/details/92993976

以前对HTML有过简单的了解,由于之后可能会对前端有进一步的使用,所以抽空把前端基础知识再温故一下。
在学习HTML+CSS+JS之前,有一点小疑惑,为什么我写了一个.html文件,就能被浏览器转换成界面呢?

这就全靠于浏览器内核啦~

浏览器内核又可以分成两部分:渲染引擎(layout engineer或者RenderingEngine)和JS引擎
浏览器内核负责对网页语法的解释(如HTML、JavaScript)并渲染(显示)网页。 所以,通常所谓的浏览器内核也就是浏览器所采用的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同,因此同一网页在不同的内核的浏览器里的渲染(显示)效果也可能不同,这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。

主流浏览器内核:
2789632-8992d6a55e830262.png

浏览器内核包括渲染引擎和JS引擎,由于js引擎越来越独立,内核就倾向于只指渲染引擎。

渲染引擎

一种对HTML文档进行解析并将其显示在页面上的工具。它负责取得网页的内容(HTML、XML、图象等等)、整理信息(例如加入CSS等),以及计算网页的显示方式然后会输出至显示器或打印机

JS引擎

JavaScript引擎是一个专门处理JavaScript脚本的虚拟机,一般会附带在网页浏览器之中。

渲染引擎工作流程

HTML解析器解析DOMM树(解析为DOM树上个节点,同时解析CSS样式)
渲染树结构(具有一定的视觉效果,并按照一定顺序排列在屏幕上)
布局渲染树(为每个节点分配固定坐标)
绘制DOM树(渲染引擎会遍历所有的节点,由UI后端绘制)

2789632-88028a9c74287486.png

图片来自: https://www.cnblogs.com/microcosm/p/6815902.html

2789632-96e030787b428dc5.png

2789632-ef0c5b535bb841f5.png

猜你喜欢

转载自blog.csdn.net/zhonghua_csdn/article/details/92993976