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

简介: 每当有人访问您网站上的页面时,浏览器都必须请求大量文件。这些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%

相关文章
|
9天前
|
前端开发 JavaScript
前端基础(九)_this基本使用、this指向判断、改变this指向的方法
本文介绍了JavaScript中this的基本使用、this指向的判断以及改变this指向的方法。
23 1
前端基础(九)_this基本使用、this指向判断、改变this指向的方法
|
9天前
|
前端开发
前端基础(十四)_隐藏元素的方法
本文介绍了几种在前端开发中隐藏元素的方法,包括使用`display:none`、`visibility:hidden`、`opacity:0`等CSS属性,并提供了相应的示例代码。此外,还提到了其他隐藏元素的技巧,如通过设置元素位置、使用`overflow`属性和`filter`属性以及`rgba`颜色值来实现元素的隐藏。
29 1
前端基础(十四)_隐藏元素的方法
|
8天前
|
存储 缓存 前端开发
灵魂拷问-前端到底能做些什么?--性能优化篇
作者最近在尝试对负责的平台进行性能优化,本文整理了些前端性能优化的一些常见策略。
|
12天前
|
前端开发
|
9天前
|
前端开发
前端基础(十一)_Float浮动、清除浮动的几种方法
本文介绍了浮动的概念、属性、特性以及清除浮动的几种方法,并通过实例演示了如何使用CSS实现元素的浮动和处理浮动带来的问题。
28 3
|
2月前
|
JavaScript 前端开发 Java
SpringBoot + Vue 前端后分离项目精进版本
这篇文章详细介绍了一个基于SpringBoot + Vue的前后端分离项目的搭建过程,包括前端Vue项目的初始化、依赖安装、页面创建和路由配置,以及后端SpringBoot项目的依赖添加、配置文件修改、代码实现和跨域问题的解决,最后展示了项目运行效果。
SpringBoot + Vue 前端后分离项目精进版本
|
1月前
|
前端开发 JavaScript
前端ES5 | js —添加元素方法
前端ES5 | js —添加元素方法
|
2月前
|
缓存 前端开发 JavaScript
Rails应用慢如蜗牛?揭开数据库到前端的全方位性能优化秘籍,从此告别龟速加载!
【8月更文挑战第31天】本文探讨了Ruby on Rails应用的性能优化方法,涵盖数据库查询与前端渲染。通过具体代码示例,介绍了如何使用`includes`避免N+1查询问题,利用缓存机制提高效率,以及通过合并和压缩CSS及JavaScript文件优化前端渲染。这些技巧有助于全面提升应用性能和用户体验。
36 1
|
2月前
|
缓存 前端开发 JavaScript
前端项目性能优化:使用vite的分包策略
【8月更文挑战第4天】Vite性能优化-分包策略
64 2
前端项目性能优化:使用vite的分包策略
|
2月前
|
JavaScript 前端开发 开发者
JS 继承之谜:究竟有哪些神秘方法?Web 前端开发者必知的关键技巧待你揭开谜底!
【8月更文挑战第23天】JavaScript (JS) 是 Web 前端开发的关键语言,其中继承是面向对象编程的重要概念。本文探讨了 JS 中几种继承机制:原型链继承、构造函数继承及组合继承。原型链继承利用原型对象实现属性和方法的共享;构造函数继承通过在子类构造器内调用父类构造器实现私有属性的复制;组合继承结合两者优点,既支持属性共享又避免了属性被意外覆盖的风险。理解这些模式有助于开发者更高效地组织代码结构,提升程序质量。
29 1
下一篇
无影云桌面