美文网首页让前端飞Web前端之路前端
浏览器是怎么认识HTML的?

浏览器是怎么认识HTML的?

作者: 张中华 | 来源:发表于2019-06-09 10:58 被阅读8次

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

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

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

主流浏览器内核:

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

渲染引擎

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

JS引擎

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

渲染引擎工作流程

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


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

相关文章

  • 浏览器是怎么认识HTML的?

    以前对HTML有过简单的了解,由于之后可能会对前端有进一步的使用,所以抽空把前端基础知识再温故一下。在学习HTML...

  • HTML5+React Native跨平台开发教程【源代码+视频

    怎么开发一款网页,视频中从选择浏览器开始到最后的实现,手把手教你做~ ●HTML基础知识 ●认识HTML ●背景和...

  • 前端面试每日 3+1 —— 第420天

    今天的知识点 (2020.06.09) —— 第420天 (我也要出题) [html] 浏览器是怎么对HTML5的...

  • HTML基础问题搜集及解决

    HTML基础问题搜集及解决 1. 网页乱码是如何产生的,怎么解决? 答:我们浏览的网页是浏览器解析html文件呈现...

  • 前端面试每日 3+1 —— 第160天

    今天的知识点 (2019.09.23) —— 第160天 [html] 怎么检测浏览器是否支持HTML5特性? [...

  • 学习HTML-01

    什么是HTML? HTML 标签 HTML 元素 Web 浏览器 HTML 网页结构 HTML版本 从初期的网络诞...

  • HTML笔记

    HTML文档声明 HTML文档声明,告诉浏览器当前页面是HTML5页面,让浏览器用HTML5的标准去解析识别HTM...

  • 网页基本元素知识了解

    网页的基本元素 1.文档声明:告诉浏览器当前页面是html5,让浏览器按照html5...

  • 浏览器的渲染原理

    I:浏览器的渲染过程 (1)浏览器根据HTML构建HTML树 (2)浏览器根据CSS构建CSS树 (3)将HTML...

  • 浏览器引擎与组成部分简介

    浏览器简介 众所周知,浏览器是能够解析HTML以及CSS、JavaScript的软件,其中HTML与CSS能够被识...

网友评论

    本文标题:浏览器是怎么认识HTML的?

    本文链接:https://www.haomeiwen.com/subject/rtomxctx.html