渲染机制

Date：Mar 13, 2018 Author：Helene

本文章采用 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可。转载请注明来自Helene的博客

面试技巧

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

渲染机制

什么是DOCTYPE及作用

DTD(document type definition,文档类型定义)是一系列的语法规则，用来定义XML或（X）HTML的文件类型。浏览器会使用它来判断文档类型，
决定使用何种协议来解析，以及切换浏览器模式

DOCTYPE是用来声明文档类型和DTD规范的，一个主要的用途便是文件的合法性验证。如果文件代码不合法，那么浏览器解析时便会出一些差错

DOCTYPE怎么写

HTML5
<!DOCTYPE html>

HTML 4.01 严格模式（该DTD包含所有HTML元素和属性，但不包括展示性的和弃用的元素（比如font））

HTML 4.01 传统模式（该DTD包含所有HTML元素和属性，包括展示性的和弃用的元素（比如font））

浏览器渲染过程

重排Reflow

重排Reflow定义
DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow
触发Reflow
当你增加、删除、修改DOM节点时，会导致Reflow或Repaint
当你移动DOM的位置，或是搞个动画的时候
当你修改CSS样式的时候
当你Resize窗口的时候（移动端没这个问题），或是滚动的时候
当你修改网页的默认字体时

重绘Repaint

重绘Repaint定义
当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器于是就把这些元素都按照各自的特性都绘制了一遍，于是页面的内容出现了，这个过程称为repaint
触发Repaint
DOM改动
CSS改动
如何最小程度触发Repaint
多次节点修改合成一次执行

布局Layout

JS运行机制

JS运行机制代码题目1

console.log(1)
setTimeout(function(){
    console.log(2)
},0)
console.log(3)

以上执行结果是1、3、2
以上引出概念：
1、JS是单线程的，所谓单线程就是JS在同一时间只能做一件事，这个就叫做单线程
2、任务队列，任务队列分为同步任务和异步任务

setTimeout，setinterval是异步任务，console.log在js运行中的语句叫做同步任务，单线程里面异步任务要挂起，先不执行，同步任务执行完毕再执行异步任务
JS运行机制优先执行同步任务再执行异步任务

JS运行机制代码题目2

console.log('A')
while(true){

}
console.log('B')

执行结果为A

JS运行机制代码题目3

for(var i = 0;i < 4;i++){
    setTimeout(function(){
        console.log(i)
    },1000)
}

执行结果为4个4

异步任务的放入时间和执行时间

如何理解JS的单线程

一个时间之内JS只能干一件事情，这就是JS的单线程

什么是任务队列

任务队列分为同步任务和异步任务

异步任务

setTimeout和setinterval
DOM事件
ES6种的Promise

要知道哪些语句会放入异步任务队列 , 语句放入异步任务队列的事件，JS运行机制对工作中日常开发非常重要，一定要理解

页面性能

题目：提升页面性能的方法有哪些？

1、资源压缩合并，减少HTTP请求
2、非核心代码异步加载===》异步加载的方式===》异步加载的区别
3、利用浏览器缓存===》缓存的分类===》缓存的原理
4、使用CDN
5、预解析DNS

    <meta http-equiv="x-dns-prefetch-control" content="on">页面中所有a标签在一些高级浏览器里面默认是打开了DNS预解析的，也就是说不用加下面这句话a标签也可以做到DNS预解析，但是如果页面是https协议开头的，很多浏览器是默认关闭DNS预解析的，前面这句话就是强制打开DNS预解析的

    <link rel="dns-prefetch" href="//host_name_to_prefetch.com"> DNS预解析，有的面试官会问，从浏览器输入URL开始到页面真正的渲染完，中间发生了哪些环节，其中第一步做的就是DNS解析，那么提升页面性能尤其当页面中设计到多个域名的时候，DNS解析效果是非常明显的，那么这里优化的点就是使用前面这句话来实现预解析

异步加载的方式

 1）动态脚本加载（就是动态创建节点） 2）defer 3)async（2、3就是直接在script上加上这个属性就能完成异步加载）

异步加载的区别

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

浏览器缓存

1)强缓存(在事件范围内，不会和服务器进行通信，就是问都不问，从浏览器副本拿来就给页面用了)

Expires （服务器的时间做比较）

Cache-Control （本地的时间做比较）

如果以上两个时间都下发了，记住以后者为准，这是规定

2)协商缓存（就是浏览器发现本地有副本，但是不确定使用还是不使用，向服务器问一下就是协商缓存）

Last-Modified 上次修改的时间（服务器下发的）
If-Modified-Since
Etag
If-None-Match

错误监控

前端错误的分类

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

错误的捕获方式

即时运行错误的捕获方式

1）try..catch 2)window.onerror（这是属性DOM0级，也可以使用addeventlistenerDOM2级）

资源加载错误的捕获方式
1)object.onerror 2)performance.getEntries() 3)Error事件捕获 （资源加载错误不会触发冒泡）

延伸：跨域的js运行错误可以捕获吗，错误提示什么，应该怎么处理？
1、在script标签增加crossorigin属性
2、设置js资源响应头Access-Control-Allow-Origin:*

上报错误的基本原理

1、采用Ajax通信的方式上报（说出这种不算及格）
2、利用Image对象上报（说出这点才对）
(new Image()).src='http://baidu.com/tesjk?r=tksjk'