前端面试知识总结2
这个是本次的二面的知识点,分开整理的,上一个在这里
二面
面试技巧 渲染机制 JS运行机制 页面性能 错误监控
面试技巧
知识面要广:一面考察的是基础知识,二面就是对整体知识宽度的积累了
理解要深刻 :二面是细致的考察,很深入的,所以,要仔细的研究
内心要诚实 :还是一个道理,不要不懂装懂
态度要谦虚 :不能怒怼面试老师,不然你懂的
回答要灵活 :遇到不会的问题,要转个弯把他回答出来,老师,我虽然这方面不懂,但是我知道某某某
要学会赞美:多夸奖老师,哎,这个问题我不会额,老师您的知识面真广,我要向您学习
渲染机制
题目1:什么是DOCTYPE,什么是DTD
DTD:文档类型定义,告诉浏览器,我是什么文档类型,浏览器应该选择什么样子的引擎来解析
DOCTYPE:用来生命文档类型和DTD规范,告诉浏览器,当前的文档中包含的是哪一个DTD,也就是哪一个文档类型
扩展:常见的DOCTYPE有哪些?
1)HTML5 <!DOCTYPE html>
2)HTML4 不需要写出来具体是怎么写的,因为很长的一大串,要掌握的知识点,
HTML4有一个严格模式和传统模式,他们的区别是
HTML4 Strict 包含所有HTML元素和属性,但是不包括展示性的元素和已经弃用的元素,如font
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
扩展:什么时候会触发reflow
1 ) 增加,删除,修改DOM节点
2)移动dom的位置,或者是动画显示
3)修改css样式,比如,width,display等熟悉
4)resize窗口的时候,或者是滚动的时候
5)修改网页的默认字体(这种做法不推荐,前面都是不可避免的,这个最好不要修改)
题目4:重绘Repaint
题目4:重绘Repaint
定义:当各种盒子的位置,大小,以及其他的属性都确定下来之后,浏览器按照这些元素各自的特点绘制一遍,于是页面内容出现了,这个过程叫做Repaint
扩展:什么时候或触发Repaint
扩展:什么时候或触发Repaint
DOM 改变 CSS改变
题目5:布局Layout
JS运行机制
题目1:如何理解JS的单线程
题目2:什么是任务队列
题目3: 什么是Event Loop
题目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:上报错误的基本原理