渲染机制
什么是DOCTYPE及作用
DTD(document type definition,文档类型定义)是一系列的语法规则， 用来定义XML或(X)HTML的文件类型。浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式 DOCTYPE是用来声明文档类型和DTD规范的，一个主要的用途便是文件的合法性验证。 如果文件代码不合法，name浏览器解析时便会出错
常见的DOCTYPE HTML5
HTML 4.01 Strict (严格模式，不包括暂时性和弃用的元素)
HTML 4.01 Transitional （传统模式）
浏览器渲染过程
重排Reflow
定义：DOM结构中的各个元素都有自己的盒子(模型)，这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow 触发：
- 增加、删除、修改DOM节点时，会导致Reflow或Repaint
- 移动DOM的位置，或是动画
- 修改CSS样式
- Resize窗口的时候(移动端没有)，或者是滚动的时候
- 修改网页的默认字体时
重绘Repaint
定义：当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按照 各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为Repaint 触发：DOM改动、CSS改动 如何减少：多次节点操作一次性完成
布局Layout
提升页面性能
- 资源压缩合并，减少HTTP请求
- 非核心代码异步加载- 异步加载的方式 - 异步加载的区别
- 利用浏览器缓存 - 缓存的分类 - 缓存的原理
- 使用CDN
- 预解析DNS
错误监控
前端错误的分类
即时运行错误：代码错误、资源加载错误
错误的捕获方式
即时运行错误的捕获方式： 1.try...catch 2.window.onerror 资源加载错误 1.object.onerror 2.performance.getEntries() 3.Error事件捕获
跨域js捕获错误
- 在script标签增加crossorigin属性
- 设置js资源响应头Access-Control-Allow-Aorgin:*
上报错误
- 采用Ajax通信的方式上报
- 利用Image对象上报 (new Image()).src = 'http://baidu.com/testjk?r=sdsa'