Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

HTML、CSS和JavaScript，是如何变成页面的？ #1

Open
txw2018 opened this issue Apr 23, 2020 · 0 comments
Open

HTML、CSS和JavaScript，是如何变成页面的？ #1

txw2018 opened this issue Apr 23, 2020 · 0 comments

Comments

@txw2018
Copy link
Owner

txw2018 commented Apr 23, 2020 •
edited
Loading

HTML：（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构

CSS：层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题

JavaScript：是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。作为开发Web 页面的脚本语言而出名的，也被用到了很多非浏览器环境中

以上来自mdn文档
我们浏览器上显示出来各种各样的页面，都是html、css、js通过浏览器转化出来的
alt 属性文本

由于渲染机制过于复杂，所以渲染模块在执行过程中会被划分为很多子阶段，输入的 HTML 经过这些子阶段，最后输出像素。我们把这样的一个处理流程叫做渲染流水线，其大致流程如下图所示：
alt
按照渲染的时间顺序，流水线可分为如下几个子阶段：构建 DOM 树、样式计算、布局阶段、分层、绘制、分块、光栅化和合成。内容比较多，我会用两篇文章来为你详细讲解这各个子阶段。接下来，在介绍每个阶段的过程中，你应该重点关注以下三点内容：

  • 开始每个子阶段都有其输入的内容；
  • 然后每个子阶段有其处理过程；
  • 最终每个子阶段会生成输出内容。
    理解了这三部分内容，能让你更加清晰地理解每个子阶段。

构建 DOM 树

为什么要构建 DOM 树呢？这是因为浏览器无法直接理解和使用 HTML，所以需要将 HTML 转换为浏览器能够理解的结构——DOM 树。
一个包含一些文本和一幅图片的普通 HTML 页面。浏览器如何处理此页面？

  1. 转换： 浏览器从磁盘或网络读取 HTML 的原始字节，并根据文件的指定编码（例如 UTF-8）将它们转换成各个字符。
  2. 令牌化： 浏览器将字符串转换成 W3C HTML5 标准规定的各种令牌，例如，<html>、<body>，以及其他尖括号内的字符串。每个令牌都具有特殊含义和一组规则。
  3. 词法分析： 发出的令牌转换成定义其属性和规则的“对象”。
  4. DOM 构建： 最后，由于 HTML 标记定义不同标记之间的关系（一些标记包含在其他标记内），创建的对象链接在一个树数据结构内，此结构也会捕获原始标记中定义的父项-子项关系：HTML 对象是 body 对象的父项，body 是 paragraph 对象的父项，依此类推
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@txw2018