web前端性能优化

来源：互联网发布：恺英网络利润下滑原因编辑：程序博客网时间：2024/05/01 20:27

转载：http://www.phpv5.com/blog/web-front-optimize

减少http 请求

合并js css, 图片

减小传输的内容

http请求数量已经足够少了，我们还可以在减小传输内容的方面做一些文章，比如：

压缩 js css ，在质量达到期望的前提下压缩图片。

启用gzip 压缩.

使用浏览器缓存

这点很重要，不用我们做任何的开发，只用web服务器端配置一下，就可以为我们的网站加速了。

先奉上我们的nginx 配置：

1location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
2{
3      expires      30d;
4}
5 
6location ~ .*\.(js|css)?$
7{
8      expires      12h;
9}

这个配置就很简单，很容易理解了，图片和falsh缓存30天， js和css缓存12小时

客户端跟服务端会有一个缓存协商的过程，用户第一次访问一个资源（js css 图片甚至是静态页面）, 服务端会通过respone header 告诉客户端当前资源可否被缓存 (cache-controll), 以及当前资源的一些信息 (Expires , Etag, Last-Modified) 等，客户端在下次在请求这个资源的时候会把上次服务端返回的信息带上，和服务端会有一个缓存协商的过程，如果服务端判断环迅没有过期，就会返回 http 状态码304给客户端，客户端就直接读取本地的缓存内容.

优化加载顺序

把css放在最前边，把js放在最后边.

没有什么特殊情况的话， CSS一律放在 <head></head>的里边, <title></title>的下边，当然放在<body></body>里边也是能看到效果的，不过如果页面再往下渲染的过程中，遇到CSS的话，前边已经渲染的部分会重新渲染. JS呢，最好放在</body>结束符的前边，因为页面在加载的过程中遇到js的话会去执行js的，一般的js是在页面加载完成后运行就可以的，如果放在前边的话会先执行js代码，然后在加载页面。

使用一些进度条 Loading图标

说实话，这个跟前端性能优化没多大关系，在客观上并不能加快页面的加载速度。但是根据爱因斯坦的相对论，放一个漂亮点的loading图标一直在那动，会让用户知道当前页面并没有死掉，还在努力加载。

CDN && 反向代理

可以使用CDN将内容分发到离用户最近的网络提供商的机房，在服务器端使用反向代理缓存一些静态文件，来加快响应速度, 减轻服务器的负载.

一些不常更新的动态页面的html也可以通过反向代理缓存起来，使用起来效果类似静态化的页面 .

0 0