前端知识点串讲-3 | 温木的博客

渲染机制

什么是 DOCTYPE 及作用

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

简单来说：DTD 就是告诉浏览器我是什么文档类型，浏览器根据这个来决定用什么引擎来解析和渲染它。

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

大白话就是：DOCTYPE 就是直接告诉浏览器什么是 DTD 的，也就是说 DOCTYPE 通知浏览器，告诉当前的文档，包含的是哪个 DTD，也就是哪个文档类型

HTML5
HTML4.01 Strict

该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素(如：font)
HTML4.01 Transitional

该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素(如：font)

面试时，如果能说出三种及严格和宽松的区别即可，具体写法不需要记住。

浏览器渲染过程

什么是 Reflow

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

什么是重绘 Repaint

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

简而言之：把计算后的结果统统画到屏幕上
触发 Repaint
DOM 改动
CSS 改动
如何避免最小的 repaint
使用文档节点，把所有的更改最后一次添加到页面中，不要改一个提交一个

JS 运行机制

https://segmentfault.com/n/1330000013987637

教程里面说，定时器的时间是放到异步队列的时间不是执行时间，这有点不明白，如果设置 1 秒，1 秒后放到异步队列中，如果这时异步队列中有其他的任务在排队，那不是会延迟执行了吗？那就是说除了运行栈可能导致延迟，任务队列也有肯能导致延迟了？

页面性能

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

资源压缩合并，减少 HTTP 请求
非核心代码异步加载——► 异步加载的方式———► 异步加载的区别
利用浏览器缓存——► 缓存的分类———-► 缓存的原理
使用 CDN
预解析 DNS

1
2
3

// https
<meta http-equiv="x-dns-prefetch-control" content="on" />
<link rel="dns-prefetch" href="//host_name一to_prefetch.com" />

页面中的 a 标签，在高级浏览器中默认是打开了 dns 预解析的，但是如果使用的是 htpps 协议或者浏览器默认关闭 dns 预解析的，使用第一句可以强制打开 a 标签的 dns 预解析。(教程说的是 a 标签，mdn 说的是所有可点击的 url)
https://developer.mozilla.org/zh-CN/docs/Controlling_DNS_prefetching

异步加载

1.异步加载的方式

1、动态脚本加载
2、defer 这个布尔属性被设定用来通知浏览器该脚本将在文档完成解析后，触发 DOMContentLoaded 事件前执行
3、async

2.异步加载的区别

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

3.触发条件 (重点)

如果页面中有被async/defer标记的script标签，页面中必须有正常的引用外部js的script标签才有用，不然不起作用，和没标记一样，并不会异步加载和执行，也是在 DOM 解析完后才开始加载。
只有遇到了正常引用外部 js 的 script 标签才开始异步加载；在没遇到正常的引用外部 js 的 script 标签前是不会开始加载的。
也就是说：async的触发条件是遇到正常引用外部js的script标签；（遇到内嵌的script标签没用）
比如这个例子，如果没有引用 main.js，则标记的两个 async 也是最后才加载执行。如果把引用 main.js 的 script 标签放到内部执行 5s 的 js 后面，async 标记的 script 也是在 5s 后和 main.js 一起开始加载

浏览器缓存

1.缓存的分类

强缓存
Expires Expires:Thu, 21 Jan 2017 23:39:02 GMT
Cache-Control Cache-Control:max-age=3600
协商缓存
Last-Modified、If-Modified-Since
Last-Modified: Wed, 26 Jan 2017 00:35:11 GMT
Etag If-None-Match
就是咨询下服务器前端的缓存是否还能用。

错误监控

前端错误的分类

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

错误的捕获方式

1.即时运行错误：代码错误
1）try … catch
2）window.onerror 这个无法捕获资源加载错误

2.资源加载错误
1）object.onerror 这个事件不冒泡
2）performance.getEntries()
3）Error 事件捕获

上面不是说了资源加载错误不能被 window.onerror 捕获吗？那是在冒泡阶段不能，但是这种错误在捕获阶段是可以的。

<script>
  window.addEventListener(
    "error",
    function(e) {
      console.log("捕获到错误了", e);
    },
    true, // true是捕获，false冒泡
  );
</script>
<script src="//baidu.com/abc.js"></script>

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

在 script 标签增加 crossorigin 属性 —前端
设置 js 资源响应头 Access-Control-Allow-Origin:\* —服务端

上报错误的基本原理

1.采用 Ajax 的方式上报
但所有的错误监控都不使用这种方式。

2.利用 image 对象上报
都是用的这种方式。这种方式比较简单，不需要引用任何 js 库。

<script>
  // 错误上报方式
  new Image().src = "http://baidu.com/sdfas?a=abc";
</script>