            培训首页
             > 
            web前端新闻
             > 
            南通web前端性能优化这几个你值得知道
        

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

来源：

科迅教育

发表于：2022-03-07 11:41:20 30次浏览

相关标签： 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图片那样包含了时间、地点、相机型号的格式，更不是我们所需要的。