前端面试知识点大全——浏览器篇

admin 管理员组

文章数量: 887021

总纲：前端面试知识点大全

目录

1.浏览器工作原理

2.浏览器如何解析css，如何渲染css的

2.1 构建DOM树

2.2 构建CSSOM规则树（就是css规则树）

2.3 渲染阻塞

2.4 构建渲染树

2.5 布局渲染树

2.6 绘制渲染树

3. CSS阻塞和JS阻塞

3.1 js 的阻塞特性

3.2 CSS阻塞特性

3.3 嵌入JS的放置位置

3.4 Javascript无阻塞加载具体方式：

4.CSSOM（CSS Object Model）

5.浏览器的优化策略

5.1 总览

5.2 细分

6.客户端检测

7.浏览器兼容问题

8.浏览器内核

9.浏览器多线程和JS单线程

1.浏览器工作原理

所有浏览器的引擎工作流程都差不多，如上图大致分5步：创建DOM tree –> 创建Style Rules -> 构建Render tree -> 布局Layout –> 绘制Painting

第一步，用HTML分析器，分析HTML元素，构建一颗DOM树。

第二步：用CSS分析器，分析CSS文件和元素上的inline样式，生成页面的样式表。

第三步：将上面的DOM树和样式表，关联起来，构建一颗Render树。这一过程又称为Attachment。每个DOM节点都有attach方法，接受样式信息，返回一个render对象（又名renderer）。这些render对象最终会被构建成一颗Render树。（display：none的元素不会添加进去）

第四步：有了Render树后，浏览器开始布局，会为每个Render树上的节点确定一个在显示屏上出现的精确坐标值。

第五步：Rende树有了，节点显示的位置坐标也有了，最后就是调用每个节点的paint方法，让它们显示出来。

2.浏览器如何解析css，如何渲染css的

浏览器的渲染过程主要包括以下几步：

1、解析HTML生成DOM树。

2、解析CSS生成CSSOM规则树。

3、将DOM树与CSSOM规则树合并在一起生成渲染树。

4、遍历渲染树开始布局，计算每个节点的位置大小信息。

5、将渲染树每个节点绘制到屏幕。

2.1 构建DOM树

当浏览器接收到服务器响应来的HTML文档后，会遍历文档节点，生成DOM树。

需要注意的是，DOM树的生成过程中可能会被CSS和JS的加载执行阻塞。渲染阻塞问题下文会讲。

2.2 构建CSSOM规则树（就是css规则树）

浏览器解析CSS文件并生成CSS规则树，每个CSS文件都被分析成一个StyleSheet对象，每个对象都包含CSS规则。CSS规则对象包含对应于CSS语法的选择器和声明对象以及其他对象。

2.3 渲染阻塞

当浏览器遇到一个 script 标记时，DOM 构建将暂停，直至脚本完成执行，然后继续构建DOM。每次去执行JavaScript脚本都会严重地阻塞DOM树的构建，如果JavaScript脚本还操作了CSSOM，而正好这个CSSOM还没有下载和构建，浏览器甚至会延迟脚本执行和构建DOM，直至完成其CSSOM的下载和构建。

所以，script 标签的位置很重要。实际使用时，可以遵循下面两个原则：

（1）CSS 优先：引入顺序上，CSS 资源先于 JavaScript 资源。

（2）JS置后：我们通常把JS代码放到页面底部，且JavaScript 应尽量少影响 DOM 的构建。

当解析html的时候，会把新来的元素插入dom树里面，同时去查找css，然后把对应的样式规则应用到元素上，查找样式表是按照从右到左的顺序去匹配的。

例如： div p {font-size: 16px}，会先寻找所有p标签并判断它的父标签是否为div之后才会决定要不要采用这个样式进行渲染）。

所以，我们平时写CSS时，尽量用id和class，千万不要过渡层叠。

2.4 构建渲染树

通过DOM树和CSS规则树我们便可以构建渲染树。浏览器会先从DOM树的根节点开始遍历每个可见节点。对每个可见节点，找到其适配的CSS样式规则并应用。

渲染树构建完成后，每个节点都是可见节点并且都含有其内容和对应规则的样式。这也是渲染树与DOM树的最大区别所在。渲染树是用于显示，那些不可见的元素当然就不会在这棵树中出现了，譬如。除此之外，display等于none的也不会被显示在这棵树里头，但是visibility等于hidden的元素是会显示在这棵树里头的。

2.5 布局渲染树

布局阶段会从渲染树的根节点开始遍历，然后确定每个节点对象在页面上的确切大小与位置，布局阶段的输出是一个盒子模型，它会精确地捕获每个元素在屏幕内的确切位置与大小。

2.6 绘制渲染树

在绘制阶段，遍历渲染树，调用渲染器的paint()方法在屏幕上显示其内容。渲染树的绘制工作是由浏览器的UI后端组件完成的。

3. CSS阻塞和JS阻塞

3.1 js 的阻塞特性

所有浏览器在下载 JS 的时候，会阻止一切其他活动，比如其他资源的下载，内容的呈现等等。直到 JS 下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。为了提高用户体验，新一代浏览器都支持并行下载 JS，但是 JS 下载仍然会阻塞其它资源的下载（例如.图片，css文件等）。

由于浏览器为了防止出现 JS 修改 DOM 树，需要重新构建 DOM 树的情况，所以就会阻塞其他的下载和呈现。

嵌入 JS 会阻塞所有内容的呈现，而外部 JS 只会阻塞其后内容的显示，2 种方式都会阻塞其后资源的下载。也就是说外部样式不会阻塞外部脚本的加载，但会阻塞外部脚本的执行。

3.2 CSS阻塞特性

当 CSS 后面跟着嵌入的 JS 的时候，该 CSS 就会出现阻塞后面资源下载的情况。而当把嵌入 JS 放到 CSS 前面，就不会出现阻塞的情况了。

根本原因：因为浏览器会维持 html 中 css 和 js 的顺序，样式表必须在嵌入的 JS 执行前先加载、解析完。而嵌入的 JS 会阻塞后面的资源加载，所以就会出现上面 CSS 阻塞下载的情况。

3.3 嵌入JS的放置位置

1. 放在底部，虽然放在底部照样会阻塞所有呈现，但不会阻塞资源下载。

2. 如果嵌入JS放在head中，请把嵌入JS放在CSS头部。

3. 使用 defer（只支持IE）或者async

4. 不要在嵌入的JS中调用运行时间较长的函数，如果一定要用，可以用 setTimeout 来调用

3.4 Javascript无阻塞加载具体方式：

1. 将脚本放在底部。<link>还是放在head中，用以保证在js加载前，能加载出正常显示的页面。<script>标签放在</body>前。

2. 阻塞脚本：由于每个<script>标签下载时阻塞页面解析过程，所以限制页面的<script>总数也可以改善性能。适用于内联脚本和外部脚本。

3. 非阻塞脚本：等页面完成加载后，再加载js代码。也就是，在 window.onload 事件发出后开始下载代码。

4. defer属性或者async：支持IE4和fierfox3.5更高版本浏览器

5. 动态脚本元素：文档对象模型（DOM）允许你使用js动态创建HTML的几乎全部文档内容。

4.CSSOM（CSS Object Model）

CSSOM视图模式(CSSOM View Module)相关整理：https://www.zhangxinxu/wordpress/2011/09/cssom%E8%A7%86%E5%9B%BE%E6%A8%A1%E5%BC%8Fcssom-view-module%E7%9B%B8%E5%85%B3%E6%95%B4%E7%90%86%E4%B8%8E%E4%BB%8B%E7%BB%8D/

5.浏览器的优化策略

5.1 总览

1. 尽可能减少http请求

2. 使用CDN(内容分发网络)

3. 使用缓存策略

协商缓存：Etag/If-None-Match，Last-modify/If-Modified-Since（先响应头，后面再次请求时携带）

强制缓存（本地缓存）：Expires（http 1.0）/Cache-Control（http1.1）

4. 使用Gzip压缩

将文件放在服务器端压缩，压缩之后再进行传输，浏览器再进行解压缩，是一个重要的优化方法。

5. css放在页面最上面

避免页面出现空白或者重新渲染问题

6. 将js放在页面底部

页面的加载顺序为html,head,meta,title,style(加载样式，解析样式),link(加载外部样式表文件，解析外部样式表)，

script(加载外部脚本文件，解析外部脚本文件，执行脚本文件),body,div,img(加载外部图片)，页面初始化完毕。

7. 避免使用css表达式

8. js和css都放到外部文件引入

使用单独文件的优点：提高js和css的复用性，减少页面体积，提高了js和css的可维护性

写在页面中的优点：减少页面请求，提升页面渲染速度。

写在页面中的情况：此段代码只应用于一个页面，不经常访问的页面，脚本和样式很少。

9. 减少DNS查询

10. 最小化js和css(最大限度压缩脚本)

11. 避免重定向

用户的原始请求被重新转向到了其他请求

301(永久重定向) 与 302(临时重定向) 状态码

12. 移除重复的脚本

13. 配置实体标签(ETag)

使用特殊的字符串来标识某个请求资源版本

14. 使用ajax缓存

5.2 细分

上面的大点，可以考虑细分了说：

１、减少Http请求，优化加载速度：

a、合并文件：将多个Script合成一个文件，将多个CSS文件合成一个文件；

b、使用“雪碧图”CSS SPrites将背景图整合到一张图片中，通过坐标来实现对背景进行定位；

c、减少DOM数量。

2、CSS：

a、避免使用CSS表达式；

b、避免使用@import引入css文件，使用link形式引入；

c、在头部head中引入CSS样式表文件。因为如果把CSS文件放在底部，大部分浏览器会现下载内容，但是不能显示出来，因为CSS在最底部。

3、Javascript

a、去除重复的脚本；

b、尽量减少DOM的访问；

c、JS脚本文件在底部body之前或者之后引入；

d、将JS、CSS文件进行压缩，去除中间的换行和空格等无用内容，减小体积，且注意JS和CSS文件的个数。

4、图片部分

a、优化图片

b、不要使用HTML缩放图片，即不要在HTML中对图片进行设置高度和宽度；

c、使用小且可以存储的favicon.ico图标

5、cookies

a、给cookies减肥；

b、清除不必要的cookies

c、保证cookies尽量小。

6.客户端检测

（一）能力检测（也称为特性检测）

能力检测是识别浏览器的能力，只需要确定浏览器支持特定的能力，就能给出解决方案

通用方法检测默写方法和属性是否可用或者存在，其次利用typeof进行能力检测

（二）怪癖检测

也就是bug检测，如果有bug就先修复

（三）用户代理检测

navigator.useAgent属性访问，可以获取用户代理字符串。这种方法优先级最靠后，因为可以欺骗。

7.浏览器兼容问题

这个博客很多，我当时看的书，记在笔记本子上了，读着可自行搜一搜。

8.浏览器内核

答：

gecko

webkit

trident

blink

presto（已经凉了，opera改用了blink）

9.浏览器多线程和JS单线程

《从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理》：https://segmentfault/a/1190000012925872很好的博文，介绍的很详细

W3C在HTML标准中规定，规定要求setTimeout中低于4ms的时间间隔算为4ms。

本文标签： 知识点 浏览器 大全