前端知识点串讲-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 秒后放到异步队列中,如果这时异步队列中有其他的任务在排队,那不是会延迟执行了吗?那就是说除了运行栈可能导致延迟,任务队列也有肯能导致延迟了?

页面性能

题目:提升页面性能的方法有哪些?

  1. 资源压缩合并,减少 HTTP 请求
  2. 非核心代码异步加载——► 异步加载的方式———► 异步加载的区别
  3. 利用浏览器缓存——► 缓存的分类———-► 缓存的原理
  4. 使用 CDN
  5. 预解析 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标签,页面中必须有正常的引用外部jsscript标签才有用,不然不起作用,和没标记一样,并不会异步加载和执行,也是在 DOM 解析完后才开始加载。
只有遇到了正常引用外部 js 的 script 标签才开始异步加载;在没遇到正常的引用外部 js 的 script 标签前是不会开始加载的。
也就是说:async的触发条件是遇到正常引用外部js的script标签;(遇到内嵌的script标签没用)
比如这个例子,如果没有引用 main.js,则标记的两个 async 也是最后才加载执行。如果把引用 main.js 的 script 标签放到内部执行 5s 的 js 后面,async 标记的 script 也是在 5s 后和 main.js 一起开始加载

浏览器缓存

1.缓存的分类

  1. 强 缓 存
    Expires Expires:Thu, 21 Jan 2017 23:39:02 GMT
    Cache-Control Cache-Control:max-age=3600
  2. 协 商 缓 存
    Last-ModifiedIf-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 捕获吗?那是在冒泡阶段不能,但是这种错误在捕获阶段是可以的。

1
2
3
4
5
6
7
8
9
10
<script>
window.addEventListener(
"error",
function(e) {
console.log("捕获到错误了", e);
},
true, // true是捕获,false冒泡
);
</script>
<script src="//baidu.com/abc.js"></script>

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

image.png

  1. 在 script 标签增加 crossorigin 属性 —前端

  2. 设置 js 资源响应头 Access-Control-Allow-Origin:\* —服务端

上报错误的基本原理

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

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

1
2
3
4
<script>
// 错误上报方式
new Image().src = "http://baidu.com/sdfas?a=abc";
</script>
文章作者: wenmu
文章链接: http://blog.wangpengpeng.site/2020/02/20/%E5%89%8D%E7%AB%AF%E7%9F%A5%E8%AF%86%E7%82%B9%E4%B8%B2%E8%AE%B2-3/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 温木的博客
微信打赏