浏览器内核	开发公司	代表浏览器	支持程度	渲染引擎	JavaScript引擎	浏览器兼容性
Trident	Microsoft	Internet Explorer	一般	一般	出色	差
Gecko	Mozilla	Firefox	较好	较好	出色	好
WebKit	Apple	Safari	出色	出色	出色	好
Blink	Google and Opera Software	Chrome and Opera	出色	出色	出色	好

\n",{"_58":211,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/65/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/65/timeline",{"_58":214,"_60":61,"_62":215,"_64":216,"_66":217,"_68":218,"_70":219,"_72":220,"_74":221,"_76":222,"_78":223,"_111":224,"_124":125,"_126":24,"_127":-5,"_128":226,"_130":227,"_152":145,"_146":229,"_148":230,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":231,"_163":232,"_169":233,"_171":234,"_183":236,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/64","https://api.github.com/repos/pro-collection/interview-question/issues/64/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/64/comments","https://api.github.com/repos/pro-collection/interview-question/issues/64/events","https://github.com/pro-collection/interview-question/issues/64",1619909253,"I_kwDOJGDC6c5gjdqF",64,"浏览器 DOM Tree是如何构建的？",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[225],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":228,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-03-11T06:51:52Z","2023-03-11T06:51:53Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"浏览器构建DOM树的过程包括以下几个步骤：\n\n1. 解析HTML代码：浏览器会将HTML代码解析成一个DOM树的结构。\n\n2. 创建根节点：DOM树的根节点通常是HTML元素。\n\n3. 创建子节点：根据HTML标记的嵌套关系，浏览器会在DOM树中创建相应的子节点，每个节点表示一个HTML元素。\n\n4. 创建属性节点：HTML元素可能有一些属性，例如id、class、src等，浏览器会将这些属性创建为节点的属性节点。\n\n5. 创建文本节点：如果HTML元素中包含文本内容，浏览器会将这些文本内容创建为文本节点，并将它们作为元素的子节点插入到DOM树中。\n\n6. 创建注释节点：HTML代码中可能包含注释，浏览器会将注释创建为注释节点，并将它们插入到DOM树中。\n\n7. 构建完整的DOM树：经过以上步骤，浏览器会将所有HTML代码解析成一个完整的DOM树。\n\n需要注意的是，浏览器构建DOM树是一个逐步进行的过程，解析器会逐个读取HTML标记，并创建相应的节点，直到解析完整个HTML代码。在这个过程中，如果遇到错误的HTML标记，浏览器也会尽可能地将其解析成一个节点，以保证DOM树的完整性。\n",{"_58":235,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/64/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/64/timeline",{"_58":238,"_60":61,"_62":239,"_64":240,"_66":241,"_68":242,"_70":243,"_72":244,"_74":245,"_76":246,"_78":247,"_111":248,"_124":125,"_126":24,"_127":-5,"_128":250,"_130":251,"_152":145,"_146":253,"_148":254,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":255,"_163":256,"_169":257,"_171":258,"_183":260,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/63","https://api.github.com/repos/pro-collection/interview-question/issues/63/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/63/comments","https://api.github.com/repos/pro-collection/interview-question/issues/63/events","https://github.com/pro-collection/interview-question/issues/63",1619908865,"I_kwDOJGDC6c5gjdkB",63,"浏览器是如何渲染UI的？",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[249],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":252,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-03-11T06:50:04Z","2023-03-11T06:50:05Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"浏览器渲染UI的过程通常被称为渲染流水线（rendering pipeline），它可以分为以下几个步骤：\n\n1. 解析HTML：浏览器首先解析HTML代码，创建DOM（文档对象模型）树。DOM树是由节点和对象组成的层次结构，它表示了文档的内容和结构。\n\n2. 解析CSS：浏览器接着解析CSS代码，创建CSSOM（CSS对象模型）树。CSSOM树是由CSS规则和对应的元素组成的层次结构，它表示了文档中的元素的样式信息。\n\n3. 创建渲染树：浏览器将DOM树和CSSOM树结合起来，生成渲染树。渲染树只包含需要显示的元素，它是一种按照渲染顺序排列的树形结构。\n\n4. 布局：浏览器对渲染树进行布局（layout），计算每个元素在屏幕上的位置和大小。\n\n5. 绘制：浏览器将渲染树中的每个元素绘制到屏幕上。\n\n6. 合成：如果有多个层叠的元素，浏览器将它们合成一个图层，以提高性能。\n\n这些步骤通常是逐步完成的，而且它们是相互依赖的。例如，布局必须在绘制之前完成，因为绘制需要知道每个元素的位置和大小。为了提高性能，浏览器通常会对这些步骤进行优化，例如使用异步布局和延迟合成等技术。\n\n\n\n",{"_58":259,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/63/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/63/timeline",{"_58":262,"_60":61,"_62":263,"_64":264,"_66":265,"_68":266,"_70":267,"_72":268,"_74":269,"_76":270,"_78":271,"_111":272,"_124":125,"_126":24,"_127":-5,"_128":274,"_130":275,"_152":145,"_146":288,"_148":289,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":290,"_163":291,"_169":292,"_171":293,"_183":295,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/62","https://api.github.com/repos/pro-collection/interview-question/issues/62/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/62/comments","https://api.github.com/repos/pro-collection/interview-question/issues/62/events","https://github.com/pro-collection/interview-question/issues/62",1619908353,"I_kwDOJGDC6c5gjdcB",62,"浏览器如何解析css选择器？",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[273],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":276,"_68":277,"_62":278,"_70":279,"_72":280,"_74":281,"_76":282,"_122":283,"_140":284,"_142":285,"_144":145,"_124":125,"_146":286,"_148":287,"_150":-5,"_151":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/3","https://github.com/pro-collection/interview-question/milestone/3","https://api.github.com/repos/pro-collection/interview-question/milestones/3/labels",9124547,"MI_kwDOJGDC6c4AizrD",3,"高","高级别面试问题",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},454,"2023-03-06T15:00:27Z","2025-09-07T06:21:17Z","2023-03-11T06:47:36Z","2023-03-11T08:15:20Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"浏览器会『从右往左』解析CSS选择器。\n\n#### CSS选择器的解析顺序\n相信很多人在一开始接触CSS的时候都会看到一条规则就是尽量少使用层级关系，比如尽量不要写成：\n```css\n#div P.class {\n color: red;\n}\n```\n\n而是写成：\n```css\n.class {\n color: red;\n}\n```\n之所以需要这么写，给的解释是这样可以减少选择器匹配的次数。\n初看觉得哦，有点道理啊，但是往细了再想想：\n如果我把层级定的足够的清晰分明，那不是可以直接去掉很多不对应的CSS选择器的索引路径的么？为什么都是建议少使用层级关系呢？\n\n原因其实很简单，我们犯了一个经验主义错误，默认CSS选择器是从左往右进行解析的，实际上恰恰相反，CSS选择器是从右往左解析的。\n\n#### CSS选择器进行优化的必要性\n\n再次看下图： \n![img](https://img-blog.csdn.net/20160805094241153)\n\n在图中我们可以看到HTML解析出了一颗DOM tree，与此同时样式脚本则解析生成了一个style rules，也可以说是一个CSS tree。\n最后，DOM tree同style rules一同结合解析出一颗Render Tree，\n而Render Tree就是包含了一个dom对象以及为其计算好的样式规则，提供了布局以及显示方法。\n\n因为不清楚一个DOM对象上究竟对应着哪些样式规则，所以只能选择一个最笨的办法，\n即每一个DOM对象都遍历一遍style rules，DOM对象的数量相信大家也都清楚，\n如果每次遍历style rules都是像一个晒太阳的老大爷一样的悠哉游哉，因此对CSS选择器进行优化就是一个必须的事情了。\n\n#### 从右往左解析到底好在哪里\n假如有如下的一段HTML：\n```html\n

\n ...\n

\n```\n\n和如下的CSS：\n```css\n#div1 .c .d {}\n.f .c .d {}\n.a .c .e {}\n#div1 .f {}\n.c .d{}\n```\n\n假如我们的CSS解析器是从左往右进行匹配的，那么会生成如下的style rules：\n![01_47_03](https://user-images.githubusercontent.com/22188674/224469670-1156d32e-ea84-4a5a-9323-308d2db320b3.jpg)\n\n\n首先，#div1 .c .d ｛｝ .f .c .d ｛｝.c .d｛｝这三个选择器里面都含有 **.c .d｛｝这么一个公用样式，**\n所以哪怕是我们的DOM节点明确了是在#div1下面都必须对style rules进行全部的匹配查找，\n这样一来基本上可以说是**每一个DOM节点都必须完全遍历一遍style rules**，\n不然搞不好就会漏掉一些公用样式之类的，所以想着将层级写的更加详细就能去掉很多不对应的CSS选择器的索引路径的就不要想了，\n不管你写的多细，你总是需要把整个style rules都遍历一遍，不然万一漏掉了某个公用样式不就思密达了？\n\n那么如果我们换成从右向左进行解析就能够避免这种情况了么？请看下面这个style rules： \n![01_47_04](https://user-images.githubusercontent.com/22188674/224469699-0dc5d98b-3995-4cb9-b4ae-375441dcc995.jpeg)\n\n别的先不提，**最少这个节点就少了很多**嘛，哪怕我这里同样是需要全部遍历一遍就冲着减少了这么多个节点也要从右往左进行解析啊！ \n更重要的是，只要有公用样式，那么选择器最右边的那个类型选择器一定是相同的，如此公共样式就很自然的都集中到一个分支上，\n这个时候我们**完全可以将其他不匹配的路径全部去掉而不用担心会漏掉某些个公用样式了**。\n虽然当这颗CSS树在遍历的时候还有有部分节点会遍历到最后才能确定到底是不是匹配的，\n但总的来说从**右往左进行解析还是会比从左往右解析要少很多次的匹配**，这样带来的效率提升是显而易见的！\n\n同时，这也是不建议使用*通配符来进行样式匹配的原因：浏览器专门建立了一个反常规思维的从右往左的匹配规则就是为了避免对所有元素进行遍历。\n\n最后，从右往左进行解析还有一个好处那就是从右往左进行匹配的时候，匹配的全部是DOM元素的父节点，\n而从左往右进行匹配的时候时候，匹配的全部是DOM元素的子节点，这样就**避免了HTML与CSS没有下载完需要进行等待的情形**。\n",{"_58":294,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/62/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/62/timeline",{"_58":297,"_60":61,"_62":298,"_64":299,"_66":300,"_68":301,"_70":302,"_72":303,"_74":304,"_76":305,"_78":306,"_111":307,"_124":125,"_126":24,"_127":-5,"_128":309,"_130":310,"_152":145,"_146":322,"_148":323,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":324,"_163":325,"_169":326,"_171":327,"_183":329,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/61","https://api.github.com/repos/pro-collection/interview-question/issues/61/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/61/comments","https://api.github.com/repos/pro-collection/interview-question/issues/61/events","https://github.com/pro-collection/interview-question/issues/61",1619907607,"I_kwDOJGDC6c5gjdQX",61,"浏览器的主要组成部分是什么？",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[308],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":311,"_68":312,"_62":313,"_70":314,"_72":315,"_74":188,"_76":316,"_122":317,"_140":318,"_142":319,"_144":145,"_124":125,"_146":320,"_148":321,"_150":-5,"_151":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/1","https://github.com/pro-collection/interview-question/milestone/1","https://api.github.com/repos/pro-collection/interview-question/milestones/1/labels",9124541,"MI_kwDOJGDC6c4Aizq9","初","初级面试问题",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},79,"2023-03-06T14:59:51Z","2024-11-22T14:22:55Z","2023-03-11T06:44:18Z","2023-03-11T06:44:19Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"浏览器的主要组成部分是什么\n\n- **用户界面** - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外，其他显示的各个部分都属于用户界面。\n- **浏览器引擎** - 在用户界面和呈现引擎之间传送指令。\n- **呈现引擎** - 负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。\n- **网络** - 用于网络调用，比如 HTTP 请求。其接口与平台无关，并为所有平台提供底层实现。\n- **用户界面后端** - 用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法。\n- **JavaScript 解释器** - 用于解析和执行 JavaScript 代码。\n- **数据存储。这是持久层** - 浏览器需要在硬盘上保存各种数据，例如 Cookie。新的 HTML 规范 (HTML5) 定义了“网络数据库”，这是一个完整（但是轻便）的浏览器内数据库。 \n",{"_58":328,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/61/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/61/timeline","pagination",{"_332":137,"_160":137},"value","actionData","errors"]