常见前端项目性能优化方案

这篇具有很好参考价值的文章主要介绍了常见前端项目性能优化方案。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

常见前端项目性能优化方案

一、页面内容优化

  1. 减少http请求次数
  2. 减少DNS查询次数
  3. 避免页面跳转
  4. 缓存ajax
  5. 延迟加载(一般用在图片多的页面中,滚动时才加载)
  6. 预加载
  7. 减少DOM元素数量
  8. 减少iframe数量
  9. 避免404

二、css优化

  1. 将样式表置顶将 (CSS放在 HEAD中,防止浏览器有可能还未下载和解析到 CSS就已经开始渲染页面)
  2. 避免css表达式
  3. 用link代替@import ; 使用css@import会造成额外的请求
  4. 避免使用filters
  5. css文件合并与压缩

三、js代码优化

  1. 将脚本置底(将脚本内容在页面信息内容加载后再加载)
  2. 使用外部javascript和css文件
  3. 去除重复脚本,避免重复的资源请求
  4. 减少DOM访问(修改和访问DOM元素会造成页面的重绘和重排,循环对DOM操作更是减慢页面加载速度)
  5. js文件合并与压缩

四、图片优化

  1. 优化图片大小
  2. 尽量使用css sprite(精灵图也叫雪碧图)
  3. 不要在html中缩放图片
  4. 使用小且可缓存的favicon.ico
  5. 在代码中进行图片的延迟加载,也叫做赖加载。
  6. 避免img、iframe等标签的src属性为空:空src会重新加载当前页面,影响速度和效率。
  7. 图像尽量避免使用DataURL:DataURL图像没有使用图像压缩算法,文件会变大,并且要解码后再渲染,加载慢耗时长。

五、减少Cookie传输

  1. Cookie包含在每次请求和响应中,太大的Cookie会严重影响数据传输,因此哪些数据需要写入Cookie需要慎重考虑,尽量减少Cookie中传输的数据量

六、浏览器端使用缓存

  1. CSS、JavaScript、Logo、图标这些静态资源文件更新的频率都比较低,而这些文件又几乎是每次HTTP请求都需要的,如果将这些文件缓存在浏览器中,可以极好地改善性能。
  2. 用法:通过设置HTTP头中的Cache-Control和Expires属性,可设定浏览器缓存,缓存时间可以是数天,甚至是数月。

七、服务器端使用压缩

  1. 在服务器端对文件进行压缩,在浏览器对文件解压缩,可有效减少通信传输的数据量。文本文件的压缩率可达80%以上,因此HTML、CSS、JavaScript文件启用GZip压缩可达到较好的效果。但是压缩对服务器和浏览器产生一定的压力,在通信带宽良好,而服务器资源不足的情况下要权衡考虑。

八、减少资源大小

html压缩
html代码压缩就是压缩在文本文件中有意义,但是在html中不显示的字符,包括空格,制表符

css压缩
css压缩包括无效代码删除与css语义合并

js压缩与混乱
js压缩与混乱包括无效字符及注释的删除、代码语义的缩减和优化、降低代码的可读性、实现代码的保护

图片压缩

九、优化网络连接

1 使用CDN
CDN是内容分发网络,它能够实时地根据网络流量和各个节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上,其目的是使用户可以就近的取得所需内容,解决网络拥挤的状况,提高网站的响应速度

2 使用DNS预解析
当浏览器访问一个域名的时候,需要解析一次DNS,获得对应域名的ip地址,在解析过程中,按照浏览器缓存、系统缓存、路由器换算、DNS缓存、域名服务器的顺序,逐步读取缓存,直到拿到ip地址

3 持久连接
使用keep-alive或者persistent来建立持久连接,降低了延时和连接建立的开销

十、优化资源加载

1 资源加载位置
通过优化资源加载位置,更改资源加载时机,使尽可能快地展示出页面内容,尽可能快地使用功能可用

2 资源加载时机
3.异步script标签
defer:异步加载,在html解析完成后执行。defer的实际效果与将代码放在body底部类似
async:异步加载,加载完成后立即执行
4.模块按需加载

5.使用资源预加载preload和资源预读取prefetch
preload让浏览器提前加载指定资源,需要执行时候再执行,可以加快当前页面的加载速度
prefetch告诉浏览器加载下一个页面可能会用到的资源,可以加速下一个页面的加载速度

6.资源懒加载与资源预加载(错峰操作)
资源延迟加载也称为资源懒加载,延迟加载资源或符合某些条件的时候才加载某些资源
资源预加载是提前加载用户所需的资源,保证良好的用户体验
资源懒加载和资源预加载都是一种错峰操作,在浏览器忙碌的时候不能操作,浏览器空闲的时候再加载资源,优化了网络性能

十一**、**减少重绘回流

十二**、**用对选择器

id选择器选择元素是最快的

十三**、**不滥用WEB字体

WEB字体需要下载、解析、重绘当前页面,尽量减少使用。

十四**、**选用性能更好的api

十五、使用web worker

Web Worker是HTML5提供的一个javascript多线程解决方案,可以将一些大计算量的代码交由web Worker运行,从而避免阻塞用户界面,在执行复杂计算和数据处理时,这个API非常有用。但是,要注意其浏览器兼容性。

十六**、**减少重定向

尽量避免使用重定向,当页面发生了重定向,就会延迟整个HTML文档的传输。在HTML文档到达之前,页面中不会呈现任何东西,也没有任何组件会被下载,降低了用户体验

如果一定要使用重定向,如http重定向到https,要使用301永久重定向,而不是302临时重定向。因为,如果使用302,则每一次访问http,都会被重定向到https的页面。而永久重定向,在第一次从http重定向到https之后 ,每次访问http,会直接返回https的页面

十七开启Gzip(代码压缩)

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

十八、事件代理(事件委托)

事件代理的原理是DOM元素的事件冒泡

  1. 可以大量节省内存占用,减少事件注册,比如在table上代理所有td的click事件就非常棒
  2. 可以实现当新增子对象时无需再次对其绑定

十九、防抖和节流

使用函数节流(throttle)或函数去抖(debounce),限制某一个方法的频繁触发

二十、webpack优化

【打包公共代码】

使用CommonsChunkPlugin插件,将公共模块拆出来,最终合成的文件能够在最开始的时候加载一次,便存到缓存中供后续使用。这会带来速度上的提升,因为浏览器会迅速将公共的代码从缓存中取出来,而不是每次访问一个新页面时,再去加载一个更大的文件

webpack 4 将移除 CommonsChunkPlugin, 取而代之的是两个新的配置项 optimization.splitChunks 和 optimization.runtimeChunk

通过设置 optimization.splitChunks.chunks: “all” 来启动默认的代码分割配置项

【动态导入和按需加载】

webpack提供了两种技术通过模块的内联函数调用来分离代码,优先选择的方式是,使用符合 ECMAScript 提案 的 import() 语法。第二种,则是使用 webpack 特定的 require.ensure

【剔除无用代码】

tree shaking 是一个术语,通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性,例如 import 和 export。这个术语和概念实际上是兴起于 ES2015 模块打包工具 rollup

JS的tree shaking主要通过uglifyjs插件来完成,CSS的tree shaking主要通过purify CSS来实现的

【长缓存优化】

1、将hash替换为chunkhash,这样当chunk不变时,缓存依然有效

2、使用Name而不是id

每个 module.id 会基于默认的解析顺序(resolve order)进行增量。也就是说,当解析顺序发生变化,ID 也会随之改变

下面来使用两个插件解决这个问题。第一个插件是 NamedModulesPlugin,将使用模块的路径,而不是数字标识符。虽然此插件有助于在开发过程中输出结果的可读性,然而执行时间会长一些。第二个选择是使用 HashedModuleIdsPlugin,推荐用于生产环境构建

【公用代码内联】

使用html-webpack-inline-chunk-plugin插件将mainfest.js内联到html文件中

【缩小构建目标,排除 Webpack 不需要解析的模块】

排除 Webpack 不需要解析的模块。即使用 loader 的时候,在尽量少的模块中去使用。我们可以借助 include 和 exclude 这两个参数,规定 loader 只在那些模块应用和在哪些模块不应用。文章来源地址https://www.toymoban.com/news/detail-581185.html

到了这里,关于常见前端项目性能优化方案的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端项目中CDN的一些问题【性能优化篇】

    CDN(Content Delivery NetWork, 内容分发网络 ),是指 利用最靠近每位用户的服务区 ,更快的将资源发送给用户。 提高用户的访问速度 减轻服务器压力 提高网站的稳定性和安全性 CDN一般用来托管Web资源(文本、图片和视频等),可供下载的资源,应用程序。使用CDN来加速这些

    2024年02月03日
    浏览(50)
  • nodejs项目实战教程01——http服务和URL类,前端开发社招面试解答之性能优化

    需要在终端重新执行一次node app.js浏览器的内容才会刷新 4.如何获取url中的参数 ============================================================================ 4.1 URL类基础 建议大家可以先看看Node.js API文档中的url 网址部分,这里做简要说明。url字符串在nodejs的url模块,有两种解析API,其中旧版的

    2024年04月11日
    浏览(46)
  • vue - 常见的性能优化

    1, v-for 遍历避免同时使用 v-if 在 Vue2 中 v-for 优先级更高,所以编译过程中会把列表元素全部遍历生成虚拟 DOM,再来通过 v-if 判断符合条件的才渲染,就会有多余的逻辑判断和造成性能的浪费,因为我们希望的是不符合条件的虚拟 DOM都不要生成; 1,为了过滤一个列表中的项

    2024年02月16日
    浏览(46)
  • 前端面试:【性能优化】页面加载性能、渲染性能、资源优化

    嗨,亲爱的前端开发者!在今天的Web世界中,用户期望页面加载速度快、交互流畅。因此,前端性能优化成为了至关重要的任务。本文将探讨三个关键方面的性能优化:页面加载性能、渲染性能以及资源优化,以帮助你构建更快速、响应更快的Web应用程序。 1. 页面加载性能:

    2024年02月11日
    浏览(54)
  • 【Redis 神秘大陆】005 常见性能优化方式

    https://github.com/sohutv/cachecloud/blob/main/redis-ecs/script/cachecloud-init.sh 5.2.1 维度化缓存 在电商系统中,一个商品可能包含多个维度的数据,如基础属性、图片列表、上下架状态、规格参数、商品介绍等。针对这种情况,可以采用维度化缓存方案进行优化,以减少更新成本和服务压力

    2024年04月17日
    浏览(51)
  • NAND系统性能提升常见方案

    随着NAND的发展,针对NAND系统性能提升,业内目前主要的做法有以下几种方案: 1.提升总线频率和优化AC时序: 提高NAND闪存接口的工作频率可以显著加快数据传输速度 。通过不断改进工艺和技术,缩短了信号稳定时间、降低了延迟,从而在单位时间内传输更多比特的数据。

    2024年01月21日
    浏览(44)
  • 常见JVM参数配置和GC性能优化

    常见的JVM参数配置 垃圾回收统计信息 -XX:+PrintGC     打印GC简要信息 -XX:+PrintGCDetails打印GC的详细信息 -XX:+PrintGCTimeStamps打印CG发生的时间戳 -Xloggc:log/gc.log 指定GC log的位置,以文件输出 -XX:+PrintHeapAtGC 每一次GC前和GC后,都打印堆信息。 堆设置 -Xms:初始堆大,最小堆 -Xmx:最大

    2024年02月16日
    浏览(43)
  • 性能优化 - 前端性能监控和性能指标计算方式

    利用LightHouse进行合理的页面性能优化 这篇文章主要讲解了如何使用 Lighthouse 。 这里把相关图片再展示一下: 我们可以看到 Lighthouse 计算的时候,会根据这几个维度的指标来计算总分。那么本篇文章,就主要讲解下前端性能监控相关的重要指标含义和计算方式。 在介绍指标

    2024年02月15日
    浏览(62)
  • 前端--性能优化【上篇】--网络优化与页面渲染优化

    link标签的rel属性设置dns-prefetch,提前获取域名对应的IP地址 用户与服务器的物理距离对响应时间也有影响。 内容分发网络(CDN)是一组分散在不同地理位置的 web 服务器,用来给用户更高效地发送内容。典型地,选择用来发送内容的服务器是基于网络距离的衡量标准的。 优

    2024年02月08日
    浏览(44)
  • iOS 性能优化方案-弱网优化

    选择现有网络状态 或自定义网络状态 设置参数: 每个参数的含义大致如下: in bandwidth :下行带宽 in packet loss :下行丢包率 in delay :下行延迟(ms) out bandwidth :上行带宽 out packet loss :上行丢包率 out delay :上行延迟 DNS delay :DNS解析延迟,这个功能安卓不知道怎么模拟

    2024年02月09日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包