Web 前端如何优化性能

第一种：HTML CSS JS 位置

• CSS放页面最上面，JS代码放页面底部，避免在页面展示之前因JS过多加载而影响页面渲染速度

引用文件位置

• 尽量把引用远程的资源本地化。如国外的某些图片、CSS、JS、图标等资源，会造成网页阻塞，同样也会造成页面展示问题

减少后台请求

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

压缩传输

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

减少 cookie 传输

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

浏览器缓存

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

CDN

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

反向代理

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