页面性能
提升页面性能的方法有哪些
- 资源压缩合并，减少HTTP请求
- 非核心代码异步加载
- 利用浏览器缓存
- 使用CDN
- 预解析DNS
//开启DNS预解析，因为在一些情况下a连接没有默认开启DNS预解析
<meta http-equiv="x-dns-prefetch-control" content="on" />
//设置dns-prefetch:
<link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />
异步加载
异步加载的方式
- 动态脚本加载
动态创建一个script标签添加到HTML - defer
- async
异步加载的区别
- defer是在HTML解析完之后才执行，如果是多个，按照加载顺序执行
- async是在加载完之后立刻执行，执行顺序和加载顺序无关
浏览器缓存
强缓存
指的是不发送请求直接使用该缓存
- Expires： TUE,5 FEB 2019, 22:55:00 GMT 绝对时间，会根据本地时间来判断缓存是否过期，但是本地时间跟服务器时间可能不一样，可能会出现偏差
- Cache-Control： max-age = 3600 相对时间 从拿到文件起开始算
协商缓存
指的是发送请求确定是否使用缓存
- 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
- Etag/If-None-Match
这两个值是由服务器生成的每个资源的唯一标识字符串，只要资源有变化就这个值就会改变；其判断过程与Last-Modified/If-Modified-Since类似，与Last-Modified不一样的是，当服务器返回304 Not Modified的响应时，由于ETag重新生成过，response header中还会把这个ETag返回，即使这个ETag跟之前的没有变化。
错误监控
前端错误的分类
- 即时运行错误： 代码错误
- 资源加载错误 CSS文件，图片等资源文件
错误的捕获方式
- 即时运行错误
- try...catch...
- window.onerror
- 资源加载错误
- object.onerror
- performance.getEntries()
- Error事件捕获
- 延伸：跨域JS可否捕获到错误
- 可以，但是只能获得Script error，没有详细错误信息。
- 如何获取详细错误信息
- 前端： script标签添加crossorigin属性
- 服务端： 响应头添加 Access-Control-Allow-Origin: *
上报错误的原理
- 采用Ajax通信的方式上报
- 采用image对象上报
(new Image()).scr = 'http://www.baidu.com'