渲染机制/页面性能/错误监控

渲染机制

什么是doctype及作用
必须按规范来说

浏览器渲染过程
dom + cssom -> reder tree -> layout

重排reflow

定义：DOM结构中的各个元素都有自己的盒子(模型)，这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置，这个位置称之为reflow。
触发：
当你增加、删除、修改DOM结点时，会导致reflow或repaint.
当你移动DOM的位置，或搞个动画的时候
修改CSS样式的时候
当调整窗口大小，或者滚动的时候有可能会触发。
重绘repaint
定义：
当各种盒子的位置、大小以及其他属性，例如颜色、字体大小都确定下来后，浏览器于是把这些元素都按照各自的特性绘制一遍，于是页面的内容出现了。只要页面显示的发生了变化都是repaint。
触发repaint：
DOM改动
CSS改动
避免发生repaint：
把所有的DOM都添加到document fragment里面。
布局layout

*js运行机制

......有机会还需要继续了解
题目一：

console.log(1);
setTimeout(function(){
   console.log(2);
},0);
console.log(3);
//1，3，2
//setTimeout是异步任务，所以不会和console.log同步执行。所以当执行完console.log(2)后再执行setTimeout,0秒后输出3.
//最后的打印顺序是什么？这道题需要了解js运行机制

js是单线程：所谓单线程就是同一时间只能做一件事，

任务队列：

同步任务和异步任务：
setTimeout、 setInterver是异步任务，而console.log是同步任务。

题目二：

console.log('A');
while(true){
}
console.log('B');
//输出A
//因为while会不断循环导致console.log(B)无法执行。

题目三：

console.log('A');
setTimeout(function(){
   console.log(B);
},0);
while(1){
}
//1是true,0是false.

题目四：

for(var i=0;i<4;i++){
setTimeout(function(){
   console.log(i);
},1000);
}
//4，4，4，4
//异步队列执行时间
//异步任务的放入时间和执行时间
//和上面几题是两个概念

如何理解js单线程
在一个时间内只能干一件事

什么是任务队列
任务队列有同步任务和异步任务.

什么是Event Loop(事件循环)

什么时候会开启异步任务：
setTimeout和setInterval
DOM事件：需要用到addEventlistener,当触发某个事件，放入异步任务队列中
ES6中的promise

理解哪些语句加入到异步队列

*理解语句放入异步队列的时机

页面性能

提升页面性能的方法有哪些

1. 资源压缩合并，减少HTTP请求.(把资源文件变小)
2. 非核心代码异步加载->异步加载的方式->异步加载的区别
3. *利用浏览器缓存->缓存的分类->缓存原理
4. 使用CDN(属于网络优化)
5. 预解析DNS

<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//host_name_to_prefetch.com">
注：当一次打开时，浏览器缓存起不到任何作用，但是使用CDN可以起到作用。

2)异步加载

异步加载的方式：

1. 动态脚本加载(动态创建结点)
2. defer
3. async

异步加载的区别:

1. defer在HTML解析之后才会执行，如果是多个，按照加载顺序依次执行。
2. async是在加载完之后立即执行，如果是多个，执行顺序和加载顺序无关。

3)浏览器缓存

浏览器缓存的分类
强缓存：

协商缓存：

错误监控

前端错误的分类：

1. 即时运行错误：代码错误
2. 资源加载错误

每种错误的捕获方式
即时错误的捕获方式：

1. try...catch
2. window.onerror

资源加载错误：

1. object.onerror
2. performance.getEntries()
3. Error事件捕获

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

1. 在script标签添加crossorigin属性
2. 设置js资源响应头Access-Control-Allow-Origin:*

上报错误的基本原理

1. 采用Ajax通信的方式上报
2. 利用Image对象上报