前端项目性能优化方案有哪些

简介: 前端项目性能优化方案有哪些

一、加载优化——减少http请求;

减少http请求数有以下几种

  • 合并图片:当图片较多的时候,像雪碧图、精灵图可以合并为一张大图,从而减少hhttp请求数。经常变化的图片不大合适,变化相对稳定的图片可以考虑。
  • 合并压缩css样式表和js脚本:都是为了减少http请求。
  • 首屏加载:首屏快速显示可大大的提升用户对页面速度。
  • 充分利用缓存:来减少向服务器发送的请求,节省网络资源,所有静态资源都要在服务器端并设置缓存,并且尽量使用长缓存。
  • 预加载:大型资源页面可以使用Loading,资源加载完成后再显示页面,但是加载时间过长,会造成负体验。
  • 异步加载第三方资源:第三方资源不可控,会影响页面加载,所以要异步加载第三方资源。

二、图片优化;

图片优化的方法

  • 尽可能地使用png格式的图片,他相对来说体积小,可以使用工具压缩。
  • 同时在代码中进行图片的延迟加载,也叫做懒加载。
  • 避免img,iframe等标签的src属性为空:空的src会重新加载当前页面,影响速度和效率。
  • 图像尽量避免使用dataUrl:dataUrL图像没有使用像图像压缩算法,文件会变大,并且要解码后再渲染,加载慢耗时长。

三、开启GZIP(代码压缩)

  1. Gzip即数据压缩,前端生产环境中将js、css、图片等文件进行压缩,通过减少数据传输量减小传输时间,节省服务器网络带宽,提高前端性能。

三、样式表和JS文件的优化

  1. 头部内联的样式和脚本会阻塞页面的渲染,一般我们会把css样式表文件放在文件的头部使用link引入,这样就可以让css样式表尽早地完成下载。
  2. 对应的js脚本文件,一般我们把脚本放在尾部并使用异步方式加载,这样可以尽最大限度的减少样式和脚本对页面的阻塞。

四、脚本优化

  • 复杂动画效果,使用绝对定位让其脱离文档流,避免循环DOM元素,用transform:translate 代替 position left、right…以此来尽量减少回流和重绘
  • 缓存.length的值:每次.length计算使用一个变量保存值。
  • 尽量使用事件委托:不给每个子节点单独设置事件监听器,而是设置在其父节点上,然后利用冒泡原理设置每个子节点,避免批量绑定事件以此来减少内存消耗和DOM操作

五、前端代码结构的优化

  • 设置viewprot:HTML的viewport可加快页面的渲染。
  • 减少DOM结点:DOM结点太多会影响页面的渲染。
  • 尽量使用css3动画:合理使用requestAnimationFrame动画代替setTimeout。
  • 优化高频事件:scroll、touchmove等事件尽量使用函数防抖节流等进行限制


相关文章
|
2月前
|
前端开发 JavaScript 定位技术
一、前端高德地图注册、项目中引入、渲染标记(Marker)and覆盖物(Circle)
文章介绍了如何在前端项目中注册并使用高德地图API,包括注册高德开放平台账号、引入高德地图到项目、以及如何在地图上渲染标记(Marker)和覆盖物(Circle)。
72 1
|
28天前
|
前端开发 JavaScript 开发者
前端开发中的组件化设计与性能优化
【10月更文挑战第7天】前端开发中的组件化设计与性能优化
32 0
|
16天前
|
JavaScript 前端开发 Docker
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
在使用 Deno 构建项目时,生成的可执行文件体积较大,通常接近 100 MB,而 Node.js 构建的项目体积则要小得多。这是由于 Deno 包含了完整的 V8 引擎和运行时,使其能够在目标设备上独立运行,无需额外安装依赖。尽管体积较大,但 Deno 提供了更好的安全性和部署便利性。通过裁剪功能、使用压缩工具等方法,可以优化可执行文件的体积。
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
|
7天前
|
前端开发 数据可视化 搜索推荐
深入剖析极态云优雅的前端框架设计方案(上)
最近在体验极态云,这款低代码软件开发产品,发现其前端框架设计方案很优雅很强大! 在接下来的学习过程中,我将持续输出自己对极态云前端框架设计方案的深入理解,包括具体的使用技巧、优势分析以及可能的应用场景等方面的内容,希望能为大家提供有价值的参考。
|
5天前
|
前端开发 Unix 测试技术
揭秘!前端大牛们如何高效管理项目,确保按时交付高质量作品!
【10月更文挑战第30天】前端开发项目涉及从需求分析到最终交付的多个环节。本文解答了如何制定合理项目计划、提高团队协作效率、确保代码质量和应对项目风险等问题,帮助你学习前端大牛们的项目管理技巧,确保按时交付高质量的作品。
18 2
|
1月前
|
前端开发 JavaScript 应用服务中间件
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
177 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
|
17天前
|
缓存 前端开发 JavaScript
前端架构思考:代码复用带来的隐形耦合,可能让大模型造轮子是更好的选择-从 CDN 依赖包被删导致个站打不开到数年前因11 行代码导致上千项目崩溃谈谈npm黑洞 - 统计下你的项目有多少个依赖吧!
最近,我的个人网站因免费CDN上的Vue.js包路径变更导致无法访问,引发了我对前端依赖管理的深刻反思。文章探讨了NPM依赖陷阱、开源库所有权与维护压力、NPM生态问题,并提出减少不必要的依赖、重视模块设计等建议,以提升前端项目的稳定性和可控性。通过“left_pad”事件及个人经历,强调了依赖管理的重要性和让大模型代替人造轮子的潜在收益
|
2月前
|
存储 缓存 前端开发
灵魂拷问-前端到底能做些什么?--性能优化篇
作者最近在尝试对负责的平台进行性能优化,本文整理了些前端性能优化的一些常见策略。
|
2月前
|
前端开发
|
22天前
|
缓存 前端开发 UED
前端 8 种图片加载优化方案梳理
本文首发于微信公众号“前端徐徐”,详细探讨了现代网页设计中图片加载速度优化的重要性及方法。内容涵盖图片格式选择(如JPEG、PNG、WebP等)、图片压缩技术、响应式图片、延迟加载、CDN使用、缓存控制、图像裁剪与缩放、Base64编码等前端图片优化策略,旨在帮助开发者提升网页性能和用户体验。
122 0