服务器性能监视失败,性能优化与错误监控

性能优化

1.让资源加载更快

减小资源体积

压缩代码

减少访问次数

资源合并、SSR服务器渲染、浏览器缓存

资源合并**

//合并

SSR服务器渲染

服务器把需要的组件或页面渲染成 HTML 字符串，然后把它返回给客户端。

浏览器缓存

浏览器缓存其实就是浏览器保存通过HTTP获取的所有资源,是浏览器将网络资源存储在本地的一种行为。

浏览器缓存的分类

强缓存，2. 协商缓存

强缓存

浏览器在加载资源时，会先根据本地缓存资源的 header 中的信息判断是否命中强缓存，如果命中则直接使用缓存中的资源不会再向服务器发送请求。header 中的信息指的是 expires 和 cahe-control。

Expires:绝对时间。这个时间代表着这个资源的失效时间，在此时间之前，即命中缓存。这种方式有一个明显的缺点，由于失效时间是一个绝对时间，所以当服务器与客户端时间偏差较大时，就会导致缓存混乱。

Cache-Control：相对时间

。Cache-Control:max-age=3600，代表着资源的有效期是 3600 秒。

Cache-Control 与 Expires 可以在服务端配置同时启用，同时启用的时候 Cache-Control 优先级高。

协商缓存

当强缓存没有命中的时候，浏览器会发送一个请求到服务器，服务器根据 header 中的部分信息来判断是否命中缓存。如果命中，则返回 304 ，告诉浏览器资源未更新，可使用本地的缓存。

这里的 header 中的信息指的是 Last-Modify/If-Modify-Since 和 ETag/If-None-Match。

Last-Modify/If-Modify-Since:Last-modify ：浏览器第一次请求资源的时候，服务器返回的 header 中会加上 Last-Modify，标识该资源最后修改的时间。当浏览器再次请求该资源时，request 的请求头中会包含 If-Modify-Since。该值为之前返回的 Last-Modify。服务器收到 If-Modify-Since 后，根据资源的最后修改时间判断是否命中缓存。如果命中缓存，则返回 304，并且不会返回资源内容，并且不会返回 Last-Modify。

ETag/If-None-Match:返回的是一个校验码。ETag 可以保证每一个资源是唯一的，资源变化都会导致 ETag 变化。服务器根据浏览器上送的 If-None-Match 值来判断是否命中缓存。

与 Last-Modified 不一样的是，当服务器返回 304 Not Modified 的响应时，由于 ETag 重新生成过，response header 中还会把这个 ETag 返回，即使这个 ETag 跟之前的没有变化。

Last-Modified 与 ETag 是可以一起使用的，服务器会优先验证 ETag，一致的情况下，才会继续比对 Last-Modified，最后才决定是否返回 304。

总结

当浏览器再次访问一个已经访问过的资源时，它会这样做：

看看是否命中强缓存，如果命中，就直接使用缓存了。

如果没有命中强缓存，就发请求到服务器检查是否命中协商缓存。

如果命中协商缓存，服务器会返回 304 告诉浏览器使用本地缓存。

否则，返回最新的资源。

使用更快的网络

CDN全称内容分发网络。用户在浏览网站的时候，CDN会选择一个离用户最近的CDN边缘节点来响应用户的请求。

当浏览器向CDN节点请求数据时，CDN节点会判断缓存数据是否过期，若缓存数据并没有过期，则直接将缓存数据返回给客户端；否则，CDN节点就会向服务器发出回源请求，从服务器拉取最新数据，更新本地缓存，并将最新数据返回给客户端。 CDN服务商一般会提供基于文件后缀、目录多个维度来指定CDN缓存时间，为用户提供更精细化的缓存管理。

使用DNS预解析

//强制打开a 标签的dns 预解析

在一些浏览器中页面中的a标签默认打开了DNS预解析，但是页面协议是以https开头，很多浏览器默认关闭DNS预解析，通过第一句强制打开a标签的预解析。

3.节流和防抖

防抖(debounce)

函数防抖: 指触发事件后在规定时间内函数只能执行一次，如果在规定时间内又触发了事件，则会重新计算函数执行时间。

场景：监听一个输入框，文字变化后触发 change 事件，直接用keyup事件，则会频繁触发change 事件。使用防抖：用户输入结束或暂停时，才会触发change 事件

debounce.js

let input = document.getElementById("the_input");

//自定义防抖函数

function debounce(fn, delay = 100) {

let timer = null;

return function () {

if (timer) {

clearTimeout(timer);

}

timer = setTimeout(() => {

fn.apply(this, arguments);

timer = null;

}, delay);

}

}

input.addEventListener("keyup", debounce(function (e) {

console.log(e.target);

console.log(input.value);

}, 600));

节流(throttle)

节流：限制一个函数在规定时间内只能执行一次。

场景1：拖拽一个元素时，要随时拿到该元素被拖拽的位置。直接用drag 事件，则会频繁触发，很容易导致卡顿。使用节流：无论拖拽速度多快，都会每隔100ms 触发一次。

场景2：高频点击提交，表单重复提交。

throttle.js

const div1 = document.getElementById('div1')

// 自定义节流

function throttle(fn, delay = 100) {

let timer = null

return function () {

if (timer) {

return

}

timer = setTimeout(() => {

fn.apply(this, arguments)

timer = null

}, delay)

}

}

div1.addEventListener('drag', throttle(function (e) {

console.log(e.offsetX, e.offsetY)

}))

错误监控

错误的捕获方式

1.代码错误

try-catch

try-catch只能捕获到运行时的非异步错误，而语法错误和异步错误就捕捉不到。比较消耗性能，少用。

window.onerror

当有javaSript脚本运行错误或者资源、加载失败时，都会触发Event接口的error事件

//方式一：

window.onerror = function(error) {

console.log(error);

return true;

}

//方式二：

window.addEventListener('error', (error) => {

console.log(error);

return true;

}, true);

window.onerror只有在返回true时，异常才不会向上抛出,原理是冒泡机制。

window.onerror是无法捕获到网络异常的。

2.资源加载错误

1) object.onerror

2) performance.getEntries()//获取所有已加载资源的加载时长===间接获取没有加载资源的错误。

3) Error事件捕获

跨域的js错误

所有跨域文件的js错误信息：Script error。

处理方式：

1、在script标签增加 crossorigin属性

2、设置js资源响应头Access-Control-Allow-Origin:*

这样就可以拿到详细的错误信息了。

上报错误的基本原理？

1、采用Ajax通信的方式上报

2、利用Image对象上报(是所有监控体系都在做的事)

(new Image()).src = "http://vaidu.cpm";