从架构层面谈web加载优化（我的整理）

最近听了阿里一位大牛的讲座，讲web架构优化对网页加载的影响，看完以后对他所讲的一些优化方法进行一些总结和整理，发现收获仍是蛮多的，下面多为我的整理和我的看法，但愿有说的不对的，能及时指出

1.DNS解析优化

1.1利用TTL：利用TTL:由于DNS解析时，都是逐层查找DNS缓存，最后去跟服务器查询，而缓存有是有必定的生命周期，即Time To Live，而若是能快速的拿到缓存A记录，也就避免了咱们逐层慢慢的查询了

1.2拆分域名：浏览器对于同一域名下文件同步请求是有上限的，好比ie8，同一域名下文件，同一时间只能发起6个请求，这时候拆分域名的重要性不言而喻

1.3DNS prefetch：拥有DNS prefetching属性的域名在用户点击前就已经在后台解析，而域名解析和内容载入都是串行网络的操做，故此能减小等待时间，即DNS预解析，在meta元标签里先告知浏览器要进行DNS预解析，而后经过link标签进行强制DNS预解析

 

2.TCP建联优化（即对rwnd，cwnd的处理）

 

2.1流量控制：即对接受窗口（rwnd）的处理，考虑丢包的状况，对于传输数据有必定上限限制，并进行相互的告知，防止接收方处理能力跟不上接受能力

 

2.2慢启动：即拥塞窗口（cwnd）的慢步启动，表示接收方确认前的最大容许传输的未经确认数据，而cwnd的初始值通常都很小，每每在获得接收方回应后，其cwnd值会缓步增长（这和宠物喂食是同样的道理，开始的时候，咱们会放不多的狗粮，当发现不够时，咱们在缓步增长他的喂食量），而cwnd的值也不会无止境的增加，当出现网络过载时，cwnd又会骤降--------------慢启动对于视频加载影响可能并非很明显，可是web访问时，每每数据量并非很大，可能咱们的cwnd还在初尝试的增长中，web已经加载完毕了，因此说在应用于web优化时，咱们慢启动的cwnd初始值能够适当的高一点，Google给出cwnd的建议值是10MSS

 

3.CDN加速

 

这块我感受不少人都用过，最多见的就是script src引用一个cdn地址的文件，其原理就是就近原则

 

4.请求合并（减小http请求）

 

这块可行的方法太多了，举几个我的平时碰到的解决方案

 

4.1gulp/grunt合并文件

 

4.2雪碧图

 

4.3图片以base64码形式引入，每个src都是一个http请求，而当img以base64的形式引入时，并非外部载入，解析的事就交给了浏览器，从而减小了http请求

 

5.重定向优化

 

这边谈到的重定向确定是临时重定向，说明白点就是咱们一个form表单post给一个php文件，这时候浏览器就会被告知要跳转到另一个url，这就是一步重定向。而重定向对于用户体验的影响就不要我多说了，SPA形式的应用之因此流行，很大一部分缘由就是其数据交互都是采用ajax，即无缝刷新，每个url的重刷新都是对用户耐心的一个消磨。可是凡事无绝对，重定向对于PC端有无疑是不可或缺的，好比说网易的官网，他须要对用户流量进行跟踪，从而知道网站哪些是热点区域，那些须要改良。因此咱们不能一味的说避免重定向，而是有选择性的对其优化

固然重定向还有一个很突出的有点，对于有下载需求的客户，咱们在收到他的下载请求后，获取他的ip，分配给他一个离他较近的下载地址，对不一样用户进行不一样的http重定向，从而加快用户体验

 

6.NS部署，Anycast

 

前者是在看云栖大会时看到的一个概念，百度以后也没有太大的效果，但愿有大牛能够告知。后者大概是指一种就近原则的通讯手段=0=只知其一;不知其二

 

7.缓存

 

7.1动态页面静态缓存：虽然网页中部分数据使用动态读取获得的，可是直接缓存整个静态，将动态数据静态化，而数据库有变更时，在下次访问静态页面时，更换缓存

 

7.2缓存查询结果：一样的道理，这时候不对页面进行静态缓存，而是对查询结果缓存，减小对数据库的查询操做，一样减小了用户的加载时间

 

8.请求异步

 

这块就很少说了，大部分人应该在开发中经常使用这种方法了

 

9.http 2.0

 

= o=这块自行百度，我的看完后只是只知其一;不知其二，还不敢拿上台面评头论足

 

10.负载均衡

 

web负载均衡，ip负载均衡，反代，dns等等，应用场景也多彩多样，经过给服务器集群分配任务，从而加快进程的处理，又或者根据ip分配较近，空闲服务器进行服务

 

11.除了上述架构系统层面的优化办法，还有一些小技巧

 

11.1 lazy load针对图片资源较多，或相似贴吧那种结构的网站

 

11.2 LAMPN系统组合，即linux+apache+mysql+php+nginx的组合，对于静态加载和php动态请求完美分工，各取所长

 

11.3 代码优化：css选择器命名优化，针对浏览器从右向左扫描的原则，尽可能单一命名，减小父子选择器的使用。Js代码优化，例如针对做用域链的代码优化..等等

 

11.4 代码压缩：这块gulp和grunt均可以胜任