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

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

一般网站优化都是优化后台,如接口的响应时间、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除了负载均衡功能,它也可以通过配置缓存功能来加速请求响应速度,当用户第一次访问的时候静态资源就可以被缓存到反向代理服务器上,这样其他用户的请求就能直接从反向代理服务器直接获取返回,这样也就直到了静态资源缓存的作用。


我大概列了这些,其实还有很多优化手段,大家有更好的建议的话,可以在下方留言。


相关文章
|
1天前
|
Web App开发 缓存 前端开发
如何优化前端网页加载速度:最佳实践和工具推荐
本文探讨了如何通过采用最佳实践和利用先进的工具来优化前端网页加载速度。从压缩资源到使用CDN,从减少HTTP请求到利用缓存策略,我们将介绍一系列提高网页性能的技术手段。同时,我们还将推荐一些广受好评的工具,帮助开发者更轻松地实施这些优化策略。
|
1天前
|
前端开发
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
|
2天前
|
缓存 前端开发 JavaScript
如何优化前端性能:最佳实践与工具推荐
在当今互联网时代,用户对网页加载速度和性能的要求越来越高。本文将介绍一些优化前端性能的最佳实践,包括代码压缩、资源合并、懒加载等技术,并推荐一些实用的工具,帮助开发者提升网页加载速度和用户体验。
|
5天前
|
缓存 负载均衡 安全
深入探索Nginx高性能Web服务器配置与优化
【5月更文挑战第7天】本文深入探讨了Nginx的配置与优化,重点介绍了基础配置参数如`worker_processes`、`worker_connections`和`keepalive_timeout`,以及优化策略,包括使用epoll事件驱动模型、开启gzip压缩、启用缓存、负载均衡和安全配置。此外,还提到了性能调优工具,如ab、nginx-stats和nmon,以助于提升Nginx的性能和稳定性。
|
5天前
|
前端开发 JavaScript UED
如何优化前端网页加载速度
在当今互联网时代,网页加载速度是用户体验的关键因素之一。本文将探讨如何通过优化前端技术,提升网页加载速度,包括压缩资源、使用CDN加速、减少HTTP请求等方法。
|
6天前
|
缓存 前端开发 JavaScript
优化前端性能的五大技巧
在当今快节奏的网络世界中,优化前端性能是网站开发中至关重要的一环。本文将介绍五种有效的技巧,帮助开发者提升前端性能,提升用户体验和网站效率。
|
9天前
|
JavaScript 前端开发 UED
【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
【5月更文挑战第2天】【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
|
9天前
|
JavaScript 前端开发 索引
【Web 前端】jQuery 里的 each() 是什么函数?你是如何使用它的?
【5月更文挑战第2天】【Web 前端】jQuery 里的 each() 是什么函数?你是如何使用它的?
|
9天前
|
存储 前端开发 JavaScript
【Web 前端】如何找到所有 HTML select 标签的选中项?
【5月更文挑战第2天】【Web 前端】如何找到所有 HTML select 标签的选中项?
|
9天前
|
JavaScript 前端开发 C++
【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
【5月更文挑战第2天】【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?