性能问题

2020-06-11 本文已影响0人宇融大牛

网络相关

DNS预解析

DNS解析也是需要时间的，所以可以使用预解析预先获得域名对应的ip

缓存

对前端优化很重要

可降低资源重复加载，提高网页整体加载速度

浏览器缓存策略：强缓存和协商缓存

强缓存

表示在缓存期间不需要请假，state code为200

通过两种响应头实现：Expires 和 Cache-Control

Expires: Wed, 22Oct201808:41:00 GMT

表示资源会在设置的时间后过期，需再次请求，取本地时间，修改的话会造成缓存失效

Cache-control:max-age=30

优先级高于 Expires 。该属性表示资源会在 30 秒后过期，需要再次请求。

协商缓存

就是询问服务器资源是否有更新，有更新的话就发新的资源过来

需要请求，请求成功返回304

两种实现方式：last-modified 和 if-Modified-since

last表示文件最后修改日期，if把last发给服务器，问服务器该日期后资源是否有更新，有新的就发新的过来。

选择合适的缓存策略

大部分都可以用强缓存配合协商缓存解决，但有一些特定场景

● 不需要缓存的资源：cache-control:no-store

● 频繁变动的使用：cache-control：no-cache配合ETag，该资源已被缓存，但每次都会询问资源是否更新

● 对于代码文件，使用：Cache-Control: max-age=31536000，对文件进行志文处理，文件名改变会立刻下载新的文件

优化渲染过程

预加载

有些资源不需要马上用，但是希望尽早获取，可使用预加载。

声明式的fetch，强制浏览器请求资源，并不会阻塞onload时间，以下代码开启预加载

可以降低首屏时间，缺点是兼容性不好

预渲染

可以通过预渲染将下载的文件预先在后台渲染

虽然可以提高页面的加载速度，但是要确保该页面百分百会被用户打开，不然浪费资源。

懒执行

某些逻辑在使用的时候再计算，可以优化首屏加载速度，懒执行，需要的时候再唤醒，使用定时器或者事件

懒加载

将不关键的资源延后加载

只加载自定义区域（一般就是可视区域）

对于图片：先设置图片的src为一个占位符，图片资源放一个属性里面，当进入的时候将src换成真是资源，就是图片的懒加载

该方法也可以用在视频等等。

文件优化

图片优化

1）不用图片，一些图标可以用css自己画

2）使用裁剪好的图片适应屏幕

3）小图使用base64格式

4）雪碧图

5）选择合适的图片格式

CDN

静态资源尽量使用 CDN 加载，由于浏览器对于单个域名有并发请求上限，可以考虑使用多个 CDN 域名。对于 CDN 加载静态资源需要注意 CDN 域名要与主站不同，否则每次请求都会带上主站的 Cookie

其他优化

● 对于 Webpack4，打包项目使用 production 模式，这样会自动开启代码压缩

● 使用 ES6 模块来开启 tree shaking，这个技术可以移除没有使用的代码

● 优化图片，对于小图可以使用 base64 的方式写入文件中

● 按照路由拆分代码，实现按需加载

● 给打包出来的文件名添加哈希，实现浏览器缓存文件

监控

对于代码运行错误，通常的办法是使用 window.onerror 拦截报错。该方法能拦截到大部分的详细报错信息，但是也有例外

对于跨域的代码运行错误会显示 Script error. 对于这种情况我们需要给 script 标签添加 crossorigin 属性

对于某些浏览器可能不会显示调用栈信息，这种情况可以通过 arguments.callee.caller 来做栈递归

对于异步代码来说，可以使用 catch 的方式捕获错误。比如 Promise 可以直接使用 catch 函数，async await 可以使用 try catch

但是要注意线上运行的代码都是压缩过的，需要在打包时生成 sourceMap 文件便于 debug。

对于捕获的错误需要上传给服务器，通常可以通过 img 标签的 src 发起一个请求。

面试题

如何渲染几万条数据并不卡住界面

这道题考察了如何在不卡住页面的情况下渲染数据，也就是说不能一次性将几万条都渲染出来，而应该一次渲染部分 DOM，那么就可以通过 requestAnimationFrame 来每 16 ms 刷新一次。