HTMLtile可以不填写
在前一篇文章：「高频率面试问题」电脑浏览器从键入url到页面展示正中间发生什么事 中，大家也有对浏览器渲染步骤做了一个抽象性的讲解，本篇文章我们将要加强学习这个知识点。
对于许多前端工程师而言，平时质量关键致力于业务开发，对浏览器渲染环节很有可能不是很了解。事实上这一阶段至关重要，掌握浏览器渲染全过程，能让我们知道大家所写的HTML、CSS、JS编码是怎样被分析，进而渲染成一个界面的，在网页页面性能调优时有明确的解决策略。
我们首先来说一个问题：
HTML、CSS、JS文档用浏览器中是怎样转换成界面的？
假如你回应不起来，那么就来看看吧。
依照渲染的先后顺序，渲染全过程可分为以下几个子环节：搭建DOM树、样式测算、布局环节、分层次、栅格化和生成表明。
下边详尽看看每一个阶段都做了哪些事儿。
1. 搭建DOM树
HTML文本文档叙述一个界面的构造，可是电脑浏览器不能直接认知和应用HTML，因此需要根据HTML在线解析将HTML转化成电脑浏览器能理解的构造——DOM树。
HTMLword里全部内容均为节点，各节点间有层级关系，彼此之间相接，组成DOM树。
搭建全过程：载入HTML文档字节数(Bytes)，将字节转换成标识符(Chars)，根据标识符明确标识(Tokens)，将标识转化成节点(Nodes)，以节点为依据搭建DOM树。参照下面的图：
开启Chrome的微信开发工具，在控制台输入 document 后回车键，就可以看到一个完整的DOM树形结构，如图所示：
在控制面板直接打印的DOM结构与HTML具体内容几乎一样，但跟HTML不一样的是，DOM是储存在运行内存里的树状结构，能通过JavaScript来查看或修改内容。
2. 样式测算
样式测算这一阶段，就是为了算出DOM节点中每一个元素主要表现样式。
2.1 分析CSS
CSS样式能通过下边三种方式引进：
- 根据link引入外部CSS文档
- style 标识里的CSS
- 元素style属性嵌入的CSS
和HTML一样，电脑浏览器不能直接了解纯文本的CSS样式，必须通过CSS在线解析将CSS分析成 styleSheets 构造，也就是常说的 CSSOM树。
styleSheets结构一样具有查询和改动作用：
document.styleSheets2.2 属性值规范化
属性值规范化看表面意思有点儿不太好了解，我们可以通过下面一个事例一起来看看什么叫属性值规范化：
写CSS样式时，大家在设计color属性系数的情况下，总会用white、red等，但这种值浏览器渲染模块不容易接受，因此需要将所有值转化成渲染模块容易接受的、规范化的测算值，这一过程便是属性值规范化。
white规范化后数值为 rgb(255, 255, 255)
2.3 测算DOM树中每一个节点的样式
进行样式的属性值规范化后，那就需要测算每一个节点的样式属性，这一阶段CSS有两种标准我们应该清晰：
- 传承标准：每一个DOM节点都包含了父节点的样式
- 堆叠标准：堆叠是CSS的一个本质特征，是一个重新定义了如何合并来源于好几个源的属性系数的优化算法。
样式测算环节就是为了算出DOM节点中每一个元素实际样式，在预估的时候需要遵循CSS的传承和堆叠2个标准。
该环节最后导出内容就是每一个DOM节点的样式，且被储存在 ComputedStyle 的构造中。
3. 布局环节
通过上边的两个步骤，己经拿到DOM树和DOM树中元素的样式，下面必须测算DOM树中由此可见元素几何图形部位，这一计算步骤便是布局。
3.1 建立布局树
在DOM树其中包含了一些看不到元素，比如 head 标识，增设了 display:none 属性元素，所以我们要附加搭建一棵只包括由此可见元素布局树。
搭建全过程：从DOM树的根节点逐渐赋值，把所有看得到的节点加进布局树中，忽视看不到的节点。
3.2 布局测算
到接下来我们也就有了一棵搭建好一点的布局树，就可以去测算布局树节点的经纬坐标了。从根节点逐渐赋值，融合上边测算所得到的样式，明确每一个节点目标在页面中的实际大小部位，将这些数据储存在布局树中。
布局环节输出是一个盒子模型，他会准确地捕捉每一个原素在屏幕里的准确部位与尺寸。
4. 分层次
如今我们有了布局树，知道了每一个元素具体地址信息内容，可是没法逐渐制作网页页面，由于页面上会出现像3D转换、页面滚动、或是用 z-index 开展z轴排列等复杂实际效果，为了能比较方便完成这种实际效果，渲染模块还要为特定节点形成专用图层，并生成一棵相对应的图层树(LayerTree)。
在Chrome电脑浏览器中，大家能打开微信开发工具，挑选 Elements-Layers 标识，就能看到界面的分层次状况，如图所示：
电脑浏览器页面事实上被划分成许多图层，这种图层累加后生成了最后页面。
到这儿，大家打造了二棵树：布局树和图层树。下面我们就来看看这二棵树相互关系：
通常情况下，并非布局树每一个节点都包含一个图层，如果一个节点并没有相对应的图层，那么这样的节点先从归属于父节点的图层。
那节点需要满足什么样的条件才能被提升为一个独立的图层？只要符合下边其中一个标准就可以：
- 有着层叠上下文属性元素能被提升为独立的一个图层
- 必须裁切(clip)的区域就会被建立为图层。
5. 图层制作
搭建好图层树以后，渲染模块会对图层树中的每一个图层开展制作。
渲染模块完成图层制作，会将一个图层的制作拆分成许多小一点制作命令，再将这种命令依照次序组成一个制作目录。
6. 栅格化(raster)实际操作
制作一个图层的时候会生成一个制作目录，这就是用来纪录制作次序和制作命令的目录，事实上制作实际操作是通过渲染模块里的生成进程来实现的。
根据下面的图来看一下渲染主线程和生成进程相互关系：
当图层的制作目录提前准备之后，主线程会将该制作目录递交给生成进程，生成进程开始运动。
最先生成进程会把图层划分成图块(tile)，图块尺寸一般是 256256 或是 512512。
随后生成进程会依据视口周边的图块来优先选择形成位图文件，具体形成位图文件的操作是通过栅格化去执行的。所说栅格化，是指由图块转换成位图文件。而图块是栅格化实施的最小的单位。渲染过程保护了一个栅格化的线程池，每一个图块栅格化都在线程池内实施的，运行模式如图所示：
7. 生成和表明
一旦全部图块都已经被光栅化，生成进程便会生成一个绘制图块指令——“DrawQuad”，再将该指令递交给浏览器进程。
浏览器进程里面有一个名字叫 viz 的部件，用于接受生成进程发来的 DrawQuad 指令，再根据命令执行。 DrawQuad 指令，把它网页内容制作到内存中，接着再将内存显示屏幕上。
很多年开发设计老程序员褔利赠予：网页设计，网站建设，web前端开发，从零基础逐渐的HTML CSS JavaScript。jQuery，Vue、React、Ajax，node，angular架构直到手机端小程序项目实战演练【短视频＋专用工具＋电子书籍＋系统软件路线地图】都是有梳理，必须的小伙伴可以找我，推送“前面”等3秒之后就可以获得领到详细地址，赠给每一位对程序编写感兴趣的朋友
8. 汇总
一个完整的渲染步骤能够归纳如下：
- 1、渲染过程将HTML具体内容转换成电脑浏览器可以了解的DOM树形结构。
- 2、渲染模块将CSS样式表转化为电脑浏览器可以接受的styleSheets，算出DOM节点的样式。
- 3、建立布局树，并计算机所需元素布局信息内容。
- 4、对布局树开展分层次，并生成分层次树。
- 5、为每一个图层形成制作目录，并把它提交到生成进程。
- 6、生成进程将图层分图块，并栅格化将图块转化成位图文件。
- 7、生成进程推送绘制图块指令给浏览器进程。浏览器进程依据命令形成网页页面，并表明到显示屏上。
渲染环节中两个大家经常会听到这个概念：重新排列和重绘。在这篇文章中也不细说了，下一篇文章再详解。
相关推荐
-
双生爱上双生《长相守》开播，除了甜虐的爱
双生爱上双生《长相守》开播，除了甜虐的爱情，强大制作团队保驾，什么，青春，姐妹，香港，团队，贾宝玉，爱情，剧中，电视剧，锦绣，八卦爆料，长相守，贾宝玉，双生，小彤，毛晓慧，昨晚，开播的古装甜宠剧《长相守》迎来开播，该剧如何呢？小编看了四集来谈谈看法！《长相守》改编海飘雪网络小说《木槿花西月锦绣》，据说圈了一大批的书粉，写作跨度更是长达8年之久，作者更是构建了庞大的"花西世界"。我们来看看该剧的看点有哪些？甜虐的爱情故事，两对双生的爱情纠葛颇有看点。故事背景设在了...
-
火狮王国影业布局艺人经纪赛道 “长松计
火狮王国影业布局艺人经纪赛道 “长松计划”官宣六位青年演员，官宣，计划，青年，扈帷，经纪，姜磊，影视剧，布局，赛道，王国，消息资讯，火狮王国，姜磊，演员，长松计划，潘毅鸿，近日，火狮王国影业公布青年演员计划——长松计划，同时曝光首批演员阵容。一直以来，火狮王国影业都秉持着“培养有为的时代青年演员”的理念，寻找有梦想、有热爱、有灵气的青年演员，在近千名演员中经过层层筛选，最终公布了扈帷、高基才、潘毅鸿、朱美吉、张云琪、阿克朱力六位潜力青年演员。此次火狮王国影业正式...
-
《御赐小仵作》无大咖小成本制作网剧，靠着
《御赐小仵作》无大咖小成本制作网剧，靠着扎实的剧本，迎来好评，办案，成本，小金鱼，王爷，男女，网友，胭脂，观众，水粉，剧本，八卦爆料，御赐小仵作，王爷，萧谨璃，苏晓彤，楚楚，《御赐小仵作》上周剧情超嗨，小仵作楚楚与安郡王萧谨瑜两位理科男女终于撒糖，无大咖小成本制作网剧靠着扎实的剧本及自然不矫作的演技已冲到网播热度前三！由苏晓彤、王子奇主演的古装探案剧《御赐小仵作》，目前已来到网上剧集热播榜第二名仅次于《乌鸦小姐与蜥蜴先生》。▼以下有雷《御赐小仵作》除了高能高智商...
-
制作团队谈剧版《三体》创作幕后！白一骢死
制作团队谈剧版《三体》创作幕后！白一骢死磕七年，项目，调研，写小说，前期，文本，操作，特效，时代，文/羊城晚报全媒体记者 龚卫锋近日，电视剧《三体》以豆瓣8.5分收官，赢得高热度和口碑，总制片人白一骢、制片人蔡佳、总编剧田良良在采访中回顾了该剧的制作过程。白一骢坦言，从2016年接手该项目，至今已七年，“这几年里，每天睁眼闭眼都是这件事。做《三体》，等于我们是在科幻剧领域‘开荒’，过去的经验帮不了我们”。适配团队：达成现实主义创作共识谈及团队组成，白一骢如数...
-
番外网剧《花千骨》火热来袭，制作方承诺吻
番外网剧《花千骨》火热来袭，制作方承诺吻戏不删，花千骨，外网，承诺，制作，爱奇艺，剧情，神秘，版权，人物角色，9月7日晚历经过三个月的热播，让粉丝们苦追的古装仙侠剧《花千骨》落下帷幕，而大结局中并没有尊上激吻花千骨的镜头。一时间相关话题的讨论量占据了网络平台的各大页面。醋吻的删减招来观众的一片骂声，大家纷纷表示了自己的不满。作为备受瞩目的国民大剧，《花千骨》自开播来就掀起了一波又一波的观剧热潮，并多次冲到双网收视榜首。据悉，目前该剧的全网播放量已经突破了184亿次...
-
迪士尼·皮克斯原创动画《疯狂元素城》内
迪士尼·皮克斯原创动画《疯狂元素城》内地定档6月16日，元素，动画，四大，环游，疯狂，火元素，经典，半透明，文/羊城晚报全媒体记者 何晶由中影发行，迪士尼·皮克斯出品的《疯狂元素城》将于6月16日在内地公映。曾打造奥斯卡最佳动画《寻梦环游记》、口碑佳作《心灵奇旅》等现象级经典的皮克斯金牌班底再度集结，用华丽缤纷的奇思妙想打造风、火、水、土四大元素共同生活的奇趣城市。 在风、火、水、土共同生活又泾渭分明的世界里，来自水元素的男生渡阿波（Wade）和来自火元素的...
-
国民爽片《中国乒乓》昨天上映！满满的嵊州
国民爽片《中国乒乓》昨天上映！满满的嵊州元素……，蔡振华，邓超，电影，主教练，乒乓，中国，影片，故事，绝地，嵊州，蔡振华，邓超，张炳，乒乓球，嵊州，2月17日，首部以乒乓球为主题的电影《中国乒乓之绝地反击》正式上映，影片由邓超、俞白眉执导，邓超、孙俪等主演。据悉，该影片是根据真实故事改编，讲述了1992年至1995年期间，中国乒乓男团在男乒主教练蔡振华带领下，经过一段时间的苦练，在天津世锦赛绝地反击的故事。蔡振华的妻子黄胜是嵊州人，对这部电影的拍摄给予了大力支持...
-
音乐麦田|专访预告：音乐制作人王傲然——
音乐麦田|专访预告：音乐制作人王傲然——吉克隽逸、方文山、《乐队的夏天》、《创造营》……他知道的有点多，夏天，栏目，楚天，专访，单曲，吉克，方文山，搜索，北京，音乐，王傲然，方文山，制作人，吉克隽逸，音乐，还记得在今年， 第32届台湾金曲奖上，陈珊妮发表的那段有关音乐制作人的感言吗？一席话，道出了成为一名优秀的音乐制作人的不易。今天，我们也邀请到了一位音乐制作人，来到直播间，聊聊他的作品和生活。王傲然1994 年9 月26 号出生于山西省晋城市，毕业于中国传媒大...
-
首演夜 | 像一面镜子照见你我的生活，国家
首演夜 | 像一面镜子照见你我的生活，国家大剧院制作话剧《玩偶之家》经典重现，时间，生活，柯洛克斯泰，海尔茂，玩偶，国家大剧院，娜拉，丈夫，演出，话剧，海尔茂，玩偶之家，国家大剧院，娜拉，易卜生，当娜拉欢欣雀跃地在丈夫海尔茂身旁吹着泡泡时，可能不曾想过，他们的婚姻生活也像这泡泡一样，耀着幻彩的光，却如此轻薄易碎。娜拉和海尔茂，是挪威戏剧家易卜生经典作品《玩偶之家》中的一对夫妻形象。他们的故事就像一面镜子，即便经过一百多年的岁月洗礼，依旧能够鲜明地照见你我的生活。...
-
《阿凡达3》后期制作中 预计2025年圣诞节
《阿凡达3》后期制作中 预计2025年圣诞节期间上映，阿凡，圣诞节，角色，提升，深度，续作，近日，詹姆斯·卡梅隆在接受采访时谈到《阿凡达》系列续作开发进度，他透露《阿凡达3》的后期制作正在有条不紊地进行中，影片预计将于2025年圣诞节期间上映。此外，卡梅隆还表示《阿凡达4》已完成部分拍摄，剩余部分将在第三部上映后开始拍摄，而第五部的拍摄还完全未开始。关于《阿凡达3》的内容，卡梅隆此前曾表示：影片将会在角色深度上有巨...
-
《正好遇见你》制作难度最大的艺术品是金
《正好遇见你》制作难度最大的艺术品是金瓯永固杯丨揭秘，传统，技艺，栾贺鑫，进行了，艺术品，剧中，花丝，金瓯，文物，永固，原创新闻，栾贺鑫，永固杯，花丝，文物，正好遇见你，由郭晓东、张楠、李小冉、张博、郑凯等主演的电视剧《正好遇见你》正在热播中，该剧讲述了以文艺编导鱼在藻、青年文物专家陶唐为核心的综艺团队为展现中华文明之美，齐心协力推出一档文化类电视节目的故事。剧中融合了大量文物的展现，日前，该剧美术指导栾贺鑫接受新京报专访表示，如何能用不夸张造作的表达方式，体现...
-
浪姐4谢娜人气排第一 谢娜初舞台制作人是
浪姐4谢娜人气排第一 谢娜初舞台制作人是张杰，制作，人气，社交，平台，正式，香格里拉，怀孕，跳跳，【妇唱夫随！浪姐4谢娜人气排第一，谢娜初舞台制作人是张杰】磕还是真夫妻好磕啊！据网友爆料：谢娜《乘风2023》初舞台是张杰制作的！！互相是对方的粉头，相濡以沫12年！2011年七夕，谢娜与张杰正式对外公布婚讯；9月26日，谢娜与张杰在云南香格里拉举行婚礼。2017年9月26日，张杰在两人6周年结婚纪念日公布谢娜怀孕的喜讯。2018年2月1日，谢娜产下了与张杰的一对双胞...
-
《无间》导演奇道的底气：夫妻齐上阵，顶级演
《无间》导演奇道的底气：夫妻齐上阵，顶级演员阵容和制作团队，卫视，苗乙乙，底气，演员阵容，观众，事业，启导，无间，夫妻，女人，苗乙乙，蓝冰，无间，演员，奇岛，有生之年有幸再相见，点击上方“关注”，了解更多名人故事。《无间》开播开门红，东方卫视和江苏卫视均接近卫视冠军。已经播出到第三集，依旧好评如潮。2023年可能会超越《狂飙》成为卫视年度冠军，能取得这样的好成绩，似乎也在奇岛的意料之中。启道是谁？为什么他能有这样的信心？01齐导过去以演员的身份被观众熟知。无论是...
-
《云襄传》直到莫不凡被杀，云襄才发现，布局
《云襄传》直到莫不凡被杀，云襄才发现，布局之人就在身边，因为，调查，凌渊，剧情，势力，布局，棋子，云襄，南宫，的发展，消息资讯，凌渊，云台，云襄传，骆家庄，南宫，作为一部公认的网络IP改编剧，由陈晓、毛晓彤领衔，唐晓天、许龄月、刘冠麟等人主演的这部《云襄传》已经开播大半，伴随着剧情的发展，角色的设定也变得迷离。《云襄传》直到莫不凡被杀，云襄才发现，布局之人就在身边。在《云襄传》这部剧的主体线索中，故事设定都是围绕男主一步步抽丝剥茧，寻找当年谋划骆家庄惨案的真凶展...
-
转生成史莱姆：萌王对人类出手，神之怒要来了
转生成史莱姆：萌王对人类出手，神之怒要来了，王对，人类，魔王，史莱姆，剧情，时长，画面，白老，其他，利古路，观点评论，人类，米莉姆，《关于我转生变成史莱姆这档事》更新到第33集，这集总体来讲就两个字“很水”，可看的剧情不是很多，这也导致这集播出后评分下降，直接从8.9分降到8.2分！这集很水的原因有两点，回忆剧情过多，加上文字剧情过多，严重影响观众的观看，尤其是米莉姆这段回忆，照搬第32集的！老白觉得米莉姆这段回忆完全可以去掉，毕竟在第32集才看过，而萌王对自己...
-
信封怎么制作 信封怎么制作用A4纸
信封怎么制作 信封怎么制作用A4纸，折叠，对齐，上方，添加，三角形，调整，视频素材，制作， 1、准备一张正方形彩纸，上下左右对折展开，相邻两边对齐中线折叠。 2、把重合部分翻折成正方形并压折成菱形。 3、菱形两边对齐中线折叠，用刀把两个角裁开。 4、把两个角往上翻折，右角捏成头部。 5、把正方形另一边对齐折叠，边沿往外折，另一边也往里面折，千纸鹤信封就折好了。怎样用A4纸做信封？以下是用A4纸做信封的步骤：1. 准备一张A4纸。将A4纸放在桌子上，竖直方...