高性能网站建设的14个原则
发布时间：2018-09-30
今天大致阅览了一下《High Performance Web Sites》。本书的中文版是《高功能网站建造攻略》。本书还有对其间单个疑问深化探求的进阶篇《Even Faster Web Sites》，中译《高功能网站建造进阶攻略》。这本书中给出了14条网站功能提高的准则，每个准则独立成章，配有示例。这些准则大多数都十分实用，合适站点架构师、前端工程师。其间关于前端工程师的含义更大一些。这次看的是原版。我关于Web开发较缺少实践经验，加之看得匆忙，因而也许存在遗失、表述不当之处，期望广阔网友不吝指正。
准则1 削减HTTP恳求数
结构恳求、等候呼应需求时刻，因而恳求数量越少越好。削减恳求的整体思路即是兼并资本，削减显现一个页面需求的文件数。
1. Image Map
经过设置标签的usemap特点与运用标签可以在一幅图像上切分出多个区域，指向不一样的衔接。比起运用多幅图像别离结构衔接削减了恳求数。
2. CSS Sprite（CSS贴图整合/贴图拼合/贴图定位）
经过设置元素的background-position样式做到。一般用于界面图标。典型的可以参阅TinyMCE编辑器上方的那些小按钮。多个小图实质是从一个一致的大图经过不一样的偏移量裁剪而来，这么加载界面上的许多按钮实践上只需恳求一次（恳求大图一次），然后削减HTTP恳求数。
3. Inline Image（内联图像）
在的src中不指定外部图像文件的URL，而是直接将图像信息放入。例如src=”data:image/gif;base64,R0lGODlhDAAMAL...”某些特殊状况下有用（例如一个不大的图像仅在当时页面用到）。
准则2 运用多线路CDN
为你的站点供给多种线路（例如国内电信、联通、移动）、多个地理位置（北方、南边、西部）的拜访，使得一切用户都可以快速拜访。
准则3 运用HTTP Cache
给不频频更新的资本（例如静态图）加较长的Expires头信息，这些资本一经缓存，将来很长时刻都可以不再重复传输了。
准则4 运用Gzip紧缩
运用Gzip紧缩HTTP报文，减小体积，削减传输时刻。
准则5 将样式表置于页面前部
先加载样式表，这么页面烘托得以较早开端，给用户页面加载较快的感受。
准则6 将脚本置于页面尾部
要素同5，先处理页面显现，页面烘托较早完结，而脚本逻辑稍后履行，这么给用户页面加载较快的感受。
准则7 防止运用CSS表达式
过于杂乱的JavaScript脚本逻辑、DOM查找、挑选操作将会下降页面处理功率。
准则8 将JavaScript与CSS作为外联资本
这好像与准则1中的兼并思维相悖，但其实不然：思考每个页面都引入了一个公共的JavaScript资本（例如jQuery或是ExtJS这么的JavaScript库），单就一个页面的表现来看，内联（行将JavaScript嵌入HTML）页面将比外联（运用标签引入）页面加载更快（因为其较少的HTTP恳求数）。但假如有许多页面都引入了这个公共JavaScript资本，那么内联计划会造成重复传输（因为这个资本内嵌在每个页面中了，所以每次翻开一个页面都要将这有些资本传输一遍，然后造成网络传输资本的糟蹋）。而将这种资本独立出来外联引证可以处理这个疑问。
因为JavaScript和CSS相对安稳，咱们可以对其对应的资本设置较长的失效期（参阅准则3）。
准则9 削减DNS查找
作者给出的主张是：
1. 运用Keep-Alive坚持衔接
假如衔接断开，那么下次衔接又要履行DNS查找，即便对应的域名-IP映射已被缓存，查找也是要耗费一些时刻的
2. 削减域名
每次恳求新域名都需求进行经过DNS查找不一样的域名，且DNS缓存无法发挥作用。因而应当尽量将站点组织在一个一致域名下，防止运用过多子域名
准则10 紧缩你的JavaScript
运用JS紧缩工具紧缩你的JavaScript吧，很有用哦。看看jQuery的两个不一样的发行版别就知道区别了：
http://code.jquery.com/jquery-1.6.2.js 阅览版jQuery代码，230KB
http://code.jquery.com/jquery-1.6.2.min.js 紧缩版jQuery代码（用于实践布置），89.4KB
准则11 尽量防止重定向
一次重定向意味着在你真实拜访到想要看到的页面前加入了一轮额定的HTTP恳求（客户端建议HTTP恳求→HTTP效劳器回来重定向呼应→客户端对新URL建议恳求→HTTP效劳器回来内容，下划线有些为额定的恳求），因而耗费更多的时刻（也就给人反响更慢的感受）。因而除非必要，不要随意运用重定向。几个“必要”的状况：
1. 防止URL失效
旧站点搬迁后，为了防止旧的URL失效，一般将对旧URL的恳求重定向至新体系的对应地址。
2. URL美化
在可读性好的URL与实践资本URL之间转换，例如关于Google Toolbar，用户记得住http://toolbar.谷歌.com这个对人类赋有语义的地址，却很难记住http://www.谷歌.com/tools/firefox/toolbar/FT3/intl/en/index.html这个真实的资本地址。因而有必要保留前者，并且将对前者的恳求重定向至后者。
准则12 移除重复的脚本
不要在一个页面中重复引入一样的脚本。例如脚本B和C都依靠于A，那么在运用了B和C的页面中就有也许存在对A的重复引证。处理方法，关于简略的站点手动查看依靠性，消去重复引入；关于杂乱的站点则需求构建自个的依靠办理/版别操控机制。
准则13 当心处理ETag
ETag是除Last-Modified以外的另一种HTTP Cache手法。经过hash的办法辨识资本是不是被修正。但ETag存在一些疑问，例如：
1. 不一致：不一样Web效劳器（Apache, IIS等）界说的ETag格式不一样
2. ETag的计算是不安稳的（因为思考过多要素），例如：
1) 一样资本在不一样效劳器上计算出来的ETag不一样，而大型Web使用一般由不止一台效劳器供给效劳，这就致使客户端在效劳器A缓存好的资本分明依然有用，而在下次恳求B时因为ETag不一样而被认定为失效，致使一样资本的重复传输。
2) 资本不变，而因为一些别的要素的改变，例如配置文件更改，致使ETag改变。直接成果是体系更新后客户端大规模发生Cache失效，致使传输量大增，站点功能下降。
作者给出的主张是：要么依据你的使用特点改进已有的ETag计算方法，要么爽性就不必ETag，而改用简略的Last-Modified.
准则14 在Ajax中运用HTTP Cache
Ajax是异步恳求，异步恳求不会堵塞你如今的操作，并且当恳求完结时，你立刻就可以看到成果。但异步不代表可以瞬时完结，也不代表可以忍受它花无限多的时刻完结。因而关于Ajax恳求的功能也需求注重。有许多Ajax恳求拜访的是一些相对安稳的资本，因而别忘了对Ajax恳求运用好HTTP Cache机制，详细拜见准则3、13.
服务热线：18609840880
