web开发的性能准则（减小页面加载时间方面）

准则（概述）

• 减小 HTTP 请求
• 使用CDN加速
• 避免空的src或href属性值
• 增长过时头
• 启GZIP压缩
• 把css文件放到头部
• 把javascript放到尾部
• 避免使用css表达式
• 删除不使用的css语句
• 对javascript、css代码进行压缩
• 减小重绘

减小HTTP请求

减小HTTP请求是上面性能准则中最为显著的一条，咱们能够分为三个主要方面来讨论

• 使用并行链接
  开发人员每每只考虑服务器端对性能的影响却疏忽了浏览器端的限制，好比有多少资源能够在同一时间加载。HTTP1.1协议明确的限制了单个用户在同一时间不能保持两个以上的链接，可是，现代浏览器大部分都突破了这个限制，不少浏览器能够支持四个甚至六个并行的链接。一样的，你也能够将资源文件散列到不一样的域名下面，这种作法充分的利用了浏览器并发，因此能够提升加载效率，可是因为DNS的查询有耗时，太多的域名解析又会使性能下降。
• 合并资源文件
  并行连接的讨论得出一个结论，大一些的文件比小一些的文件好，虽说这个说法听起来有些别扭，可是在现今的网络环境里，这个说法能够获得证明（体积大的文件比多个小文件加载快）。此外每一个HTTP请求在时间上和带宽上至少会产生一些开销，若是能够合并资源，减小HTTP请求，会提高必定的性能。
• 使用图片精灵（css sprite）
  这个名词应该比较熟悉和经常使用，它的意思就是把几张图片合并成一张。这是一种有效减小HTTP请求的方法，在使用图片的时候你只须要使用一些css的定位来决定这个图片的位置便可。当咱们使用其中的一个图标时，其余的图片也会被缓存（不须要再次请求）若是有100个图标则能够减小99次HTTP请求。

使用CDN加速（内容分发系统）

CDN是一个拥有不少服务器、通过策略性部署的、能够覆盖全球的网络系统，当用户访问一个比较大的网站时，CDN会从最近的一个节点为用户提供服务。可是动态数据的处理最好放在集中的服务器中，由于跨地域同步数据库是一个令开发者头痛的问题，全部大多数互联网公司都把购买、登录等数据相关的事物放到一个地方处理。另外，CDN服务是很贵的，若是网站的流量值得去付出这么多钱，它无疑会给性能带来提高。

避免空的src和href属性

咱们使用javascript给空的src赋值时，javascript放在文档的最后，此时虽然src是空的仍然会发出一个HTTP请求。当咱们点击一个空的href属性的连接时，一样会发出一个HTTP请求，虽然这个HTTP请求不会有影响加载时间可是会给服务端形成必定的流量浪费。咱们能够建立一个带有描述性信息的很href属性，并阻止此次HTTP请求
<a href="#SometingDescriptive" id="TriggerName">TriggerName</a> <script type="text/javascript"> $("#TriggerName").click(function (e) { e.prventDefaulet(); // 取消默认行为 ... }); </script>
另外，空的src和href也是会产生报错的

增长过时头

增长了过时头以后浏览器便会缓存这些文件，当用户第二次访问这个网站的时候就不会再像服务端请求这个文件。关于缓存的详细介绍能够点这里

启用GZIP压缩

HTTP协议1.1引入了Accept-Encoding这个功能（代表HTTP请求的内容是压缩过的），GZIP就是其中的一种压缩方式，它是如今压缩比率最高的，据雅虎的统计它减少了大约70%的响应大小。它不只仅会减少文件传输时间，同时也节省了带宽。

把css放在头部

浏览器并不会等所有HTML解析完成以后才渲染元素，而是同时进行，把css放到前面就会保证先渲染的那一部分元素的显示样式是正确的，这么写在性能方面也有很大的意义，你毫不但愿引发大量的浏览器重绘。若是你的样式文件放到页面的底部，那么浏览器就会等全部文件都加载完才会绘制页面，那么用户颇有可能盯着白屏一长段时间，

把javascript放在尾部

脚本会阻止并行加载（link支持最大限度的并行加载），也就是说，当浏览器加载一个脚本的时候时，它不会加载其余文件。若是脚本在头部那他会阻止页面的渲染。咱们能够用script标签上的DRFFER属性通知浏览器去异步的加载其余文件，可是这么作会出现两个问题。

• 不是全部浏览器都认识这个属性
• 用了DEFFER属性的脚本不可使用document.write()

避免使用css表达式

• 只有部分浏览器支持CSS表达式（IE五、六、7）
• 在打包压缩后CSS表达式会比正常的CSS长得多
• 执行频率高得多（每每当用户移动鼠标或滚动页面时它就会执行）

减小页面的回流与重绘

关于这个问题能够去我博客园的 博客 来查看。