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

简介: 每当有人访问您网站上的页面时,浏览器都必须请求大量文件。这些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月前
|
前端开发 JavaScript 开发者
前端开发中的组件化设计与性能优化
【10月更文挑战第7天】前端开发中的组件化设计与性能优化
39 0
|
23天前
|
存储 前端开发 JavaScript
前端的全栈之路Meteor篇(四):RPC方法注册及调用-更轻量的服务接口提供方式
RPC机制通过前后端的`callAsync`方法实现了高效的数据交互。后端通过`Meteor.methods()`注册方法,支持异步操作;前端使用`callAsync`调用后端方法,代码更简洁、易读。本文详细介绍了Methods注册机制、异步支持及最佳实践。
|
30天前
|
机器学习/深度学习 弹性计算 自然语言处理
前端大模型应用笔记(二):最新llama3.2小参数版本1B的古董机测试 - 支持128K上下文,表现优异,和移动端更配
llama3.1支持128K上下文,6万字+输入,适用于多种场景。模型能力超出预期,但处理中文时需加中英翻译。测试显示,其英文支持较好,中文则需改进。llama3.2 1B参数量小,适合移动端和资源受限环境,可在阿里云2vCPU和4G ECS上运行。
|
2月前
|
前端开发 JavaScript
前端基础(九)_this基本使用、this指向判断、改变this指向的方法
本文介绍了JavaScript中this的基本使用、this指向的判断以及改变this指向的方法。
44 1
前端基础(九)_this基本使用、this指向判断、改变this指向的方法
|
2月前
|
前端开发
前端基础(十四)_隐藏元素的方法
本文介绍了几种在前端开发中隐藏元素的方法,包括使用`display:none`、`visibility:hidden`、`opacity:0`等CSS属性,并提供了相应的示例代码。此外,还提到了其他隐藏元素的技巧,如通过设置元素位置、使用`overflow`属性和`filter`属性以及`rgba`颜色值来实现元素的隐藏。
65 1
前端基础(十四)_隐藏元素的方法
|
1月前
|
前端开发 JavaScript
掌握微前端架构:构建现代Web应用的新方法
本文介绍了微前端架构的概念及其在现代Web应用开发中的优势与实施方法。微前端架构通过将应用拆分成独立模块,提升了开发效率和灵活性。其核心优势包括技术栈灵活性、独立部署、团队协作及易于维护。文章详细阐述了定义边界、选择框架、管理状态和通信等关键步骤,并讨论了状态同步、样式隔离及安全性等挑战。微前端架构有望成为未来Web开发的重要趋势。
|
2月前
|
存储 缓存 前端开发
灵魂拷问-前端到底能做些什么?--性能优化篇
作者最近在尝试对负责的平台进行性能优化,本文整理了些前端性能优化的一些常见策略。
|
2月前
|
前端开发
|
30天前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
136 0
|
30天前
|
存储 前端开发 API
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
90 0