前端面试知识总结2

这个是本次的二面的知识点，分开整理的，上一个在这里

二面

面试技巧渲染机制 JS运行机制页面性能错误监控

面试技巧

知识面要广：一面考察的是基础知识，二面就是对整体知识宽度的积累了

理解要深刻：二面是细致的考察，很深入的，所以，要仔细的研究

内心要诚实：还是一个道理，不要不懂装懂

态度要谦虚：不能怒怼面试老师，不然你懂的

回答要灵活：遇到不会的问题，要转个弯把他回答出来，老师，我虽然这方面不懂，但是我知道某某某

要学会赞美：多夸奖老师，哎，这个问题我不会额，老师您的知识面真广，我要向您学习

渲染机制

题目1：什么是DOCTYPE,什么是DTD

　　DTD：文档类型定义，告诉浏览器，我是什么文档类型，浏览器应该选择什么样子的引擎来解析

　　DOCTYPE：用来生命文档类型和DTD规范，告诉浏览器，当前的文档中包含的是哪一个DTD，也就是哪一个文档类型

　　扩展：常见的DOCTYPE有哪些？

　　　　1）HTML5 <!DOCTYPE html>

　　　　2）HTML4 不需要写出来具体是怎么写的，因为很长的一大串，要掌握的知识点，

　　　　　 HTML4有一个严格模式和传统模式，他们的区别是

　　　　　 HTML4 Strict 包含所有HTML元素和属性，但是不包括展示性的元素和已经弃用的元素，如font

题目2：浏览器的渲染过程

　　html解析成为DOM tree，CSS解析成为CSSOM tree，两者相互结合，生成Render tree，这个Render tree不包含具体的内容，也不知道该放置的位置，比如一个div元素，现在不知道该把这个div放到屏幕的什么地方，通过浏览器的Layout，就能计算出具体的显示位置，然后是浏览器的Painting操作，最后Display显示出来

题目3：重排Reflow

　　定义：DOM结构中，每一个的元素都有自己的盒子模型，这些都需要浏览器根据样式来计算，并计算结果将元素放到他该出现的位置，这个过程就是Reflow
　　扩展：什么时候会触发reflow

　　　　1 ) 增加，删除，修改DOM节点

　　　　2）移动dom的位置，或者是动画显示

　　　　3）修改css样式，比如，width,display等熟悉

　　　　4）resize窗口的时候，或者是滚动的时候

　　　　5）修改网页的默认字体（这种做法不推荐，前面都是不可避免的，这个最好不要修改）
题目4：重绘Repaint

　　定义：当各种盒子的位置，大小，以及其他的属性都确定下来之后，浏览器按照这些元素各自的特点绘制一遍，于是页面内容出现了，这个过程叫做Repaint
　　扩展：什么时候或触发Repaint

　　　　DOM 改变 CSS改变

题目5：布局Layout

JS运行机制

题目1：如何理解JS的单线程
题目2：什么是任务队列
题目3：什么是Event Loop

题目4：有哪些异步任务

扩展：理解哪些语句会放入异步队列，理解语句放入异步队列的时机以及语句执行的时间

页面性能

题目：怎么提升页面性能

从两个方面入手，一是加载页面和静态资源，二是页面的渲染

1：加载页面和静态资源

　　1）资源的合并压缩，减少HTTP请求

　　2）资源的缓存

　　3）CDN

　　4）SSR后端渲染

　　5）预解析DNS

2：页面的渲染

　　1）css放在head标签里面，js标签放在页面最后面

　　2）懒加载

　　3）减少DOM的查询

　　4）减少DOM的操作

　　5）事件节流

　　6）尽早执行操作

　　7）异步加载代码

错误监控

问法1：如何监测JS错误（开门见山式）

问法2：如何保证你的产品质量（拐弯抹角式）

知识点

1：前端错误的分类

　　即时运行错误

　　资源加载错误

2：错误的捕获方式

　　即时运行错误 1) try catch 2) window.onerror

　　资源加载错误 1) object.onerror

　　延伸：跨域的JS运行错误可以捕获吗，错误提示是什么，应该怎么处理

3：上报错误的基本原理