前端如何进行性能优化的方法(详细版本)

简介: 每当有人访问您网站上的页面时,浏览器都必须请求大量文件。这些HTTP请求直接影响网页的加载速度。通常,更少的HTTP请求意味着网站加载速度更快。 现在,网站的加载速度是搜索引擎排名的重要因素。平均而言,媒体页面加载速度为谷歌的10个结果只是1.65秒。

一.减少http的请求数量

每当有人访问您网站上的页面时,浏览器都必须请求大量文件。这些HTTP请求直接影响网页的加载速度。通常,更少的HTTP请求意味着网站加载速度更快。 现在,网站的加载速度是搜索引擎排名的重要因素。平均而言,媒体页面加载速度为谷歌的10个结果只是1.65秒。

1.删除不必要的图像

个人认为更多文件意味着更多请求。


删除一些项目中不在使用的图片,当让不要为了减少HTTP服务器请求而牺牲图像。这个想法是删除不必要的图像,而不是减少通常使用的图像数量。


2. 合并CSS和JavaScript文件

就像最小化一样,组合CSS和JavaScript文件也是减少网站总文件大小的一种很好的技术。


这个想法是将所有CSS和JavaScript文件合并为一个单独的文件。

例如,如果您的网站有4个外部JavaScript文件和3个外部CSS文件,则意味着7个请求。

但是,如果将3个CSS文件合并为一个CSS文件,并将4个JS文件合并为一个JS文件,则您的网站将仅发送2个请求,而不是7个。


3. 合并图片

当图片较多时,像精灵图,雪碧图可以合并为一张大图,从而减少http请求数。经常变化的图片可能不太合适,变化相对稳定的就可以考虑。合并大图除了能减少http 请求数外,还可以充分利用缓存来提升性能


4. 充分利用缓存

可以把一些数据写在浏览器的缓存中,这样我们获取一些数据就不需要向浏览器发送请求了


二.加快请求速度

  1. 预解析DNS
  2. 使用HTTP2.0
  3. 并行加载

三.图像的处理

1.缩小图像尺寸

我们可能已删除了合理数量的图像。但是,仍然会剩下很多图像。而且您无法摆脱它们。

因此我们的下一步是减少要在网页上使用的图像的文件大小。


我们可以使用shortpixel之类的工具来压缩所用图像的大小。此外,强烈建议使用网络友好的图像。例如,尽可能使用.jpg图像而不是.png。


2.图片懒加载

在一些图片比较多的网站图片是非常多的,如果我们在打开网页的一瞬间就把网站的所有图片加载出来,很有可能造成卡顿和白屏的现象,用户体验变得极其的差。


因为图片真的很多,一瞬间就把网站的所有图片加载出来浏览器短时间内根本处理不完,但是我们打开网站的那一瞬间仅仅只能看到视口内的图片。只去加载视口内的图片,就是懒加载技术。


3.图片预加载

图片预加载,是指在一些需要展示大量图片的网站,将图片提前加载到本地缓存中,从而提升用户体验。


4.渐进式图片

渐进式图片的意思是在高画质图像加载完之前会先显示低画质版本。低画质版本由于画质低、压缩率高,尺寸很小,加载很快。在两者之间我们也可以根据需要显示不同画质的版本。


四.利用Webpack来优化前端性能

Webpack详细解说链接: 如何利用Webpack来优化前端性能的?


五.CSS提高页面性能

CSS提高页面性能详细解说链接: CSS如何提高页面性能?


六.减小资源大小

1.压缩html,css,js,图片等文件(Webpack可以进行)

2.开启gzip进行压缩


HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术。大流量的WEB站点常常使用GZIP压缩技术来让用户感受更快的速度。这一般是指WWW服务器中安装的一个功能,当有人来访问这个服务器中的网站时,服务器中的这个功能就将网页内容压缩后传输到来访的电脑浏览器中显示出来。一般对纯文本内容可压缩到原大小的40%

相关文章
|
1月前
|
前端开发
如何解决前端工程化中出现的版本冲突问题?
如何解决前端工程化中出现的版本冲突问题?
48 4
|
29天前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
2月前
|
前端开发 JavaScript 开发者
前端开发中的组件化设计与性能优化
【10月更文挑战第7天】前端开发中的组件化设计与性能优化
52 0
|
25天前
|
JavaScript 前端开发 安全
2024年前端开发新趋势:TypeScript、Deno与性能优化
2024年前端开发迎来新趋势:TypeScript 5.0引入装饰器正式支持、const类型参数及枚举改进;Deno 1.42版推出JSR包注册表、增强Node.js兼容性并优化性能;性能优化策略涵盖代码分割、懒加载及现代构建工具的应用。这些变化推动前端开发向更高效率和安全性发展。
|
28天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
41 5
|
1月前
|
监控 前端开发 jenkins
Jenkins 在前端项目持续部署中的应用,包括其原理、流程以及具体的实现方法
本文深入探讨了Jenkins在前端项目持续部署中的应用,涵盖其基本原理、流程及具体实现方法。首先介绍了Jenkins的基本概念及其在自动化任务中的作用,随后详细解析了从前端代码提交到生产环境部署的全过程,包括构建、测试、部署等关键步骤。最后,强调了持续部署中的代码质量控制、环境一致性、监控预警及安全管理等注意事项,旨在帮助开发者高效、安全地实施持续部署。
59 5
|
24天前
|
前端开发 JavaScript 算法
探索现代前端框架——React 的性能优化策略
探索现代前端框架——React 的性能优化策略
21 0
|
24天前
|
前端开发 JavaScript API
探索现代前端框架——React 的性能优化策略
探索现代前端框架——React 的性能优化策略
26 0
|
2月前
|
存储 前端开发 JavaScript
前端的全栈之路Meteor篇(四):RPC方法注册及调用-更轻量的服务接口提供方式
RPC机制通过前后端的`callAsync`方法实现了高效的数据交互。后端通过`Meteor.methods()`注册方法,支持异步操作;前端使用`callAsync`调用后端方法,代码更简洁、易读。本文详细介绍了Methods注册机制、异步支持及最佳实践。
|
1月前
|
缓存 监控 前端开发
前端开发中的性能优化:策略与实践
前端开发中的性能优化:策略与实践
下一篇
DataWorks