Web前端 优化方案

1.减少Http请求

　　 在一个页面中图片，CSS，JS可能N个，如果每个资源都去请求一次服务器的话，那么服务器就会为每个资源开一个线程来完成，这样的话对服务器的压力就很大了。所以解决的方法就是合并资源。

　　图片合并：可以多个图片合并成一张图片，用偏移的方法来显示不同的图片(backgroup-position:x y;)

　　CSS和JS合并：C#(MVC)用BundleConfig.cs来解决多个CSS和JS文件，只需要一次请求。(Global.asax里面要开启BundleTable.EnableOptimizations)

 

 

 

 

2.缓存

 　　可以将网页中频率使用比较高，但是更改比较少的资源进行缓存。像这些资源有Logo，JS，CSS...等等。我们可以在http请求中的Cache-control和Expires属性来进行设置它的缓存时间，来进行缓存这些资源。如果说对某个CSS进行缓存，但是我要更改了这个CSS文件怎么让浏览器使用我更改后的CSS文件呢？解决方法就是更改CSS文件名就可以。JS和logo等等这些都是一样的。如果有多个缓存文件都要更新，不要同时更新尽量一个一个的去更新。这样可以减少服务器压力。

　　

 

 

 

 

3.压缩

 　　服务器可以对文本压缩，客户端进行解压。这样可以减少通信传输数量。因此像html,js,css文件可以启用Gzip压缩来进行传输。但是它还有一个弊端就是服务器需要压缩，客户端需要解压，所以就是对服务器和浏览器造成压力。如果说网络通信比较好的则不需要考虑这项来进行优化了。

　　

 

 

 

 

4.css在前，JS在后

 　　就是在一个页面中尽量把css放在页面的前面，JS放在页面的后面。因为JS会造成阻塞，这样会阴影页面的渲染。我说的尽量不是一定要这样做，有时候我们需要JS解析页面的时候就不适合放在最后面了。

 

 

 

 

5.慎用Cookie

 　　因为cookie包含在每次请求和响应中，如果太大的Cookie数据的话会严重影响数据传输。所以那些数据需要用到cookie来存储自己一定要把握好，用不好会影响用户体验。建议像CSS,JS文件就不要用cookie存储，可以考虑用静态域名访问独立服务器。

 

 

 

 

6.CDN

 　　CDN(Content Distribute Network 内容分发网络)它其实就是一个缓存，它是将数据缓存到离用户最近的地方。如下图。可以看到客户端可以以最快的速度就可以获取到静态资源(也就网络访问第一跳)。所以CDN可以放一些访问比较频繁的资源，(如：图片，CSS，JS...等等)。比如淘宝海量图片就是CDN来解决的。

 

 

 

 

7.反向代理服务器

 　　代理服务器可以配置缓存来缓存静态资源。当用户第一次服务器就可以把静态资源缓存了代理服务器上。其它用户再次访问的时候就可以在代理服务器上获取资源了。反向代理服务器不仅仅是缓存资源，

　　1.它还可以保证网站的安全的功能，因为所有访问都是必须要经过反向代理服务器。所以可以在反向代理服务建立一道屏障，从而减少网络攻击。（有一夫当关，万夫莫开的感觉）

　　2.它还可以完成负载均衡的功能，通过负载均衡构建的应用集群可以提高系统总体处理能力，从而改善网站高并发情况下的性能。

　　看到上面的图给我的感觉有点像AOP（面向切面编程：就是一个点控制多个面）。反向代理服务器就是一个点，集群服务器就是多个面。网站权限功能就是AOP来完成的，网站权限也是出于安全考虑。所以给我的感觉上面的图有点类似AOP工作原理

 

 

总结：如果你的网站不是唯一性的话（唯一性就是互联网中只有一个,如12306网站），那么就要考虑到网页的响应时间了。响应时间遵循2,5,8定律，也就是说2秒之内响应，用户体验较好。5秒之内响应，用户还可以接受。8秒钟之内，可能就会流失用户了。在这个竞争这么激烈的互联网中，如果你的网站用户体验不好的话，就会流失用户群了。

 

 

 

　　（本人学识有限，文章如有误，愿见谅。希望能指出来，以免误人子弟了。^_^）