浅谈web前端性能优化
代码层面:
防抖和节流(resize,scroll,input)。
减少回流(重排)和重绘。
事件委托。
css 放 ,js 脚本放 最底部。
- 由于用户浏览网页是先看再进行操作,所以先把css加载出来有利于客户的使用体验。
延迟JavaScript
defer
属性告诉浏览器在 HTML 解析器解析完文档之后运行脚本,但在事件发生之前,DOMContentLoaded
会被触发。
减少 DOM 操作。
按需加载
比如 React 中使用 React.lazy
和 React.Suspense
,通常需要与 webpack 中的 splitChunks
配合。
懒加载
- 又由于客户会先浏览第一屏,所以可以先不加载第二屏和后面的。
预加载
- 在做读书或者用户很可能点击之后的页面时,可以做预加载。
- 顾名思义,就是在用户点击下一页之前,就预先请求下一页。
- 这样用户可以很快看到之后的内容。
- 但这样同时会浪费带宽。有利有弊
构建方面:
压缩代码文件,
在 webpack 中使用 terser-webpack-plugin
压缩 Javascript 代码;使用 css-minimizer-webpack-plugin
压缩 CSS 代码;使用 html-webpack-plugin
压缩 html 代码。
服务器端使用gzip压缩
- g-zip压缩算法,把下载过来的数据先进行压缩
- 后台开启gzip,用户下载压缩包,浏览器自动解压
- 文本文件的压缩率可达80%以上,因此
HTML、CSS、JavaScript文件
启用GZip压缩
可达到较好的效果。但是压缩对服务器和浏览器产生一定的压力,在通信带宽良好,而服务器资源不足的情况下要权衡考虑。
开启 gzip 压缩,webpack 中使用 compression-webpack-plugin
,node 作为服务器也要开启,使用 compression
。
常用的第三方库使用 CDN 服务
在 webpack 中我们要配置 externals,将比如 React, Vue 这种包不打倒最终生成的文件中。而是采用 CDN 服务。
其它:
- 使用 http2。因为解析速度快,头部压缩,多路复用,服务器推送静态资源。
- 使用服务端渲染。
- 图片压缩。
- 使用 http 缓存,比如服务端的响应中添加
Cache-Control / Expires
。
DNS服务优化
- 当我们输入url访问一个网页后,第一步会进行DNS查询,通过DNS得到IP地址。
- 想让DNS查询更快,可以花钱购买一些更快的DNS服务,但没有必要。
- 一般是配置hosts,自己把ip配置好。DNS就会读取系统hosts文件,查找其中是否有对应的ip。
http 连接复用
- 当查询完了ip后,会给ip发送一个请求
- 这个请求是http请求,本质是tcp连接
- 一般需要请求html,css和js,这三个都需要tcp,所以可以用同一个tcp,这就是连接复用。
- 用Keep-Alive 实现,让第一次发送请求建立的TCP连接不要中断,这样第二次发送请求时可以复用这个连接
SQL优化
- 查询是用sql语句查询数据库,可以通过优化sql查询来减少时间。(打开开发者工具看waiting时间可以判断是前端慢还是后端慢)
提高server带宽
- 拿到数据后会返回数据,下载时间=下载量/下载速度,提高服务器带宽就能加快下载速度(需要花钱购买)
优化CSS
- CSS 是阻塞渲染的,这意味着浏览器必须先下载并处理所有CSS文件,然后才能绘制像素。 通过内联关键的 CSS,可以大大加快此过程。
- 由于有时候CSS会写在JS中,所以这种方法并不可靠。
浏览器端使用缓存
- CSS、JavaScript、Logo、图标这些静态资源文件更新的频率都比较低,而这些文件又几乎是每次HTTP请求都需要的,如果将这些文件缓存在浏览器中,可以极好地改善性能。(html不缓存)
- 缓存是一种快速提高站点速度的方法。它减少了访问者的页面加载时间。我们可以告诉浏览器在特定的时间缓存文件。
我们可以使用以下 API 进行缓存:
- Cache-Control
- ETag
- Last-Modified
此外还有弱缓存:把md5发给服务器,如果md5一致,就返回304,表示不需要下载,此时没有下载量。
减少Cookie传输
- Cookie包含在每次请求和响应中,太大的Cookie会严重影响数据传输,因此哪些数据需要写入Cookie需要慎重考虑,尽量
减少Cookie中传输的数据量
。
使用域名加速
- 用户请求页面时,需要请求多个文件,html、css、js等。
- 假如有1个html,10个css,20个js,那么就需要发送31个请求,如果31个一起发,可以节约时间。
- 但是这样会消耗大量带宽,所以浏览器规定了每个域名同时最多只能10个。
- 这样时间会加长,所以通过加域名的方式。
- a域名专门请求html,b域名请求css,c域名请求js,这样就只需两次请求的时间, 加域名我们一般加的是 cdn域名。
- 加了域名后dns时间也会增加,所以要进行权衡。
- cookie-free:增加域名的第二个好多处,cookie只跟着主域名,css、js都无cookie,减少了上传量。