页面性能以及错误监控

页面性能

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

  • 资源压缩合并,减少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'

你可能感兴趣的:(页面性能以及错误监控)