渲染机制

DOCTYPE

  • DOCTYPE是用来声明文档类型的，告诉浏览器使用哪一种DTD规范的文档类型。
  • DTD(document type definition, 文档类型定义) 是一些列的语法规则，用来定义HTML文件类型。用来给浏览器判断文档类型。

声明文档类型

  • HTML5
  • HTML 4.01 有宽松模式和严格模式(不包括展示性和弃用的元素)

浏览器渲染过程

  • HTML通过HTML解析转化成DOM树

  • Style样式通过CSS解析转化成Style规则image.png

  • DOM树和Style规则结合成渲染树(Render Tree)

  • 然后渲染树通过layout 计算出各元素在浏览器上的宽高颜色位置等属性，最后在浏览器上进行绘制。

重排Reflow

  • DOM元素的盒模型需要浏览器根据样式计算结果将他们绘制在页面上，这个过程就是reflow

触发Reflow 条件

  • 增加、删除、修改DOM节点时，会触发Reflow 或 Repaint
  • 移动DOM节点、动画
  • 修改CSS样式
  • resize 窗口、滚动页面
  • 修改页面默认字体

重绘Repaint

  • 当DOM元素盒模型的各种属性确定计算结果后，浏览器根据这些元素的样式属性绘制一遍出现在页面上的过程就是repaint

触发Repaint

  • DOM改动
  • CSS改动

减少Reflow Repaint的开销

  • DOM拼接后一次append 到页面上(
  • 列表
    • )

页面性能优化

打开浏览器，在地址栏输入 url 直到页面展现，整个过程发生了什么？

  • DNS(Domain Name System)域名系统预解析(应用层)，输入url后,浏览器会进行DNS解析出, 对应服务器的ip地址.
  • 浏览器会将用户输入的请求信息打包发送给nginx服务器.
  • 服务器会分析用户的请求寻找处理请求的对应文件，发送给浏览器.
  • 最后浏览器接收服务器的响应,解析并渲染呈现给用户。

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

  • 资源压缩合并，减少HTTP请求
  • 非核心代码异步加载
  • 利用浏览器缓存
  • 使用CDN
  • 预解析DNS

非核心代码异步加载

  • 动态脚本加载
    动态创建<script>标签添加到html 文档中内
  • <script> 标签的defer 属性
    在html 文档解析完执行，按加载顺序依次执行
  • <script> 标签的async 属性
    在html 文档解析完执行，加载顺序与执行顺序无关

利用浏览器缓存

  • 强缓存:
    客户端无需再次请求服务端，客户端直接根据缓存条件决定是否使用缓存资源
响应header 描述 常用响应返回内容 推荐 特点 缺点 场景
Cache-Control 在多少秒内进行缓存 public, max-age=秒 是 固定时间 客户端服务端时间可能不一致
Expires 在此时间前进行缓存 格林威治时间 否 绝对时间 客户端服务端时间可能不一致 兼容http1.0
  • 协商缓存:
    客户端需请求服务端进行比较缓存条件，符合条件则返回304使用缓存资源
响应header 请求header 描述 常用响应返回内容 推荐 特点 缺点 场景
ETag If-None-Match 固定字符串 md5 hash值 是 检测文件完整性
Last-Modified If-Modified-Since 在某时间后没再更改 格林威治时间 否 浏览器根据返回的时间自己决定缓存 浏览器差异

DNS 预解析

1
2
3
// 强制打开a 标签的DNS 预解析，https 默认关闭a 标签的DNS 预解析
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefatch" href="url">

前端错误监控

  • 保证产品质量
  • 即时运行错误(代码错误)收集
  • 资源加载错误收集

即时运行错误的捕获方式

1
2
3
4
5
6
// 代码块使用错误捕获
try {} catch (e) {}

// 使用window对象错误事件捕获
window.onerror = function(e) {}
window.addEventListener('error', function(e) {})

资源加载错误

<img>等资源加载错误不会冒泡，window.onerror 无法捕获到标签资源加载的错误

  • dom 捕获

    1
    2
    3
    elScript.onerror = function (e){}
    elImg.onerror = function (e){}
    ...

  • 跨域js 错误捕获

    js 文件资源响应头设置Access-Control-Allow-Origin: *

script 标签增加crossorigin 属性
<script crossorigin src='url'></script>

  • 获取成功加载的资源
    1
    2
    performance.getEntries()
    performance.getEntries().map(item => item.name) // 获取所有成功资源加载地址
  • 通过Error 事件捕获
    1
    2
    3
    4
    window.addEventListener('error', function(e) {
      console.log('捕获', e) // 将会捕获到资源加载错误
    }, true)
    <script src='错误url'></script>

上报错误的基本原理

  • 采用Ajax 通信方式上报
  • 利用Image 对象上报
1
2
3
<script>
  new Image().src = 'url?k=val'  // 会发送一个请求用于上报
</script>

参考