8条关于Web前端性能的优化建议

谁践踏了优雅 2023-07-23 03:34 25阅读 0赞

一般网站优化都是优化后台，如接口的响应时间、SQL优化、后台代码性能优化、服务器优化等。高并发情况下，对前端web优化也是非常重要的。

下面说说几种常见的优化措施。

# 1、HTML CSS JS位置 #

一般需要将CSS放页面最上面，即HEAD部分，而将JS代码放页面底部。因为页面需要加载为CSS才进行渲染，而JS如果不是在页面加载之前就要执行就要放到页面最底部，以免在页面展示之前因JS过多加载而影响页面渲染速度。

# 2、引用文件位置 #

有一些插件需要引用到远程的图片、CSS、JS、图标等，如果远程的资源连接网速不佳，如国外的某些资源，会造成网页阻塞，同样也会造成页面展示问题，尽量能把引用远程的资源能本地化。

# 3、减少后台请求 #

每个请求都是耗费资源影响系统性能的，所以，能减少后台请求就减少。如，尽量的将同一个资源（图片、JS、CSS等）合并成一个文件，页面只要请求一次即可，这样就节省了很多http连接的开销及往返的时间损耗。

另外一方面，如果是关于抽奖、摇一摇、秒杀等功能，可以限制发往后台的频率，如前端操作10次才往后端发一次请求，这样从前端就做到了后台的流量控制，把流量控制到访问的最外层是最好的，尽量不要让请求落到底层。

# 4、压缩传输 #

http压缩可以对纯文本可以压缩至原内容的40%, 从而节省了60%的数据传输，GZIP是一种常用的压缩编码。因此，对文本类型的资源如CSS、JS、HTML启用GZIP压缩加速http传输速度。

# 5、减少cookie传输 #

cookie会包含在每次请求和响应中，如果cookie过多会影响http响应速度，所以高并发情况下尽量控制cookie的传输量，nginx对cookie传输默认是做了限制的。另外，像CSS、JS、图片等静态资源可以启用单独域名，禁用cookie对静态资源的传输，这样就能大大提高效率。

# 6、浏览器缓存 #

高并发情况下，可以将一些不怎么变动的东西缓存到浏览器cache中，或者一些活动内容可以提前将内容在客户端缓存起来，以免活动开始大量请求涌入服务器。

# 7、CDN #

之前的文章有讲过CDN的概念，它就是一个静态内容分发网络，本质就是静态资源的缓存，可以将静态资源放到CDN上，这样，用户就能离自己最近的地方获取到资源，大大提高了用户访问速度。

# 8、反向代理 #

常用的反向代理nginx除了负载均衡功能，它也可以通过配置缓存功能来加速请求响应速度，当用户第一次访问的时候静态资源就可以被缓存到反向代理服务器上，这样其他用户的请求就能直接从反向代理服务器直接获取返回，这样也就直到了静态资源缓存的作用。

发表评论取消回复

表情：

评论列表（有 0 条评论，25人围观）

还没有评论，来说两句吧...

相关阅读

相关优化建议：Web前端性能优化。

般说来Web前端指网站业务逻辑之前的部分，包括浏览器加载、网站视图模型、图片服务、CDN服务等，主要优化手段有优化浏览器访问、使用反向代理、CDN等。浏览器访问优化...

我就是我/ 2024年04月17日 05:29/ 0 赞/ 141 阅读

相关 8条关于Web前端性能的优化建议

一般网站优化都是优化后台，如接口的响应时间、SQL优化、后台代码性能优化、服务器优化等。高并发情况下，对前端web优化也是非常重要的。下面说说几种常见的优化措施。 1、

谁践踏了优雅/ 2023年07月23日 03:34/ 0 赞/ 26 阅读

相关阿里前端大神：性能优化12条建议

性能优化是把双刃剑，有好的一面也有坏的一面。好的一面就是能提升网站性能，坏的一面就是配置麻烦，或者要遵守的规则太多。并且某些性能优化规则并不适用所有场景，需要谨慎使用，请读者带

迈不过友情╰/ 2022年12月23日 00:34/ 0 赞/ 342 阅读

相关前端性能优化 24 条建议（2020）

性能优化是把双刃剑，有好的一面也有坏的一面。好的一面就是能提升网站性能，坏的一面就是配置麻烦，或者要遵守的规则太多。并且某些性能优化规则并不适用所有场景，需要谨慎使用，请读者带

我就是我/ 2022年12月22日 11:16/ 0 赞/ 269 阅读

相关 WEB前端性能优化

1. 请减少HTTP请求基本原理：在浏览器(客户端)和服务器发生通信时，就已经消耗了大量的时间，尤其是在网络情况比较糟糕的时候，这个问题尤其的突出。一个正常HT

梦里梦外;/ 2022年12月17日 01:30/ 0 赞/ 480 阅读

相关 YAHOO 35条前端优化建议

> 参考： > 主参考网址：http://www.360doc.com/content/14/0325/14/15727046\_363598248.shtml > Y

以你之姓@/ 2022年11月28日 10:36/ 0 赞/ 275 阅读

相关 Web前端性能优化

一、影响网页加载速度关键因素 1）网页内容的大小 \-压缩JS, CSS文件 \-压缩图片。例如新的webp，图片压缩率达到40%，如果图片768KB压缩后为46

「爱情、让人受尽委屈。」/ 2022年11月12日 08:23/ 0 赞/ 468 阅读

相关 Web前端性能优化的10点建议

摘要：　　一般说来Web前端指网站业务逻辑之前的部分，包括浏览器加载、网站视图模型、图片服务、CDN服务等，主要优化手段有优化浏览器访问、使用反向代理、CDN加速

蔚落/ 2022年06月17日 20:20/ 0 赞/ 439 阅读

相关 Web前端性能优化建议

1、HTML CSS JS位置一般需要将CSS放页面最上面，即HEAD部分，而将JS代码放页面底部。因为页面需要加载为CSS才进行渲染，而JS如果不是在页面加载之前就要执行

今天药忘吃喽~/ 2021年11月23日 07:34/ 0 赞/ 980 阅读

相关关于web前端性能优化总结

1、从DOM结构和标签上来优化 ·使用语义化的标签，代码清晰简洁； ·减少Dom节点，增加渲染速度； ·使用W3C标准书写闭合小写的标签； ·给图片和tabl

偏执的太偏执、/ 2021年09月15日 14:04/ 0 赞/ 665 阅读