已在页面完全加载前强制排版_前端面试整理 --- 页面性能和错误监控篇

最新推荐文章于 2024-04-26 20:04:31 发布

weixin_39866874

最新推荐文章于 2024-04-26 20:04:31 发布

阅读量211

点赞数

文章标签：已在页面完全加载前强制排版页面错误!请稍后再试～

这一章主要来分析一下常见的页面性能方法和错误监控，接下来将从下面几种提高页面性能方法展开

资源压缩合并，减少HTTP请求（这块接下来不讲解，大家自行理解）
非核心代码的异步加载 --> 异步加载的方式 --> 异步加载的区别
利用浏览器缓存 --> 缓存的分类 --> 缓存的原理(重)
使用CDN
- 将静态资源放到CDN上，提升加载速度
预解析DNS
- <meta http-equiv="x-dns-prefetch-control" content="on"> // 强制打开DNS预解析
- <link rel="dns-prefetch" href=""> //css预解析，这有一个小的注意点：就是a标志默认是开启预解析的

异步加载的方式
- 动态脚本加载
- defer
- async
异步加载的区别
- 动态脚本加载 --- 用js动态的创建js然后加载到body中
- defer --- 在html 解析完成之后才会执行，如果是多个，按照加载顺序依次执行
- async --- 在加载完之后立即执行，如果是多个，执行顺序和加载顺序无关

缓存的分类
- 强缓存 --- 浏览器不会像服务器发送任何请求，直接从本地缓存中读取文件并返回Status Code: 200 OK
  - Expires --- 过期时间(绝对时间)
  - Cache-Control --- 过期时间(相对时间) --- 优先级比Expires高

- 协商缓存 --- 向服务器发送请求，服务器会根据这个请求的request header的一些参数来判断是否命中协商缓存，如果命中，则返回304状态码并带上新的response header通知浏览器从缓存中读取资源；
  - Last-Modified --- 上一次的修改时间，这个是服务器下发的
  - If-Modified-Since --- 同上，但是这个是在请求头发送给服务器的
  - Etag --- 服务器下发的一个hash值，上述Last-Modified 可能会存在一个问题就是修改时间变了，但是内容并没有变化，Etag就是为了解决这个问题的
  - If-None-Match --- 当过了强缓存的时间，客户端再向服务端请求资源的时候，HTTP的header中会带这个参数，值就是Etag的值，询问是否命中缓存

错误监控的分类
- 即时运行错误：代码错误
- 资源加载错误
错误的捕获方式
- 即时运行错误
  - try ... catch
  - window.onerror
- 资源加载错误
  - object.onerror
  - performance.getEntries() --- 获取到所以已资源的加载时长
    - 举例：比如咱们想看一下当前的这个页面的有哪些图片资源未加载成功，那么可以先通过preformance.getEntries()或者到已加载资源文件，再通过document.getElementsByTagName('img')获取当前界面的img信息，然后进行对比，就可以知道哪些资源加载失败啦

通过performance.getEntries() 获取到已加载资源信息

通过document.getElementsByTagName('img')获取当前界面的img信息

- - Error事件捕获
    - 可以通过事件捕获的方式获取到，详情看下图代码，一个注意点就是代码中一定是捕获，冒泡的方式就拿不到，大家可以自行尝试一下

事件捕获

拿到资源加载错误信息

- 如何处理
  - 第一步：在客户端script标签中添加crossorign 属性
  - 第二步：在服务端设置js响应头：Access-Control-Allow-Orign: *
上报错误的原理
- 使用ajax进行错误上报，很少用这种方式，这个不多说
- 使用Image对象进行错误上报
  - (new Image).src="上报地址"，看下图

一行代码就可以完美解决，漂亮

上报请求也可以成功发送，perfect

OK！上述就是今天想给大家同步的，欢迎大家砸砖～·～

weixin_39866874

关注