页面性能

提高页面性能的方法

https://juejin.cn/post/6844904184689475592

1. 资源压缩合并，减少http请求

2. 非核心代码异步加载->异步加载的方式->异步加载的区别

1. 异步加载的方式：

<script type="text/javascript" src="demo_async.js" async="async" 或 defer></script>

• 动态脚本加载
• defer
• async

2. 异步加载的区别：

• defer 是在html解析完之后才会执行，如果是多个，按照加载的顺序依次执行
• async 是在加载完成之后立即执行，如果是多个，执行顺序和加载顺序无关。

3. 利用浏览器缓存->缓存的分类->缓存的原理

1.缓存的分类：

• 强缓存：不用请求，直接使用缓存
  强缓存可以通过设置两种 HTTP Header 实现：Expires 和 Cache-Control。
• 协商缓存：浏览器本地有这个副本，但不确定要不要用，这时候请求浏览器要不要用这个文件，

这些都是和缓存相关的http协议头（Expires等） 深入理解浏览器的缓存机制

浏览器缓存与localStroge sessionStroge（存储方式）不是一个概念

4. 使用CDN

属于网络优化，让网络快速到达服务端把文件下下来，尤其是页面第一次打开的时候，

5. 预解析DNS

<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//host_name_to_prefetch.com">

页面中有些a标签在浏览器中默认打开了dns预解析，但是https开头的浏览器默认关闭dns预解析，所以第一句代码是强制打开a标签的dns预解析

可以一边解析js/css文件，一边网络请求下一个资源。

错误监控

1. 前端错误的分类

• 即时运行错误：代码错误
  1). try...catch
  2). wondow.onerror

• 资源加载错误 1). object.onerror
  2). performance.getEntries()
  3). Error 事件捕获

<script>
    window.addEventListener('error', function(e){
        console.log('捕获', e)
    },true)
</script>
<script src="//baidu.com/test.js" charset="utf-8"></script>

• 延申：跨域的js运行错误可以捕获吗？错误提示什么，应该怎么处理？ 能捕获到， 错误信息只能是script error 出错行号和出错列号都是0

解决办法：

1. 在script标签上增加crossorigin属性
2. 设置js资源响应投Access-Control-Allow-Origin:*

上报错误的基本原理

1. 采用Ajax通信的方式上报
2. 利用Image对象上报