容县网站开发,长沙网站排名方法,注册做网站的公司,c 开发网站开发前端性能优化一直是很多同学非常关注的问题#xff0c;在日常的面试中也是经常会被用到的点。今天就来了解一下前端性能优化方案。
一#xff1a;页面渲染相关
01#xff1a;减少页面重绘和回流 回流#xff08;reflow#xff09;#xff1a;是指由于DOM结构或样式发生…前端性能优化一直是很多同学非常关注的问题在日常的面试中也是经常会被用到的点。今天就来了解一下前端性能优化方案。
一页面渲染相关
01减少页面重绘和回流
回流reflow是指由于DOM结构或样式发生改变浏览器需要重新计算元素的几何属性然后重新布局页面的过程 重绘repaint是指当元素样式发生改变但不影响布局时浏览器只需要重新绘制受影响的部分而不需要重新计算布局 尽量减少使用 CSS 属性的快捷方式例如使用 border-width、border-style 和 border-color 而不是 border。CSS 属性的快捷方式会将所有值初始化为“初始值”因此避免使用它们可以最小化重绘和回流在实际工作中CSS 快捷方式的性能影响微乎其微并且使用快捷方式可以简化样式并解决一些样式覆盖问题。在 GPU 上渲染动画浏览器已经优化了 CSS 动画使其适用于触发动画属性的重绘因此也包括回流。为了提高性能将具有动画效果的元素移动到 GPU 上。可以触发 GPU 硬件加速的 CSS 属性包括 transform、filter、will-change 和 position:fixed。动画将在 GPU 上处理提高性能特别是在移动设备上但避免过度使用因为可能会导致性能问题。使用 will-change CSS 属性来提高性能它通知浏览器元素需要修改的属性使浏览器能够在实际更改之前进行优化但避免过度使用 will-change在动画中遇到性能问题时考虑使用它。通过更改 className 批量修改元素样式。将复杂的动画元素定位为 fixed 或 absolute 以防止回流。避免使用表格布局因为在表格元素上触发回流会导致其中所有其他元素的回流。使用 translate 而不是修改 top 属性来上下移动 DOM 元素。创建多个 DOM 节点时使用 DocumentFragment 进行一次性创建。必要时为元素定义高度或最小高度没有显式高度动态内容加载可能会导致页面元素移动或跳动从而导致回流例如为图像定义宽度和高度以防止布局变化并减少回流。尽量减少深度嵌套或复杂选择器的使用以提高 CSS 渲染效率。对元素进行重大样式更改时暂时使用 display:none 隐藏它们进行更改然后将它们设置回 display:block。这样可以最小化回流只需两次即可。使用 contain CSS 属性将元素及其内容与文档流隔离防止其边界框外意外副作用的发生。
02图像压缩、切片和精灵
图像压缩 图像压缩至关重要。许多图像托管工具提供内置的压缩功能。如果需要手动压缩图像可以使用像TinyPNG这样的工具来帮助。图像切片 当显示大型图像例如实时渲染并且UI设计师不允许压缩时考虑将图像切片并使用CSS布局将其拼合在一起。精灵图 与图像切片不同精灵图涉及将许多小图像合并成一个大图像。这样在加载页面时只需要获取一个图像来显示多个页面元素。这可以显著提高页面加载速度。然而当调整页面布局时精灵图可能难以维护。
03字体文件压缩
在开发诸如特定活动的移动网页等项目时通常会使用font-face接口来导入字体文件以实现更丰富的排版效果。然而完整的字体文件往往有 几M 大小。加载这样的文件可能会阻塞页面渲染导致文字显示延迟。
解决方案 可以使用Font-spider从字体文件中提取出只有必要的字符。
04延迟加载/预加载资源
懒加载 懒加载是指仅在图像进入浏览器视口时加载图像。图像最初设置为占位符通常是 1x1px 图像。加载图像的决定基于图像的 offsetTop 减去页面的 scrollTop 是否小于或等于浏览器视口的 innerHeight。预加载 资源提示包括预连接、预加载、预获取等允许您指定要提前加载的资源。这可以基于当前页面或应用程序状态、用户行为或会话数据。这些资源提示方法可以通过预加载必要的资源来增强性能。实现选项包括使用链接标签进行 DNS 预取、子资源、预加载、预获取、预连接、预渲染以及使用本地存储进行本地存储。
二捆绑优化
01Webpack 用于 resolve.alias 的优化同样适用于 Vite
resolve.alias配置将原始导入路径映射到新的导入路径具有两个目的
创建别名减少查找时间。
例如
resolve: {alias: {alias: {‘vue$’: ‘vue/dist/vue.esm.js’,‘’: resolve(‘src’),}
}
02Webpack对解决方案的优化(也适用于 Vite)
resolve.extensions 表示要尝试的文件扩展名列表。它还会影响构建性能并默认为
extensions: [.js, .json].js, .json]
例如当遇到像 require(./data) 这样的导入语句时Webpack 首先会查找 ./data.js。如果未找到它将搜索 ./data.json如果仍未找到它将抛出错误。
因此建议尽量保持扩展名列表尽可能简洁省略不太可能出现的情况。将最常用的文件扩展名放在最前面以加快搜索过程。
resolve: {extensions: [.js, .vue, .json],.js, .vue, .json],
}
03webpack 限定 loader 的加载范围不适用于 Vite
加载器loader可能会消耗大量性能因此在配置加载器时可以使用 include 和 exclude 来限制范围从而优化性能。
例如
{test: /\.svg$/,test: /\.svg$/,loader: ‘svg-sprite-loader’,include: [resolve(‘src/icons’)],
}
04使用 webpack || Vite 拆分代码
在没有任何配置的情况下Webpack 4会自动处理代码拆分。入口文件的依赖项被捆绑到main.js中而大于30kb的第三方包例如echarts、xlsx、dropzone被单独捆绑到独立的包中。其他异步加载的页面或组件成为单独的块。
Webpack内置的代码拆分策略
新块是否来自共享或node_modules。新块在压缩前的大小是否大于30kb。异步加载块的并发请求计数是否小于或等于5。初始页面加载的并发请求计数是否小于或等于3。
我们可以根据项目的需要调整配置。以下是Webpack代码拆分的示例配置
splitChunks({cacheGroups: {vendors: {name: chunk-vendors,test: /[\\/]node_modules[\\/]/,priority: -10,chunks: ‘initial’,},dll: {name: chunk-dll,test: /[\\/]bizcharts|[\\/]\antv[\\/]data-set/,priority: 15,chunks: ‘all’,reuseExistingChunk: true},common: {name: chunk-common,minChunks: 2,priority: -20,chunks: ‘all’,reuseExistingChunk: true},}
})
对于 Vite 同样可以执行对应拆分操作
build: {rollupOptions: {output: {chunkFileNames: ‘js/[name]-[hash].js’,entryFileNames: ‘js/[name]-[hash].js’,assetFileNames: ‘[ext]/[name]-[hash].[ext]’}}
}
05:Tree Shaking摇树优化
Tree shaking 是一种从项目中删除未使用代码的技术。它依赖于 ES 模块语法。例如当使用 lodash 时
// Bad: This imports the entire lodash library
import _ from lodash;
// Good: This imports only the isEmpty function from lodash
import _isEmpty from lodash/isEmpty;
Tree Shaking 在很大程度上减少了捆绑包的大小是性能优化的重要部分。 Vite 和 Webpack 4.x 默认情况下都启用了 Tree Shaking。
06在 Vite 中禁用不必要的构建配置
Vite 还提供了优化构建配置的选项。以下是禁用某些构建功能的示例
build: { terserOptions: {compress: {// Remove console in production// Remove console in productiondrop_console: true,drop_debugger: true,},},// Disable file size reportingreportCompressedSize: false,// Disable source map generation to reduce bundle size (important for production)sourcemap: false, // Disable this for production to minimize bundle size}
三整体优化
01服务端渲染(SSR)
服务器端渲染SSR是指在服务器上完成的渲染过程。最终渲染的HTML页面通过HTTP协议发送到客户端。在SEO和首次加载速度方面SSR提供了显著的好处。
Vue可以通过 Nuxt.js 实现React可以通过 Next.js 实现
02启用GZIP压缩
Gzip压缩通过压缩文件显着提高了首次加载速度。使用Gzip可以将文本文件压缩至原始大小的至少40%。不过需要注意的是图像文件不应该使用Gzip压缩。
在构建过程中设置Gzip压缩的步骤如下
在Vue项目中安装Gzip压缩所需的依赖并将productionGzip设置为true以启用Gzip压缩。
npm install --save-dev compression-webpack-plugin--save-dev compression-webpack-plugin
修改构建命令以使用Gzip压缩。不过需要注意这可能会遇到错误“ValidationError: Compression Plugin Invalid Options”。为了解决这个问题根据官方文档将设置从“asset”更改为“filename”。再次运行构建命令 npm run build你将生成 .gz 文件表示成功压缩。
03Brotli 压缩
Brotli是开源的一种新型压缩算法2015 年 Google 推出Github 地址https://github.com/google/brotli Brotli压缩比Gzip压缩性能更好。开启Brotli压缩功能后CDN节点会对资源进行智能压缩后返回缩小传输文件大小提升文件传输效率减少带宽消耗。 启用Brotli压缩可以将CDN流量额外减少20%相较于Gzip。在各种情况下Brotli的性能比Gzip高出17-25%特别是当设置为级别1时超过了Gzip级别9的压缩效果。数据来自 Google 数据报告https://quixdb.github.io/squash-benchmark/unstable/
大多数主流浏览器都支持Brotli压缩除了Internet Explorer和Opera Mini。
要在Vite项目中启用Brotli压缩可以使用vite-plugin-compression插件。修改您的.env.production文件相应地设置VITE_COMPRESSION全局变量。 # 默认情况下禁用压缩#默认情况下禁用压缩:VITE_COMPRESSION none# 以下配置支持在不删除原始文件的情况下进行压缩:Enable Gzip compression:VITE_COMPRESSION gzip# 启用Brotli压缩:VITE_COMPRESSION brotli# 同时启用GZIP和Brotli压缩:VITE_COMPRESSION both# 以下配置启用压缩和删除原始文件:Enable Gzip compression:VITE_COMPRESSION gzip-clear# 启用Brotli压缩:VITE_COMPRESSION brotli-clear# 同时启用GZIP和Brotli压缩:VITE_COMPRESSION both-clear
04缓存问题
缓存是一种基本的优化技术通过减少IO操作和CPU计算来提高性能。性能优化的第一条规则是优先考虑缓存。
缓存选项包括浏览器缓存、CDN缓存、反向代理、本地缓存、分布式缓存和数据库缓存。
05Ajax 缓存
Ajax 缓存请求的 URL 和响应结果以提高页面响应速度和用户体验。在进行 Ajax 请求时尽量使用 GET 方法以利用客户端缓存并增强请求速度。
06组件导入
使用第三方组件库时只导入必要的组件例如
import { Button } from ‘vant’
07动态加载
使用import()在需要时动态导入第三方库和组件。例如在测试环境中只有当主机域名不是生产域名时才启用VConsole调试。
if (location.host ! ‘production-domain’) {import(‘/utils/vconsole’);import(‘/utils/vconsole’);
}
08异步组件加载
使用 import 或 require 方法异步加载组件
() import(‘/pages/xxx.vue’)resolve require([/pages/xxx.vue], resolve)
09懒加载路由
懒加载路由是在路由配置中应用异步组件加载的一种方式
{path: /index,/index,name: index,component: () import(view/xxx.vue),meta: { title: Homepage }
}
10CDN内容分发
内容传送网络CDN将静态文件、音频、视频、JavaScript 资源、图片等分发到全球各地的服务器。通过从附近的 CDN 服务器提供资源可以减少延迟并提高加载速度。
11域名分片(Domain sharding)
由于浏览器限制了每个域domain的活动连接数。为了可以同时下载超过该限制数的资源域名分片domain sharding会将内容拆分到多个子域中。当使用多个域来处理多个资源时浏览器能够同时下载更多资源从而缩短了页面加载时间并改善了用户体验。
12DNA预取
DNS-prefetch 尝试在请求资源之前解析域名 当浏览器从第三方服务器请求资源时必须先将该跨源域名解析为 IP 地址然后浏览器才能发出请求。此过程称为 DNS 解析。虽然 DNS 缓存可以帮助减少此延迟但 DNS 解析可能会给请求增加明显的延迟。对于打开了与许多第三方的连接的网站此延迟可能会大大降低加载性能。
dns-prefetch 可帮助开发人员掩盖 DNS 解析延迟。
HTML 元素通过设置 rel 属性值为 dns-prefetch 提供此功能
html langenheadmeta charsetutf-8 /meta nameviewport contentwidthdevice-width,initial-scale1 /!-- dns-prefetch --link reldns-prefetch hrefhttps://fonts.googleapis.com/ /!-- 其他 head 元素 --/headbody!-- 页面内容 --/body
/html
13Web Workers
Web Workers 为 JavaScript 创建了一个多线程环境允许任务在后台运行而不阻塞主线程。对于计算密集型任务使用 Web Workers 可以优化性能。
