如何进行前端优化

在前端领域,由于我们是没有 I/O 的。所以说针对前端的优化从这么几个点可以考虑。首先是从减少 HTTP 请求和 CPU 的计算,其次呢,我们可以在内存和缓存的方面进行优化。

  1. 静态资源的合并: 为什么我们要对静态资源进行合并呢,原因就是我们要减少 HTTP 请求,我们对项目进行打包也是把 js、css 等文件合并起来,浏览器只需要发送少量请求便可以拿到文件,但是文件全部合并的话单文件又会变得很巨大,所以我们需要在数量上做一个取舍。
  2. 静态资源的缓存: 我们都知道,在 APP 上我们使用的很多数据都是从缓存中去拿的,那么我们能不能对这些可能一段时间内不会改变的东西进行缓存呢?当然是可以的,我们 http 协议上就有关于缓存的字段,有兴趣的可以去了解一下,这里就不多说了。
  3. CDN 分发网络: 我们做一个假设,我们的服务器架设在北京,现在,我们一个新疆的用户要去访问服务器去拿资源,这时候就会经过非常多的路由,跋山涉水的去到北京,然后拿到我们想要的数据,那么我们有没有一种办法不让用户跑这么远呢?当然是有的啦,我们使用 CDN,把资源放在上面,当用户请求资源的时候,我们就会从离用户最近的节点去返回用户所需要的资源,这样就能够节省很多的资源。
  4. SSR 渲染: 我们首先要清楚,SSR 是什么,其实就是服务器渲染的意思,我们所请求的 html 先在服务器端渲染好,然后再返回给用户,这样就不需要我们浏览器去一次一次的发送 ajax 请求去拿数据再渲染了。
  5. 减少 DOM 查询: 我们都知道,关于 DOM 的操作都是昂贵的,如果在我们的项目中,我们对一个 DOM 去反复的查询,这是不好的,我们可以用一个变量将 DOM 查询的结果缓存下来,后面再使用。
  6. 减少 DOM 操作: 其实看过 Vue 的源码的同学都知道,对一大串需要我们进行操作的 DOM,我们不要一个一个的去操作,那么我们该怎么办呢?在 DOM 的 api 中有这么一个东西,document.documentCreateFragment(),我们将我们要操作的节点加入到这个片段中,然后我们再一次性的插入到 DOM 树中。
  7. 事件节流: 有的时候我们需要监听频繁触发的事件,但是这样就会造成频繁的触发这个事件,然而我们并不希望这么做,我们希望能 1 秒或者 2 秒监听一次。举个栗子,在英语作文网站里面在线的写作文,他会有个自动保存。我们假设一下,我们是在 keyup 事件触发的时候进行保存的,那么我们打字很快的时候,就会一直触发这个事件,我们希望的是在用户停止输入两秒钟之后才会触发保存的函数,这时候,我们就需要使用定时器来定一个时间,如果用户在这个时间间隔内再次触发事件的话,就清除定时器重新设置。
  8. 非核心 js 异步加载: 对于 js 来说我们使用异步加载有几个通用的手段,第一种,直接使用 js 代码来异步加载,也是我们用的比较多的一种方法,直接通过 js 来向 dom 中加入一个 script 标签来加载。第二种方法是 defer,这里就把第三种方法说了吧 async,这两个是有区别的,在这里说一个明显的区别就是,在 script 标签上加了 defer 的 js,会在 dom 解析完成之后,按照顺序进行执行,而 async 是谁先加载完就会执行谁,而不是顺序执行的。
  9. DNS 预解析:
<meta http-equiv="x-dns-prefetch-control" content="on" />
1

我们可以去看支付宝针对 DNS 预解析,但是多页面重复 DNS 预解析会增加重复 DNS 查询次数,即相同域名都加了预解析标签。所以对于这个一定要小心。

以上就是对前端优化的一些方法,当然了对于前端的优化肯定不止这一点,我们还需要继续学习。

Last Updated: 8/20/2019, 3:36:58 AM