渲染机制、js运行机制、页面性能、错误监控

原创 小Q 随笔 面试 123阅读 2018-09-11 17:19:56 举报

知识面要广
理解要深刻
内心要诚实
态度要谦虚
回答要灵活
要学会赞美

渲染机制类

什么是doctype及作用

dtd(document type definition,文档类型定义)是一系列的语法规则,用来定义xml或者(x)html的文件类型。浏览器会使用它来判断文档类型,决定使用何种协议来解析,以及切换浏览器模式
doctype是用来声明文档类型和dtd规范的,一个主要的用途是文件的合法性验证,如果文件不合法,那浏览器解析会出错
就是告诉浏览器什么是dtd

常见的doctype有哪些

h5
<!DOCTYPE html>

HTML4.01 Strict 严格模式
该dtd包含所有html元素和属性,但不包括展示性和弃用的元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">;
HTML4.01 Transitional 传统
该dtd包含所有html元素和属性,包括展示性和弃用的元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">;

浏览器渲染过程

domtree+csstree=tender tree 交给浏览器描绘出来(渲染树)

什么是reflow
dom结构中的各个元素都有自己的盒子,这些需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置,这过程称为reflow

触发reflow

当你增加、删除、修改dom节点,会导致reflow或者repaint
当移动DOM位置、或者弄个动画
修改css样式
resize窗口的时候(移动端没有这个问题),或是滚动时候
修改网页默认字体时候

如何避免reflow

重排reflow

重绘repaint

什么是repaint

当各种盒子的位置,大小以及其他属性,例如颜色、字体大小、等确定下来后,浏览器于是便把这些元素都按照各自的特性绘制了一遍,于是页面的内容出现了,这个过程称为repaint

触发repaint

dom改动
css改动

如何减少repaint频率
创建较少的dom节点

布局layout

js运行机制

js是单线程,同一时间只能做一件事
先同步,从上到下,后异步,
console.log('a')
while(true){}
console.log('b')
就输出a,之后while一直未true,所以b永远不会被执行到,while为true一直执行会死循环,页面一直运行
for(var i=0;i<4;i++){
setTimeout(function(){
console.log(i);
},1000);
}
4(4)执行4次4
异步任务的放入时间和执行时间

如何理解js的单线程?
什么是任务队列?
同步,异步
什么是EVENT LOOP?
事件循环

异步任务
setTimeout 和setInterval
DOM事件
es6中的Promise

理解单线程概念
理解任务队列
列举event loop
理解哪些语句会放入异步任务队列
理解语句放入异步任务队列的时机

页面性能

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复