最后
由于篇幅限制,pdf文档的详解资料太全面,细节内容实在太多啦,所以只把部分知识点截图出来粗略的介绍,每个小节点里面都有更细化的内容!
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
不过,凡事总有例外,如果一个页面的加载时间就会很长,我们也可以通过一些方式让用户觉得没有那么慢。
总之一句话,你的页面可以做的不快,但是你可以让你的用户觉得你很快。
客观性能
对于开发者来说,性能指标是可以客观度量的,我们可以通过一些手段来优化 Web 性能,使这些度量指标达到开发者设定的标准。
客观性能是指,从用户输入url开始,到下载、解析和执行所有资源以及最终绘制的整个过程的时间度量。
性能指标是个很复杂的标准,后续我会单独整理出一篇文章介绍性能指标。
构建优化
由于我司使用的是 @vue/cli,所以许多webpack配置脚手架已经帮你完成了,我就不叙述了,这里只讲基于 @vue/cli 做的一些优化配置
gzip 压缩
gzip
压缩效率非常高,通常可以达到 70% 的压缩率,也就是说,如果你的网页有 30K,压缩之后就变成了 9K 左右。
//npm i -D compression-webpack-plugin
configureWebpack: config => {
const CompressionPlugin = require(‘compression-webpack-plugin’)
config.plugins.push(new CompressionPlugin())
}
去除 console.log
线上项目自然不应该被看到控制台的打印日志,所以我们需要将 console.log
都去除掉。
//npm i -D terser-webpack-plugin
configureWebpack: config => {
const TerserPlugin = require(‘terser-webpack-plugin’)
config.optimization.minimizer.push(
new TerserPlugin({
extractComments: false,
terserOptions: { compress: { drop_console: true } },
})
)
}
去除 SourceMap
由于打包后的文件经过了压缩、合并、混淆、babel编译后的代码不利于定位分析bug。
module.exports = {
productionSourceMap: false,
}
CDN减少打包体积
使用 cdn
文件来减少工程到打包体积,也可以按需加载。
在 /public/index.html 中引入需要的js和css文件
去掉 package.json 中对于 vue、element-ui 等相关资源的依赖
src/main.js ,去掉 vue、element-ui 等相关资源的 import 和 vue.use 这些语句
配置externals。由于使用 Vue Cli 3 默认配置,新建出来的项目没有了 build 目录,首先得在项目根目录下,新建 vue.config.js 文件,里面添加以下代码:
module.exports = {
configureWebpack:{
externals:{
‘Vue’: ‘Vue’,
‘element-ui’: ‘element-ui’,
‘clipboard’:‘VueClipboard’
}
}
}
预渲染
渲染方式分为三种,客户端渲染,服务端渲染,预渲染。
我们默认的开发方式是通过客户端渲染,但是客户端渲染页面内容,关键链路较长,首屏渲染会有一定延迟,并且对 SEO 非常不友好,对于C端的产品来说,是不可行的。
所以很多公司都会通过服务端渲染(SSR)或是 预渲染的方式来解决这两点问题,由于公司技术栈原因,我们采用预渲染的方式来做优化。
什么是预渲染?
简单说,就是将浏览器解析 javascript
动态渲染页面的这部分工作,在打包阶段就完成了,(只构建了静态数据)换个说法在构建过程中,webpack
通过使用 prerender-spa-plugin
插件生成静态结构的 html
。
// npm i -D prerender-spa-plugin
configureWebpack: config => {
const path = require(‘path’)
const PrerenderSPAPlugin = require(‘prerender-spa-plugin’)
config.plugins.push(
new PrerenderSPAPlugin({
staticDir: path.join(__dirname, ‘dist’),
routes: [‘/’],
minify: {
collapseBooleanAttributes: true,
collapseWhitespace: true,
keepClosingSlash: true,
decodeEntities: true,
sortAttributes: true,
},
renderer: new PrerenderSPAPlugin.PuppeteerRenderer({
renderAfterDocumentEvent: ‘render-event’,
renderAfterTime: 5000,
// headless: false,
}),
})
)
}
注意:路由模式必须为 history
,如果不设置 history
模式,也能运行和生成文件,每个 index.html
文件的内容都会是一样的。
网络资源优化
Service Worker
ServiceWorker
是运行在浏览器后台进程里的一段 JS,它可以做许多事情,比如拦截客户端的请求、向客户端发送消息、向服务器发起请求等等,其中最重要的作用之一就是离线资源缓存。
ServiceWorker
拥有对缓存流程丰富灵活的控制能力,当页面请求到 ServiceWorker
时,ServiceWorker
同时请求缓存和网络,把缓存的内容直接给用户,而后覆盖缓存,我司已经使用了 ServiceWorker
替换 HTTP缓存策略
。
注意:需要HTTPS才可以使用 ServiceWorker
http缓存
HTTP 缓存一般分为两类:强缓存(也称本地缓存) 和 协商缓存(也称304缓存)。
普通刷新会启用 协商缓存,忽略 强缓存。只有在地址栏或收藏夹输入网址、通过链接引用资源等情况下,浏览器才会启用 强缓存。
强缓存(200)
本地缓存是最快速的一种缓存方式,只要资源还在缓存有效期内,浏览器就会直接在本地读取,不会请求服务端。
协商缓存(304)
协商缓存,顾名思义是经过浏览器与服务器之间协商过之后,在决定是否读取本地缓存,如果服务器通知浏览器可以读取本地缓存,会返回304状态码,并且协商过程很简单,只会发送头信息,不会发送响应体。
缓存位置
缓存位置一般分为:Memory Cache(内存缓存)和 Disk Cache(硬盘缓存)
内存缓存:读取快、持续时间短、容量小
硬盘缓存:读取慢、持续时间长、容量大
缓存优先级
Service Worker -> Memory Cache -> Disk Cache -> Push Cache
HTTP2
HTTP2 四个新特性:
-
多路复用,无需多个TCP连接,因为其允许在单一的HTTP2连接上发起多重请求,因此可以不用依赖建立多个TCP连接。
-
二进制分帧,将所有要传输的消息采用二进制编码,并且会将信息分割为更小的消息块。
-
头部压缩,用HPACK技术压缩头部,减小报文大小
-
服务端推送,服务端可以在客户端发起请求前发送数据,换句话说,服务端可以对客户端的一个请求发送多个相应,并且资源可以正常缓存。
server {
listen 443 ssl http2;
}
注意:使用 http2 的前提是必须是 https。
资源预加载
简单说,提前加载资源,当用户需要查看时可直接从本地缓存中渲染。
总结:对当前页面需要的资源,使用 preload 进行预加载,对其它页面需要的资源进行 prefetch 预加载。
preload
preload
页面加载的过程中,在浏览器开始主体渲染之前加载。
prefetch
prefetch
页面加载完成后,利用空闲时间提前加载。
自学几个月前端,为什么感觉什么都没学到??
这种现象在很多的初学者和自学前端的同学中是比较的常见的。
因为自学走的弯路是比较的多的,会踩很多的坑,学习的过程中是比较的迷茫的。
最重要的是,在学习的过程中,不知道每个部分该学哪些知识点,学到什么程度才算好,学了能做什么。
很多自学的朋友往往都是自己去找资料学习的,资料上有的或许就学到了,资料上没有的或许就没有学到。
这就会给人一个错误的信息就是,我把资料上的学完了,估计也-就差不多的了。
但是真的是这样的吗?非也,因为很多人找的资料就是很基础的。学完了也就是掌握一点基础的东西。分享给你一份前端分析路线,你可以参考。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
还有很多的同学在学习的过程中一味的追求学的速度,很快速的刷视频,写了后面忘了前面,最后什么都没有学到,什么都知道,但是什么都不懂,要具体说,也说不出个所以然。
所以学习编程一定要注重实践操作,练习敲代码的时间一定要多余看视频的时间。
度才算好,学了能做什么。
很多自学的朋友往往都是自己去找资料学习的,资料上有的或许就学到了,资料上没有的或许就没有学到。
这就会给人一个错误的信息就是,我把资料上的学完了,估计也-就差不多的了。
但是真的是这样的吗?非也,因为很多人找的资料就是很基础的。学完了也就是掌握一点基础的东西。分享给你一份前端分析路线,你可以参考。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
还有很多的同学在学习的过程中一味的追求学的速度,很快速的刷视频,写了后面忘了前面,最后什么都没有学到,什么都知道,但是什么都不懂,要具体说,也说不出个所以然。
所以学习编程一定要注重实践操作,练习敲代码的时间一定要多余看视频的时间。