渲染机制
DOCTYPE
- DOCTYPE是用来声明文档类型的，告诉浏览器使用哪一种DTD规范的文档类型。
- DTD(document type definition, 文档类型定义) 是一些列的语法规则，用来定义HTML文件类型。用来给浏览器判断文档类型。
声明文档类型
- HTML5 <!DOCTYPE html>
- 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 到页面上(<li>列表</li>)
页面性能优化
打开浏览器，在地址栏输入 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 预解析
// 强制打开a 标签的DNS 预解析，https 默认关闭a 标签的DNS 预解析
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefatch" href="url">
前端错误监控
- 保证产品质量
- 即时运行错误(代码错误)收集
- 资源加载错误收集
即时运行错误的捕获方式
// 代码块使用错误捕获
try {} catch (e) {}
// 使用window对象错误事件捕获
window.onerror = function(e) {}
window.addEventListener('error', function(e) {})
资源加载错误
<img>等资源加载错误不会冒泡，window.onerror 无法捕获到标签资源加载的错误
- dom 捕获
elScript.onerror = function (e){}
elImg.onerror = function (e){}
...
- 跨域js 错误捕获
js 文件资源响应头设置
Access-Control-Allow-Origin: *
script 标签增加crossorigin 属性
<script crossorigin src='url'></script>
- 获取成功加载的资源
performance.getEntries()
performance.getEntries().map(item => item.name) // 获取所有成功资源加载地址
- 通过Error 事件捕获
window.addEventListener('error', function(e) {
console.log('捕获', e) // 将会捕获到资源加载错误
}, true)
<script src='错误url'></script>
上报错误的基本原理
- 采用Ajax 通信方式上报
- 利用Image 对象上报
<script>
new Image().src = 'url?k=val' // 会发送一个请求用于上报
</script>
