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

天翼云开发者社区
• 阅读 184

本文分享自天翼云开发者社区《前端项目性能优化方案有哪些》,作者:王****祺

一、加载优化(减少http请求数) 常用的减少HTTP请求的方法有以下几种: 1.合并图片:当页面图片较多时,可以将相似的图片合并为一张大图,从而减少HTTP请求次数。对于不经常变化的图片,使用精灵图或雪碧图进行合并,可以充分利用浏览器缓存提升性能。 2.合并压缩CSS样式表和JS脚本:将相似或通用的CSS和JS文件进行合并,压缩后减少HTTP连接数。这种方法可以减少资源文件的大小,从而提升网页加载速度。 3.去掉不必要的请求:在代码编写或系统升级之后,可能会有一些无效的链接残留在页面中,应该及时清理这些无效链接,以减少HTTP请求的次数。 4.首屏加载优化:优化首屏的加载,使得页面能够快速显示,可以提高用户对页面速度的感知。这一点非常重要,因为用户对首屏的体验印象会直接影响到页面的整体评价。 5.充分利用缓存:将静态资源放在服务器端,并设置合适的缓存策略,可以减少向服务器发送的请求数,节省网络资源。对于长期不变的静态资源,建议开启长缓存,使得浏览器能够更好地缓存这些资源文件,进一步加速页面加载速度 6.预加载:对于大型资源页面,可以先使用Loading进行资源预加载,资源加载完成后再显示页面。这不仅可以提前缓存资源,还可以完美展现Loading界面。需要注意的是,过长的加载时间可能会影响用户的体验。 7.异步加载第三方资源:第三方资源的加载时间不可控,可能会影响页面的加载速度,因此建议使用异步加载的方式,使得第三方资源不会影响主页面的加载速度。

二、图片优化 优化图片的方法如下: 1.使用PNG格式的图片:相对于其他图片格式,PNG格式的图片体积较小,可以使用压缩工具对其进行优化。在上线之前,应该对图片进行一定的压缩和优化。 2.延迟加载图片:使用延迟加载技术,也称为赖加载,在代码中进行图片的延迟加载,可以有效地提高页面的加载速度。 3.避免空src属性:应该避免在img、iframe等标签中使用空的src属性,因为空的src属性会重新加载当前页面,影响页面速度和效率。 4.避免使用DataURL:在加载图片时,尽量避免使用DataURL格式的图像。因为DataURL图像没有使用图像压缩算法,文件会变得很大,并且需要解码后再渲染图片,加载速度变慢,耗时长。

三、使用CDN 内容分发网络,即CDN,可将内容从中心媒体服务器分发到边缘服务器的网络架构。使用CDN有许多好处,例如低网络延迟和丢包率,负载分配,带宽节省和网站性能提升,用户能够就近获取所需内容,避免网络拥塞,从而提高了用户对网站的访问响应速度。 但是,如果网站的安全性对你来说非常重要,那么不应该使用公共CDN。在从CDN远程请求文件时,你的访问来源信息也会被发送过去,一些远程的JavaScript文件可能被修改用来收集用户或系统信息。此外,当你使用https协议时,可用的CDN就更加有限了。

四、开启Gzip(代码压缩) Gzip是一种数据压缩技术,在前端生产环境中可用于压缩js、css、图片等文件。通过减小数据传输量,Gzip可有效缩短传输时间,减轻服务器的网络带宽压力,同时提升了前端性能。

五、样式表和JS文件的优化 1.头部内联的样式和脚本可能会阻塞页面的渲染。为避免这种情况,通常我们可以使用link标签将CSS样式表文件放置在页面头部进行引入,以确保尽早地完成下载。 2.对于JS脚本文件,通常会将其放置在页面尾部,同时使用异步加载方式,以最/大程度地减少样式和脚本对页面渲染的阻塞。

六、减少不必要的Cookie Cookie存储在客户端,伴随着HTTP请求在浏览器和服务器之间传递,由于cookie在访问对应域名下的资源时都会通过HTTP请求发送到服务器,从而会影响加载速度,所以尽量减少不必要的Cookie。

七、脚本优化 1.如果需要实现复杂的动画效果,建议使用绝对定位,使其脱离文档流,避免对DOM元素进行循环操作。此外,使用transform:translate代替position left、right等属性可尽量减少回流和重绘带来的性能损失。 2.为了减少脚本对并发下载的影响,建议将脚本放置在页面底部进行加载。 3.为了减少每次计算缓存.length的性能开销,可以使用一个变量保存其值。 4.为了减少内存消耗和DOM操作,建议尽量使用事件委托。将事件监听器设置在父节点上,利用冒泡原理来设置每个子节点。 5.为了提高选择器的速度,建议尽量使用id选择器,因为其具有唯/一性、灵活性和优先级高的特点。

八、前端代码结构的优化 1.为了加速页面渲染,我们需要设置HTML的viewport。 2.DOM结点过多会降低页面的渲染性能,因此应尽量减少DOM结点的数量。 3.CSS3动画比setTimeout更加高效,应尽可能地使用requestAnimationFrame动画。 4.高频事件(如scroll、touchmove)应该进行优化,使用函数防抖和函数节流等技术来限制它们的执行频率。 5.避免过度使用WEB字体,因为它们需要下载、解析和重绘,这会影响页面的性能。 6.统一的文件命名规则和分类方式可以帮助我们更容易地维护项目中的文件。

九、SEO优化 1.在编写标题时,应避免过长,关注核心关键词和网站主题相关内容。 2.页面描述是对整个页面的综合说明,其作用和重要性仅次于页面标题。建议描述文字尽量吸引人,加入公司品牌和电话联系方式,并包括目标关键词。 3.对关键词进行优化,有助于用户在搜索时准确地找到所需的内容和网站,同时也有助于更多的有需要的人发现和访问网站。 4.对于大型网站来说,尽可能精简网站代码是非常重要的,因为这可以节省百度蜘蛛的爬行时间。

点赞
收藏
评论区
推荐文章
Dax Dax
2年前
前端性能优化
前端性能优化1、减少资源的请求次数和大小压缩合并js和css文件,减少http请求次数和请求资源的大小;在项目中使用webpackglup等打包编译工具2、尽量使用字体图标或者svg图标代替传统的png(jpg)图渲染更快,减少代码体积,且放大不会出现变形等3、使用图片懒加载目的是减少页面第一次加载的http请求次数,实现思路:
爱丽丝13 爱丽丝13
3年前
聊聊前端性能优化
为什么要做性能优化?性能优化有多重要?网站的性能对于用户的留存率、转化率有很大的影响,直白的说,提高网站的性能可以直接提高网站带来的收益。性能优化的分类前端的性能优化主要分为两类:1.加载时优化;2.运行时优化;例如压缩文件、使用CDN加载静态资源属于加载时优化;及时的解绑事件、减少DOM的操作属于运行时优化。吉
Alonso095 Alonso095
3年前
前端性能优化建议
性能优化是把双刃剑,有好的一面也有坏的一面。好的一面就是能提升网站性能,坏的一面就是配置麻烦,或者要遵守的规则太多。并且某些性能优化规则并不适用所有场景,需要谨慎使用,请读者带着批判性的眼光来阅读本文。本文相关的优化建议的引用资料出处均会在建议后面给出,或者放在文末。1.减少HTTP请求一个完整的HTTP请求需要经历DNS查找,
巴拉米 巴拉米
3年前
前端性能优化
为什么要做性能优化?性能优化有多重要?网站的性能对于用户的留存率、转化率有很大的影响,直白的说,提高网站的性能可以直接提高网站带来的收益。性能优化的分类前端的性能优化主要分为两类:1.加载时优化;2.运行时优化;例如压缩文件、使用CDN加载静态资源属于加载时优化;及时的解绑事件、减少DOM的操作属于运行时优化。吉
Souleigh ✨ Souleigh ✨
3年前
前端性能优化 - 雅虎军规
无论是在工作中,还是在面试中,web前端性能的优化都是很重要的,那么我们进行优化需要从哪些方面入手呢?可以遵循雅虎的前端优化35条军规,这样对于优化有一个比较清晰的方向.35条军规1.尽量减少HTTP请求个数——须权衡2.使用CDN(内容分发网络)3.为文件头指定Expires或CacheControl,使内容具有缓存性。4.避免空的
Easter79 Easter79
2年前
springboot2之优雅处理返回值
前言最近项目组有个老项目要进行前后端分离改造,应前端同学的要求,其后端提供的返回值格式需形如{"status":0,"message":"success","data":{}}方便前端数据处理。要实现前端同学这个需求,其实也挺简单的,
Wesley13 Wesley13
2年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
聊聊前端性能指标那些事儿
作为C端前端研发,除了攻克业务难点以外,也要有更深层的自我目标,那就是性能优化。这事儿说大不大,说小也不小,但难度绝对不一般,所涉及的范围优化点深入工程每个细胞。做好前端性能优化绝非简单之事!文章主要内容介绍前端性能考核指标及优化方案。
京东云开发者 京东云开发者
10个月前
实践指南-前端性能提升 270% | 京东云技术团队
本文详细介绍了一个前端项目优化的详细过程,从优化前的问题分析,到具体的优化措施,最终实现了前端性能提升了近3倍。同时也将性能指标落到监控平台,实现可视化的监控前端性能指标。
京东云开发者 京东云开发者
9个月前
React请求机制优化思路 | 京东云技术团队
说起数据加载的机制,有一个绕不开的话题就是前端性能,很多电商门户的首页其实都会做一些垂直的定制优化,比如让请求在页面最早加载,或者在前一个页面就进行预加载等等。
天翼云开发者社区
天翼云开发者社区
Lv1
天翼云是中国电信倾力打造的云服务品牌,致力于成为领先的云计算服务提供商。提供云主机、CDN、云电脑、大数据及AI等全线产品和场景化解决方案。
文章
542
粉丝
8
获赞
37