JS运行机制、浏览器缓存

一、渲染机制

1. DCOTYPE及作用

DTD：告诉浏览器是什么文档类型（XML/HTML），决定哪种协议来解析 及切换浏览器模式
DCOTYPE：用来声明文档类型和DTD规范，一个主要用途是文件的合法性验证。若文件代码不合法，那么浏览器解析时便会出错。
DCOTYPE类型和写法：

2. 浏览器渲染过程

3. 重拍Reflow

定义：DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow
触发Reflow：

• 当删除、增加、修改DOM结点时，会导致Reflow或Repaint
• 当移动DOM的位置，或是搞个动画的时候
• 当修改CSS样式的时候
• 当Resize窗口的时候（移动端没有这个问题），或是滚动的时候
• 当修改网页默认字体的时候

4. 重绘Repaint

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

• DOM改动
• CSS改动
  如何减少repaint的频率：
  通过document.frame将需要添加的结点都放到这里边， 减少添加结点的次数

5. 布局Layout

二、JS运行机制

js是单线程的，即js在同一时间只能做一件事。
Event Loop(事件循环)：
同步任务放在运行栈中，异步任务不会放在运行栈中，而是拿走，同步任务执行完后，时间到了，定时器会把任务放到异步任务中去，js引擎发现运行栈中的同步任务执行完毕，就会去异步队列中的异步任务放到运行栈中，变成执行同步任务。
异步任务开启：

• setTimeout和setInterval
• DOM事件
• ES6中的Promise

三、页面性能

1. 提升页面性能的方法

• 资源压缩合并，减少HTTP请求
• 非核心代码异步加载
• 利用浏览器缓存
• 使用CDN
• 预解析DNS
  
  页面中的所有a标签在高级浏览器中默认打开了DNS预解析，但如果页面是https开头的，很多浏览器是默认关闭DNS预解析的。第一个的作用是强制打开DNS预解析。

2. 异步加载

异步加载的方式：

• 动态脚本加载（动态创建script标签添加到head中）
• defer（为script标签添加defer属性）
• async（为script标签添加async属性）

异步加载的区别：

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

3. 浏览器缓存

1）缓存分类：
强缓存： 直接从浏览器拿来用，不请求服务器获取文件
HTTP协议头：

• Expires ：Expires:Thu,21 Jan 2022 23:59:59 GMT (过期时间：value值表示服务器端的绝对时间，会与客户端时间有偏差)
• Cache-Control ：Cache-Control:max-age=3600 (过期时间：value值表示客户端相对时间，表示客户端在得到资源之后，3600秒内都会使用浏览器缓存文件)

协商缓存：
HTTP协议头：

• Last-Modifued If-Modified-Since：Last-Modified:hu,21 Jan 2022 23:59:59 GMT (上次缓存时间,当时间过期了，服务器再次请求时会加If-Modified-Since的value值,值和Last-Modified的相同)
• Etag If-None-Match（当过了强缓存的时间，浏览器会根据If-None-Match的value值询问）

四、错误监控

1. 前端错误的分类：

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

2. 错误的捕获方式：

1) 即时运行错误：

• try…catch
• window.onerror

2) 资源加载错误：

• object.onerror
• performance.getEntries()
• Error事件捕获

注意：跨域的js运行错误也可以捕获，错误提示：Script error
处理手段：
1）在script标签增加crossorigin属性
2）设置js资源响应头Access-Control-Origin:*

3. 上报错误的基本原理：

• 采用Ajax通信的方式上报 （一般不用）
• 利用Image对象上报（用的多）

(new Image()).src = '路径及数据';