前端工程师-高级WEB网站前端开发网络传输指南

本节主要谈网络传输环节，利用HTTP1.1的长连接特性，使得在一定程度上，服务器可以主动推送数据(减少了很多不必要的轮询)。AD：1.减少请求数.◆缓存，使用Expires等设置过期时间;如果内容没有过期就不发送请求◆合并小体积内容，例如吧数量众多的小图片放在一个图片，之后用css部分呈现(大体积的内容就别合并了)◆延迟加载;部分内容，例如图片在页面呈现的时候才加载(常用的就是滚动条到了以后才加载);减少不必要的请求◆合并重复内容和文件◆考虑使用第三方CDN资源，例如jQuery有免费的CDN，有些用户已经在其他网站访问过该内容了，那么到我们的网站加载就更快了(而且使用CDN降低对我们服务器的压力)◆使用HTML5中的LocalStorage等保存数据2.减少响应内容的体积.◆适当的时候只返回响应头304(HTTP缓存，如ETag等)◆使用Gzip等压缩文件内容◆使用免费的第三方工具，压缩css，js和html等文件的大小(例如我们常见的jquery.min.js)◆适当使用Ajax操作◆在适当的时候，将样式,HTML和数据分离(数据量很大的时候极大减小文件体积)1.ulid=id2.listyle=一大堆的样式数据/li3.listyle=一大堆的样式数据/li4.listyle=一大堆的样式数据/li5./ul6.分成HTML样式和数据3部分7.8.HTML9.ulid=id10.li/li11.!--如果使用数据模板等方式只需要保留一个Li否则需要多个--12./ul样式保存在CSS文件中一些基本的小常识虽然有很多个li不用给每个li指定class数据◆使用JSON返回(如果觉得麻烦也可以嵌入在页面中)◆选择体积更小的数据格式，例如JSON一般就比XML体积来的小(都经过压缩以后还是更小)◆在设计上，只传送变化的部分数据(例如要获取100条数据，可能已经加载了90条，那么再加载10条就好了)◆移除请求和响应中不必要的HTTPHeader(例如WCFRestfulservice中有的时候要传递表明当前数据是JSON还是XML的HTTPHeader)◆部分功能,如压缩会消耗CPU,如ajax等会增加开发工作量,请谨慎选择3.增加请求并发数.◆RFC中，浏览器对于同一个域名下的资源只能使用2个线程同时进行访问(很多新的浏览器支持6个或者更多);解决方法是使用子域名，例如1.abc.com2.abc.com1.imgsrc=1.abc.com/1.png/2.imgsrc=1.abc.com/2.png/3.imgsrc=2.abc.com/3.png/4.imgsrc=2.abc.com/4.png/5.imgsrc=3.abc.com/5.png/6.imgsrc=3.abc.com/6.png/7.imgsrc=4.abc.com/7.png/8.imgsrc=4.abc.com/8.png/◆将一个超大的文件(例如有些人喜欢吧整个网站的js都放在一个文件)拆成一系列的中小文件(有利于并发加载和缓存!)这个文件大小的Size选择很重要我个人建议是10k-200k(依赖于网络)◆上一条并没有和1-2冲突，文件太小太多也不行，文件太少太大也不行，这是一个平衡的问题◆通过分拆文件,使得最常用页面(例如首页)的加载速度变快了◆控制加载顺序，例如先加载页面大体结构，然后多个javascript异步请求加载数据(把一个大的html变为多个小的html片段)4.其他特殊技术.◆利用HTTP1.1的长连接特性，使得在一定程度上，服务器可以主动推送数据(减少了很多不必要的轮询)5.工具.◆Fiddler(Free)◆FireDebug(Free)◆HttpWatch