总纲：前端面试知识点大全
目录
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.com/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.com/a/1190000012925872很好的博文，介绍的很详细
W3C在HTML标准中规定，规定要求setTimeout中低于4ms的时间间隔算为4ms。
扫一扫
225
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
