前端基础重点回顾6:渲染机制、页面性能优化、错误监控

渲染机制

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

非核心代码异步加载

• 动态脚本加载
  动态创建

• 获取成功加载的资源

performance.getEntries()
performance.getEntries().map(item => item.name) // 获取所有成功资源加载地址

• 通过Error 事件捕获

window.addEventListener('error', function(e) {
  console.log('捕获', e) // 将会捕获到资源加载错误
}, true)

上报错误的基本原理

• 采用Ajax 通信方式上报

• 利用Image 对象上报

参考