渲染机制

什么是DOCTYPE及作用

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

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

浏览器渲染过程

重排Reflow

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

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

布局Layout

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

错误监控

错误的捕获方式

• 即时运行错误的捕获方式

1. try..catch
2. window.onerror

• 资源加载错误 object.onerror performance.getEntries() Error事件捕获
• • 延伸：跨域的js运行错误可以捕获吗，错误提示什么，应该怎么处理？

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

<top frame>
Resource interpreted as Script but transferred
错误信息：Script error.
出错文件：
出错行号：
0
出错列号：
0
错误详情：
null

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

上报错误的基本原理

1、采用Ajax通信的方式上报 2、利用lmage对象上报

<script type="text/javascript">
  (new Image()).src ='http://baidu.com/tesik?r=tksik
</script>

页面性能

题目：提升页面性能的方法有哪些？ 1、资源压缩合并，减少HTTP请求 2、非核心代码异步加载-

• 异步加载的方式

  1. 动态脚本加载
  2. defer
  3. async

• 异步加载的区别

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

3、利用浏览器缓存

• 缓存的分类
  1. 强缓存 Expires Expires:Thu, 21 Jan 2017 23:39:02 GMT Cache-Control Cache-Control:max-age=3600
  2. 协商缓存 Last-Modified If-Modified-Since Last-Modified: Wed, 26 Jan 2017 00:35:11 GMT Etag If-None-Match

缓存的原理 4、使用CDN 5、预解析DNS

<meta http-equiv="x-dns-prefetch-control" content="on">
dlink rel="dns-prefetch" href="//host_ name_to_ prefetch.com">

​ https 很多浏览器是关闭了预解析功能的，第一句就是打开预解析功能

dlink rel="dns-prefetch" href="//host_ name_to_ prefetch.com">