返回
科迅教育
置顶
招生热线:400-656-1390

学校地址:江苏省南通市人民中路23-6号新亚大厦三楼

南通web前端性能优化这几个你值得知道

26 2022-03-08 09:29:54
南通前端全栈课程web前端课程

学习笔记

南通web前端性能优化这几个你值得知道!相信大家都听过这么一句话,“脸蛋和身材决定了我是否愿意了解你的心灵,而你的心灵又决定了我是否会一票否决掉你的脸蛋和身材”。对于一个网站来说,这个道理也是同样适用的,即使你有着丰富而有价值的内容,但是客户却在外面半天进不去,也会慢慢地失去耐心。

南通web前端性能优化这几个你值得知道

尤其在如今这个信息爆炸的时代,人们的节奏总是的,对于一个网站的耐心毕竟是有限的可怜的,如果网站不进行优化必定会流失相当一部分的客户,带来不必要的损失。那么从web前端的性能优化上来说有哪些常见、实用的方法呢?

1.使用CDN

CDN(内容分发网络)部署在各大运营商机房,当用户通过浏览器请求资源时可以直接反馈给用户,极大的减轻了服务器数据中心的压力。本质上CDN也是一种缓存,如果你的所在地距离某个CDN节点很近,那么网站响应的速度提升也是非常明显的。另外CDN所缓存的资源主要为静态资源,如静态页面、图片、css和js文件等。CDN加速对于一些遍布范围较大的网站来说效果为明显,使用的话像阿里云CDN产品,其节点多达280多个,覆盖运营商也比较。

2. 减少外部http协 议

网页加载的时间与http请求密不可分,而外部资源的加载的速度则与主机服务提供商服务器架构和分布地点有关。我们可以通过检查自己的网站上多余的图片、css、JavaScript和一些组件,然后对应的去逐个完善,就可以减少一些http请求。

3. 使用预获取

顾名思义预获取就是在真正有需要去请求之前就获取一些必要的数据和资源,以提升用户的浏览体验。预获取主要有三大方式:

1.链接预先获取

2.DNS预先获取

3.预先渲染

根据你想要使用的预先获取形式,你只需在网站 HTML 中的链接属性上增加 rel="prefetch",rel="dns-prefetch",或者 rel="prerender" 标记。

4. 压缩HTML、CSS和JavaScript

在编写代码时候会有一些多余的空格,这会占用字节,使用一些压缩工具可以有效解决这个问题。值得注意的是,压缩后的文件,其可读性就会变差,后期想维护就会变得困难了。

5. 优化图片

一张高清的图片大概几兆左右,而很多时候我们并不需要这样的画质,一般我们都会选择将其保存为高画质的就可以了,这样会有效减小加载图片带来的压力。像JPEG图片那样包含了时间、地点、相机型号的格式,更不是我们所需要的。

6. Ajax请求方式

POST的请求,是不可以在客户端缓存的,每次请求都需要发送给服务器进行处理,每次都会返回状态码200。(可以在服务器端对数据进行缓存,以便提高处理速度)

GET的请求,是可以(而且默认)在客户端进行缓存的,除非了不同的地址,否则同一个地址的AJAX请求,不会重复在服务器执行,而是返回304。所以在进行Ajax请求的时候,可以选择尽量使用get方法,这样可以使用客户端的缓存,提高请求速度。

以上是南通科迅教育培训机构,为你整理关于web前端培训的相关介绍,如需了解更多的培训班、课程、价格、试听等信息,请您留下联系方式,我们课程顾问会尽快联系您,为您定制专属课程,开始您的学习之旅。

 


文中图片素材来源网络,如有侵权请联系删除

免费提供问答解答,帮您轻松解决难题

热门课程 全部课程

相关新闻推荐

申请免费试听

只要一个电话

我们为您免费回电

立即申请