网站的用户体验佳，可留住更多的用户同时网站优化得好，还可以为企业节约成本。前端性能优化可以分为两个方面：接口访问优化、静态资源优化
一、访问接口优化
http协议是属于无状态应用层服务端口协议，因此发送http请求，每次需要建立网址连接>网址通信>网址断开连接，因为在服务器端每个http会同时开启独立的线程去处理信息，所以减少http请求，尽可能提高访问性能至关重要。
减少http请求的方法：
把js、代码、图片等文件，合并成一个文件，这样会使浏览器只需请求一次这样就减少http的请求。图片合并压缩要适当，不能总想着优化呢，盲目地都合并成一张图片并且可以通过修改格式来进行优化。
通过接口合并和前端交互，使用中请求多个并行、串行接口，此时可以通过接口合并方式，提升接口的访问效率。
尽量使用css尽量不用三方插件，避免三方插件大量占用运行库。
1.2、减少cookie传输
cookie 属于 http 里在服务器与客户端中不停交换，所以减少 cookie 的大小可以使反应速度变快
1.3、使用CDN提供静态文件
CDN 可通过全球范围内帮助你获取静态文件因此使用CDN可加快网页加载
1.4、启用 GZIP 压缩
GZIP属于http协议内的编码，是一种帮web应用程序改进的编码。使用GZIP 后，服务器可把网页内容通过编码压缩后传输，通常可以压缩到原大小40％，不用多说这样网页传输速度就会变得非常快。GZIP 好处在于：通过网络传输文件时减少传输时间，减少存储空间
1.5、借用浏览器缓存
使用ajax 请求数据可缓存到浏览器，下次请求时无需重复获取，直接使用浏览器中缓存数据即可。
二、静态资源优化
2.1、压缩 html等文件进行优化
删除多余空格、注释和中行，减少文件容量，从而显著减少用户下载时间，加快网页加载速度。可以直接使用压缩工具。
2.2、在 js 之前引用 css
这是一个常用小知识，js 执行是通常会进入阻塞，js加载之后，会等待 js 执行完成才能加载 css，此时会出现渲染页面布局错乱。如果 css 文件引入非阻塞，减少DOM 花费更多时间从而才能渲染。
2.3、非阻塞 js
html 文档的正常解析会被js阻止，使用解析器被 script 标记时，它会停止解析并执行当前脚本。因此通过 script 引入的 js 放入 html 中最底下，使脚本位于页面顶部，需要时添加非阻塞属性。使用 defer 和 async 来异步加载js文件。
<!-- 使用defer -->
<script defer src="foo.js" ></script>
<!-- 使用async -->
<script async src="foo.js"></script>2.4、图片压缩
最常见的就是CSS Sprite，将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分称为雪碧图。雪碧图最大优点时把网站上用到的一些图片整合到一张单独的图片中，从而减少网站的HTTP请求数量，除此也能压缩图片文件大小。CSS background和background-position属性渲染，移动图片的位置。除此之外，网站用到的大图，也可以再保证图片高质量同时优化图片容量到最小。
以上是关于“网页优化加载更流畅的两种常用方式”的介绍，如需购买测试PHP主机，推荐酷番云共享虚拟主机、独享IP虚拟主机齐备，各类配置均有，满足不同网站建设需求；价格实惠；最低9元/月，提供免费备案。另外提供免费虚拟主机，可供测试，让您快速上线网站。
选购地址：https://www.kufanyun.com/host/
图片来源于AI模型，如侵权请联系管理员。作者：路飞，如若转载，请注明出处：https://www.kufanyun.com/ask/1031.html
