Web性能优化
2021-05-14 16:32:03 73 举报AI智能生成
Web性能优化知识点
作者其他创作
大纲/内容
优化思路
性能优化点
减少DNS查询时间 ？
网络请求走最近网络？
相同静态资源缓存？
减少 HTTP 请求大小？
减少 HTTP 请求数量？
服务器渲染？
浏览器发送请求都经历什么过程？
DNS
缓存IP地址
局域网
交换机
路由器
网络
服务器
返回资源
资源合并和压缩
减少 HTTP 请求的数量
减少 HTTP 请求的大小
第三章、渲染优化
资源加载
HTML加载(从上到下解析)
DOM
JS加载
CSS加载
CSSOM
关键渲染路径
JS
Style 样式
Layout 布局
Paint 绘制
Composite 合成
回流、重绘
回流：重新 Layout 布局，导致重绘的操作：添加删除DOM、Styles 改变、display:none、offset 改变，位置、字体大小、浏览器窗口大小等等。
重绘：不影响布局仅样式改变时，例如文字 color。
合成触发操作
position、scale、ratation、opacity 通过transform 改变时会触发合成。
第4章、代码优化
HTML优化
（资源压缩）
减少使用 iframe
加载耗时长，阻塞父文档
资源消耗高
压缩空白符
避免深层级嵌套：解析耗时长
避免 table 布局，开销的
删除注释节点
CSS、JS尽量使用外链
删除元素的默认属性
JS放在 </body> 之前防止阻塞 DOM
CSS 优化
降低文件大小，避免阻塞 Render
GPU 完成动画
contain 属性，独立容器
font-display 属性
第5章资源的优化
（减少HTTP数量，资源文件大小/数量）
HTML压缩
html-minifier 工具
CSS压缩
clean-css 工具
JS压缩和混淆
CSS、JS 合并减少HTTP数量
合并还是拆分根据实际情况决定
图片优化
格式
jpg: 有损压缩，压缩率高，不支持透明
png: 支持透明，浏览器兼容好
webp: 压缩程度好，在 iOS WebView 兼容性问题（兼容问题）
svg矢量图，代码内嵌，相对较小，图片样式相对简单的场景
加载优化
懒加载 LazyLoadImage
渐进式图片 Progressive Image
响应式图片 srcset / sizes / picture
工具
imagemin: jpg 图片的压缩工具
imagemin-pngquant : png 处理工具
字体
font-display
防止字体闪烁
block: 3s不显示，默认，实际
swap：默认，实际
fallback：不显示100ms，默认/实际
optional：不显示100ms，默认/实际（不更改）
第六章、构建优化
webpack 优化配置
模式
不同 mode 下 webpack 的默认配置，参考官方文档
Tree Shaking
基于 ES6 的 import 和 export，打包时移除未使用到代码。
配置：babel/preset-env: module: false，保留 ES6 模块，才会进行 Tree Shaking。
忽略 Tree Shaking 配置 package.js 中的 sideEffects: ['*.css'] 属性。
JS压缩
webpack默认使用 Terser-webpack-plugin 插件
作用域提升
打包时，进行模块的合并；减小代码体积，提高效率。
Babel7 优化
@babel/polyfill：兼容性配置 useBuitIns: 'usage'
复用辅助函数
plugins: @babel/plugin-transform-runtime
配置浏览器 targets
webpack 依赖优化
noParse
指定不解析的库，例如 lodash
配置：module: { noParse: 'lodash', ...}
提高构建速度、忽略较大库
DIIPlugin
避免重复构建不变的库，例如 react、react-dom 等。
webpack.dll.config.js: 抽离动态库
webpack.config.js 中配置使用 dll 库， 使用 DIIReferencePlugin 插件。
webpack 代码拆分
多个 entry
SplitChunks 打包拆分
webpack 资源压缩
terser JS压缩
mini-css
minify HTML
webpack 持久化缓存
文件唯一 HASH 值
监测与分析工具
Stats
webpack-bundle-analyzer
speed-measure-webpack-plugin
React 按需加载
ReactRouter 基于 webpack 的动态引入
使用 Reloadable 高级组件
第七章、传输加载优化
启用压缩 Gzip
启用 Keep-Alive
复用 HTTP 链接，节约重复建立链接的消耗
keep-alive 时间太长对服务器来说也是负担
HTTP 缓存
强制缓存
Cache-Control
Expires
对比缓存
Last-Modified + If-Modified-since
Etag + If-None-Match
Service Workers 技术
HTTP2 的性能提升
多路复用
二进制传输
请求头压缩 / 服务器 PUSH
用流行的 SSR 技术给前端减负
Next.js
第八章、前沿优化解决方案
SVG
矢量图，可伸缩
CSS 控制样式
Flexbox
性能提升
容器中设置布局
布局能力
优化资源加载顺序
浏览器默认安排资源优选级
自定义优先级方法
提高资源的优先级，提前加载重要的资源
preload
声明式 fetch 可以强制浏览器在不阻塞 document 的 onload 的情况下请求资源
prefetch
委托浏览器加载将来可能用到的资源，加载时机由浏览器决定。
预渲染页面
windowing 提高列表性能
使用骨架图减少布局移动
0 条评论
下一页
