专栏首页前端有的玩前端性能优化总结

前端性能优化总结

gzip压缩

gzip压缩效率很高,可以达到70%的压缩率

//npm i -D compression-webpack-plugin  安装插件依赖
configureWebpack: config => {
  const CompressionPlugin = require('compression-webpack-plugin')
  config.plugins.push(new CompressionPlugin())
}

去掉console.log

生产环境中,不需要打印日志。通过对webpack进行配置,打包时自动去掉console.log

//npm i -D terser-webpack-plugin
configureWebpack:config =>{
    const  TerserPlugin = require('terser-webpack-pulugin')
    config.optimzation.minimizer.push(
     new TerserPlugin({
            extractComments:false,
            terserOptions:{compress:{drop_console:true}} //插件配置项 移除console
        })
    )
}

去除SourceMap

代码压缩后进行调bug定位将非常困难,于是引入sourcemap记录压缩前后的位置信息记录,当产生错误时直接定位到未压缩前的位置,将大大的方便我们调试。

sourcemap附带了很多信息,如果build需要生成sourcemap,将会大大降低build的速度,还会增加包的体积。

//vue 中
module.exports = {
  productionSourceMap: false,
}

//react中
//打开webpack.config.prod.js
const shouldUseSourceMap = false

CDN

内容分发网络,它能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容,解决 Internet网络拥挤的状况,提高用户访问网站的响应速度。所以可以通过将资源部署在CDN上来提高响应速度,提高用户体验

预渲染

简单来说,就是将浏览器解析JavaScript动态渲染的工作,在打包阶段完成了(只构建了静态数据)。换个说法,在构建过程中,webpack通过使用prerender-spa-plugin插件生成静态结构的html

// 1、安装prerender-spa-plugin
npm install prerender-spa-plugin --save-dev
 
// 2、安装vue-meta-info
npm install vue-meta-info --save-dev
 
 
// 3、相关配置
<!-- webpack.prod.conf.js -->
// 预渲染配置:在webpack.prod.conf文件中加入
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
 
// 在 plugins 中加入
new PrerenderSPAPlugin({
      // 生成文件的路径,也可以与webpakc打包的一致。
      // 下面这句话非常重要!!!
      // 这个目录只能有一级,如果目录层次大于一级,在生成的时候不会有任何错误提示,在预渲染的时候只会卡着不动。
      staticDir: path.join(__dirname, '../dist'),
 
      // 对应自己的路由文件,比如a有参数,就需要写成 /a/param1。
      routes: ['/', '/first', '/second', '/third', '/fourth', '/userCenter/userFirst','/userCenter/userSecond','/userCenter/userThird'],
 
      // 这个很重要,如果没有配置这段,也不会进行预编译
      renderer: new Renderer({
        inject: {
          foo: 'bar'
        },
        // headless: false,
        renderAfterDocumentEvent: 'render-event', // 在 main.js 中 document.dispatchEvent(new Event('render-event')),两者的事件名称要对应上。
        args: ['--no-sandbox', '--disable-setuid-sandbox']
      })
    })
 
// 4、在main.js中
import MetaInfo from 'vue-meta-info'
 
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  // 添加mounted,不然不会执行预编译
  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
})

注意:路由模式必须为 history ,如果不设置 history 模式,也能运行和生成文件,每个 index.html 文件的内容都会是一样的

Service Worker

ServiceWorker 是运行在浏览器后台进程里的一段 JS,它可以做许多事情,比如拦截客户端的请求、向客户端发送消息、向服务器发起请求等等,其中最重要的作用之一就是离线资源缓存。

ServiceWorker 拥有对缓存流程丰富灵活的控制能力,当页面请求到 ServiceWorker 时,ServiceWorker 同时请求缓存和网络,把缓存的内容直接给用户,而后覆盖缓存

注意:需要HTTPS才能使用ServiceWorker

HTTP缓存

HTTP缓存一般分为两类:强缓存(本地缓存)、协商缓存(304缓存)

普通刷新会启用协商缓存

在地址栏输入网址、通过链接引入资源等情况下,浏览器才启用强缓存

强缓存(200)。本地缓存是最快速的一种缓存方式,只要资源还在缓存有效期内,浏览器就会直接在本地读取,不会请求服务端。在chrome控制台的Network选项中可以看到该请求返回200的状态码,并且Size显示from disk cache或from memory cache。强缓存可以通过设置两种 HTTP Header 实现:Expires 和 Cache-Control。

协商缓存(304)。协商缓存,顾名思义是经过浏览器与服务器之间协商过之后,在决定是否读取本地缓存,如果服务器通知浏览器可以读取本地缓存,会返回304状态码,并且协商过程很简单,只会发送头信息,不会发送响应体。

协商缓存可以通过设置两种 HTTP Header 实现:Last-Modified 和 ETag

首先在精确度上,Etag要优于Last-Modified

第二在性能上,Etag要逊于Last-Modified,毕竟Last-Modified只需要记录时间,而Etag需要服务器通过算法来计算出一个hash值

第三在优先级上,服务器校验优先考虑Etag

缓存优先级:Service Worker -> Memory Cache(内存缓存) -> Disk Cache(硬盘缓存) -> Push Cache(推送缓存)

Push Cache 只在会话(session)中存在,会话结束就被释放,而且缓存时间很短

HTTP2

HTTP2 四个新特性:

  • 多路复用,无需多个TCP连接,因为其允许在单一的HTTP2连接上发起多重请求,因此可以不用依赖建立多个TCP连接。
  • 二进制分帧,将所有要传输的消息采用二进制编码,并且会将信息分割为更小的消息块。
  • 头部压缩,用HPACK技术压缩头部,减小报文大小
  • 服务端推送,服务端可以在客户端发起请求前发送数据,换句话说,服务端可以对客户端的一个请求发送多个相应,并且资源可以正常缓存。
server {
    listen 443 ssl http2;
}

资源预加载

提前加载资源,当用户需要时,可以直接从本地缓存中渲染。

preload

页面加载的过程中,在浏览器开始主体渲染之前加载

//对sty1e.cs5和 index.js进行pre1oad预加载
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="index.js" as="script">

prefetch

页面加载完成后,利用空闲时间提前加载

//对资源进行 prefetch预加载
<link rel="prefetch" href="next.css">
<link rel="prefetch" href="next.js">

dns-prefetch

//对特定域名进行预解析
//将静态资源只放在一个域名下面,可以有效减少dns的请求
<link rel=”dns-prefetch” href=”//fonts.googleapis.com”>

异步无阻塞加载JS

异步加载 js 文件,并且不会阻塞页面的渲染。

普通的script标签在开始解析和解析的过程中,会停止解析dom

defer

<script src="d.js" defer></script> <script src="e.js" defer></script>

在其他同步脚本执行后,DOMContentLoaded 事件前 依次执行 d.js, e.js。

async

<script src="b.js" async></script>
<script src="c.js" async></script>

当脚本下载完后立即执行。(两者执行顺序不确定,执行阶段不确定,可能在 DOMContentLoaded 事件前或者后 )

defer和async都不会停止解析dom

「webp」

「webp」 是一种新的图片格式,它的体积只有只有 「jpeg」的2/3,将图片资源大量换成 「webp」 格式可以加快请求的速度

但是webp存在浏览器兼容问题,使用前需要判断浏览器是否支持

loading加载

通过加载,可以让用户在视觉上不会觉得慢

可以通过骨架屏加载,在感官上内容出现的流畅不突兀

本文分享自微信公众号 - 前端有的玩(gh_918bae0a9616),作者:monkeysoft

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-07-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端性能优化总结

    最近花了一些时间在项目的性能优化上,背后做了很多工作,但是最后依然没有达到自己想要的结果,有些失望,但是还是记录下自己的执着。

    前端迷
  • 前端性能优化总结

    标记为async的脚本并不保证按照指定它们的先后顺序执行。对它来说脚本的加载和执行是紧紧挨着的,所以不管你声明的顺序如何,只要它加载完了就会立刻执行。

    ConardLi
  • 前端性能优化总结(简略)

    卡少
  • 7000字前端性能优化总结 | 干货建议收藏

    为什么要做性能优化?性能优化到底有多重要? 网站的性能优化对于用户的留存率、转化率有很大的影响,所以对于前端开发来说性能优化能力也是重要的考察点。

    coder_koala
  • 前端性能优化归纳总结篇

    关于前端性能优化的总结,随处都可以看到这方面的文章,而优化方法,也无外乎那些“固定”方面,当然,有些方面已经过时,所以,在这里,我自己也总结一遍吧,加深理解,也...

    lyb-geek
  • 性能优化总结(一):前言

        最近一直忙着学2010、WPF、看架构师教程、学英语,搞得都没时间写博客了。     最近在GIX4项目上做了一些性能方面的优化,为了方便和同事们分享经...

    用户1172223
  • 前端开发总结:如何优化网站性能?

    学前端这么久了,从一无所知到web网页的开发,自己也是踩了巨多的坑,自己也在不断的摸索中,短时间内可能不会再做前端了,毕竟java是我的主方向。总结一下web网...

    beifengtz
  • 前端性能优化 —— 前端性能分析

    作者:ouven https://my.oschina.net/zhangstephen/blog/1601380 前端性能优化是一个很宽泛的概念,本书前面的部...

    前端教程
  • 前端性能优化

    本文主要考虑客户端性能、服务器端和网络性能,内容框架来自Yahoo Developer Network,包含 7 个类别共 35 条前端性能优化最佳实践,在此基...

    grain先森
  • 前端性能优化

    用JS操作DOM,是比较慢的。为什么呢?首先,补充一下浏览器相关的知识。下图为浏览器结构:

    娜姐
  • 前端性能优化

    前端性能优化与重绘与回流有关系的原因是:频繁的触发重绘与回流,会导致UI频繁染,最终会导致js变慢,会导致页面性能变差

    javascript艺术
  • 性能优化总结

    吴裕超
  • 前端性能优化篇一:webpack性能优化

    当我们不用cli,而是自己搭建项目架子的时候,会用到webpack构建我们的项目,在用webpack构建项目的时候,过长的打包编译时间和庞大冗余的代码会让我们...

    用户6835371
  • 前端性能优化(一)

    前端是庞大的,包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优化是复杂的,针对方方面面的资源都有不同的方式。...

    用户2305169
  • web前端性能优化

    网站的划分一般为二:前端和后台。我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等。而前端呢?其实应该是属于功能的表现。并...

    lyb-geek
  • 前端性能优化(二)

         从用户访问资源到资源完整的展现在用户面前的过程中,通过技术手段和优化策略,缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。

    用户2305169
  • MySQL性能优化总结

    1. InnoDB支持事务,MyISAM不支持,对于InnoDB每一条SQL语言都默认封装成事务,自动提交,这样会影响速度,所以最好把多条SQL语言放在begi...

    阮键
  • Oracle 性能优化总结

    https://blog.csdn.net/zhushuai1221/article/details/51740846

    Lenis
  • MySQL 性能优化总结

    https://www.cnblogs.com/joeyJss/p/11096597.html

    Lenis

扫码关注云+社区

领取腾讯云代金券