【校招VIP】前端浏览器考点之页面渲染- 校招VIP

考点介绍

浏览器，作为用户浏览网页最基本的一个入口，我们似乎认为在地址栏输入 URL 后网页自动就出来了。殊不知在用户输入网页地址，敲下回车的那一刻，浏览器背后做了诸多的事情。去除 DNS 查找等这些细枝末节的工作，整个大的部分可以分为两个，那就是网络和渲染。

答案详情解析和文章内容可点击下方链接即可查看

一、考点题目

1.浏览器的渲染机制可以分为几步？

解答：第一步：解析html，构建DOM树；第二步：解析CSS，生成CSSOM树；第三步：合并dom树和css规则树，生成render渲染树......

2.简单介绍浏览器渲染的五个阶段

解答：第一步：解析html标签，构建DOM树

在这个阶段，引擎开始解析html，解析出来的结果会成为一棵dom树（包含全节点，包括隐藏的节点和<head>标签），dom树构建完成以后主要作为下阶段渲染树状图的输入,并且成为网页和脚本的交互界面。(最常用的就是getElementById等等)......

3.如何优化浏览器渲染的性能？

解答：在合适的时机选择使用Load或者DOMContentLoaded，Load 事件触发代表页面中的 DOM，CSS，JS，图片已经全部加载完毕。DOMContentLoaded 事件触发代表初始的 HTML 被完全加载和解析，不需要等待 CSS，JS，图片加载......

二、考点文章

1.【校招VIP】浏览器页面渲染过程

浏览器解析html源码，然后创建一个 DOM树。在DOM树中，每一个HTML标签都有一个对应的节点，并且每一个文本也都会有一个对应的文本节点。DOM树的根节点就是 documentElement，对应的是html标签......

2.【校招VIP】浏览器是如何渲染页面的？

浏览器从HTTP服务器获取html文档，到呈现页面给用户，会经过以下几个步骤：第一，解析文档构建DOM树，浏览器的解析内容可以分为三个部分：HTML/XHTML/SVG：解析这三种文件后，会生成DOM树（DOM Tree......

3.【校招VIP】浏览器页面渲染

浏览器拿到HTML之后的渲染过程：（不同内核实现不一样但大概是这样）1解析HTML/SVG/XHTML,构建DOM tree；2解析css,构建CSSOM(规则树)；3解析完成，浏览器通过DOM tree和CSSOM 构建Rendering Tree(渲染树)......

三、考点视频

从浏览器输入URL到展示页面的全流程是怎么样的

本题目可以理解为从本地终端（如手机、电脑）访问一个网站，怎么处理请求并且加载出数据的。实际上考察的是计算机网络TCP/IP协议栈。......