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

渲染机制

什么是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对象上报