中国门户网站建设重要性,wordpress 小程序开发,医疗网站建设网站,沧州市建设局网站前端性能优化是提升用户体验的关键#xff0c;页面加载速度、响应时间和交互流畅度直接影响用户的留存率和满意度。以下是常用的前端性能优化方法#xff0c;从网络层、资源加载、JavaScript 执行、渲染性能等方面进行全方位优化。
减少 HTTP 请求
合并文件#xff1a;将多…前端性能优化是提升用户体验的关键页面加载速度、响应时间和交互流畅度直接影响用户的留存率和满意度。以下是常用的前端性能优化方法从网络层、资源加载、JavaScript 执行、渲染性能等方面进行全方位优化。
减少 HTTP 请求
合并文件将多个 CSS 和 JS 文件合并减少请求次数。使用图像精灵将多个小图标合并到一张图片通过 CSS 的 background-position 定位减少图片请求数量。
文件压缩与打包
压缩代码使用工具如 Webpack、Gulp、UglifyJS 等去除代码中的空格、注释等无关内容。图片压缩通过工具如 TinyPNG、ImageOptim优化图片文件大小。
启用浏览器缓存
通过设置 HTTP 头中的 Cache-Control 或 Expires允许浏览器缓存静态资源减少重复加载。
异步加载 JS 和 CSS
JS 异步加载使用 async 或 defer 属性异步加载脚本避免阻塞页面渲染。CSS 资源加载优化将关键 CSS 写入 HTML 的 非关键样式表异步加载。
减少 DOM 操作
频繁的 DOM 操作开销较大尽量批量修改 DOM 或使用虚拟 DOM如 React 中的 Virtual DOM进行优化
使用现代浏览器特性
利用浏览器的预加载、预解析功能如 prefetch、preload提前加载后续可能需要的资源。
提升 CSS 选择器性能
尽量使用简单、高效的 CSS 选择器避免使用层级过深的选择器。
减少重绘和回流
尽量减少对 DOM 的频繁修改尤其是影响布局的修改避免引发页面重绘Repaint和回流Reflow。
使用 HTTP/2
相较于 HTTP/1.1HTTP/2 可以实现多路复用提升传输效率。
服务端渲染 (SSR) 和静态生成 (SSG)
对于复杂的 JavaScript 框架如 React、Vue 等前端渲染可能导致首屏白屏时间过长。 可以考虑SSR (Server-Side Rendering)在服务器端预先渲染页面用户访问时直接看到 HTML 内容减少客户端的渲染负担。Next.js 和 Nuxt.js 是常用的支持 SSR 的框架。SSG (Static Site Generation)生成静态 HTML 文件用于服务适合于内容不经常变动的网站如博客等。
减少 JavaScript 运行时开销
过多的 JavaScript 会导致页面运行时性能下降尤其是在低端设备上。可以通过以下方式优化
减少第三方库的使用许多第三方库如 lodash可能只用到其中一小部分功能但引入整个库会造成代码冗余。可以通过 Tree Shaking 或按需引入解决
import { debounce } from lodash; // 仅引入特定功能
惰性初始化将一些不必要的逻辑推迟到实际需要时再初始化避免页面加载时的开销。避免长任务长时间运行的 JavaScript 会阻塞主线程影响页面交互。可以使用 requestIdleCallback 或将任务分批次执行。
window.requestIdleCallback(() {// 在浏览器空闲时执行任务
});优化图片和视频
响应式图片使用 srcset 和 sizes 标签为不同设备提供不同尺寸的图片确保移动设备不会加载过大的图片。延迟加载非关键图片和视频使用 loading“lazy” 属性实现懒加载或者结合 Intersection Observer API 延迟加载
img srcimage.jpg loadinglazy /图片转 base64 格式
将小图片转换为 base64 编码字符串并写入 HTML 或者 CSS 中减少 http 请求转 base64 格式的优缺点 1它处理的往往是非常小的图片因为 Base64 编码后图片大小会膨胀为原文件的 4/3如果对大图也使用 Base64 编码后者的体积会明显增加即便减少了 http 请求也无法弥补这庞大的体积带来的性能开销得不偿失 2在传输非常小的图片的时候Base64 带来的文件体积膨胀、以及浏览器解析 Base64 的时间开销与它节省掉的 http 请求开销相比可以忽略不计这时候才能真正体现出它在性能方面的优势
使用字体图标
Tree shaking 的作用消除无用的 JS 代码减少代码体积tree-shaking 原理 1依赖于 ES6 的模块特性ES6 模块依赖关系是确定的和运行时的状态无关可以进行可靠的静态分析这就是 tree-shaking 的基础 2静态分析就是不需要执行代码就可以从字面量上对代码进行分析。ES6 之前的模块化比如 CommonJS 是动态加载只有执行后才知道引用的什么模块就不能通过静态分析去做优化正是基于这个基础上才使得 tree-shaking 成为可能
合理使用 Tree shaking
内容传递网络 (CDN)
CDN利用全球分布的边缘服务器缩短请求路径提升资源加载速度。CDN 还可以自动进行图片压缩和优化提供不同设备适配的资源。
性能监控与分析工具
要持续优化前端性能必须使用监控工具分析性能瓶颈
LighthouseGoogle 提供的开源工具可以分析网页的性能、可访问性、SEO 等并给出优化建议。Performance API浏览器内置的性能 API可以在代码中插入时间戳记录任务执行时间
performance.mark(startTask);
// 任务执行
performance.mark(endTask);
performance.measure(taskDuration, startTask, endTask);Webpack Bundle Analyzer用于分析打包后文件的大小和组成找到性能瓶颈删除不必要的依赖。
预加载和预渲染 (Prefetching/Prerendering)
Prefetch提前加载用户可能访问的资源如下一页所需的 JS、CSS、图片等减少未来页面跳转时的加载时间。
link relprefetch hrefnext-page.html /Prerender提前在后台渲染用户可能访问的页面当用户访问时能立即呈现内容。
link relprerender hrefnext-page.html
路由懒加载 SPA 项目一个路由对应一个页面如果不做处理项目打包后会把所有页面打包成一个文件当用户打开首页时会一次性加载所有的资源造成首页加载很慢降低用户体验 加载前提的实现ES6 的动态地加载模块——import() 调用 import() 之处被作为分离的模块起点意思是被请求的模块和它引用的所有子模块会分离到一个单独的 chunk 中。 要实现懒加载就得先将进行懒加载的子模块分离出来打包成一个单独的文件 webpackChunkName 作用是 webpack 在打包的时候对异步引入的库代码lodash进行代码分割时设置代码块的名字。webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中
骨架屏优化白屏时长
使用骨架屏可以缩短白屏时间提升用户体验。国内大多数的主流网站都使用了骨架屏特别是手机端的项目SPA 单页应用无论 vue 还是 react最初的 html 都是空白的需要通过加载 JS 将内容挂载到根节点上这套机制的副作用会造成长时间的白屏常见的骨架屏插件就是基于这种原理在项目打包时将骨架屏的内容直接放到 html 文件的根节点中
requestAnimationFrame 制作动画 requestAnimationFrame 是浏览器专门为动画提供的 API它的刷新频率与显示器的频率保持一致使用该 api 可以解决用 setTimeout/setInterval 制作动画卡顿的情况 setTimeout/setInterval、requestAnimationFrame 三者的区别 1引擎层面 setTimeout/setInterval 属于 JS 引擎requestAnimationFrame 属于 GUI 引擎 JS 引擎与 GUI 引擎是互斥的也就是说 GUI 引擎在渲染时会阻塞 JS 引擎的计算 2时间是否准确 requestAnimationFrame 刷新频率是固定且准确的但 setTimeout/setInterval 是宏任务根据事件轮询机制其他任务会阻塞或延迟 js 任务的执行会出现定时器不准的情况 3性能层面 当页面被隐藏或最小化时setTimeout/setInterval 定时器仍会在后台执行动画任务而使用 requestAnimationFrame 当页面处于未激活的状态下屏幕刷新任务会被系统暂停
长列表虚拟滚动
首页中不乏有需要渲染长列表的场景当渲染条数过多时所需要的渲染时间会很长滚动时还会造成页面卡顿整体体验非常不好虚拟滚动——指的是只渲染可视区域的列表项非可见区域的不渲染在滚动时动态更新可视区域该方案在优化大量数据渲染时效果是很明显的 相关链接
演示地址 获取更多 源码地址
