页面性能以及错误监控

页面性能

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

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

//开启DNS预解析，因为在一些情况下a连接没有默认开启DNS预解析

//设置dns-prefetch:

异步加载

异步加载的方式

• 动态脚本加载
  动态创建一个script标签添加到HTML
• defer
• async

异步加载的区别

• defer是在HTML解析完之后才执行，如果是多个，按照加载顺序执行
• async是在加载完之后立刻执行，执行顺序和加载顺序无关

浏览器缓存

强缓存

指的是不发送请求直接使用该缓存

1. Expires： TUE,5 FEB 2019, 22:55:00 GMT 绝对时间，会根据本地时间来判断缓存是否过期，但是本地时间跟服务器时间可能不一样，可能会出现偏差
2. Cache-Control： max-age = 3600 相对时间 从拿到文件起开始算

协商缓存

指的是发送请求确定是否使用缓存

1. Last-Modified/If-Modified-Since
   二者的值都是GMT格式的时间字符串，具体过程：
   • 浏览器第一次跟服务器请求一个资源，服务器在返回这个资源的同时，在respone的header加上Last-Modified的header，这个header表示这个资源在服务器上的最后修改时间
   • 浏览器再次跟服务器请求这个资源时，在request的header上加上If-Modified-Since的header，这个header的值就是上一次请求时返回的Last-Modified的值
   • 服务器再次收到资源请求时，根据浏览器传过来If-Modified-Since和资源在服务器上的最后修改时间判断资源是否有变化，如果没有变化则返回304 Not Modified，但是不会返回资源内容；如果有变化，就正常返回资源内容。当服务器返回304 Not Modified的响应时，response header中不会再添加Last-Modified的header，因为既然资源没有变化，那么Last-Modified也就不会改变，这是服务器返回304时的response header
2. Etag/If-None-Match
   这两个值是由服务器生成的每个资源的唯一标识字符串，只要资源有变化就这个值就会改变；其判断过程与Last-Modified/If-Modified-Since类似，与Last-Modified不一样的是，当服务器返回304 Not Modified的响应时，由于ETag重新生成过，response header中还会把这个ETag返回，即使这个ETag跟之前的没有变化。

错误监控

前端错误的分类

1. 即时运行错误： 代码错误
2. 资源加载错误 CSS文件，图片等资源文件

错误的捕获方式

1. 即时运行错误
   • try...catch...
   • window.onerror
2. 资源加载错误
   • object.onerror
   • performance.getEntries()
   • Error事件捕获
3. 延伸：跨域JS可否捕获到错误
   • 可以，但是只能获得Script error，没有详细错误信息。
   • 如何获取详细错误信息
     1. 前端： script标签添加crossorigin属性
     2. 服务端： 响应头添加 Access-Control-Allow-Origin: *

上报错误的原理

• 采用Ajax通信的方式上报
• 采用image对象上报

(new Image()).scr = 'http://www.baidu.com'