提高网页访问速度

前端技术的逐渐成熟，还衍生了domain hash, cookie free, css sprites, js/css combine, max expires time, loading images on demand等等技术。这些技术的出现和大量使用都和并发资源数有关。

 

• 按照普通设计，当网站cookie信息有1 KB、网站首页共150个资源时，用户在请求过程当中须要发送150 KB的cookie信息，在512 Kbps的常见上行带宽下，须要长达3秒左右才能所有发送完毕。 尽管这个过程能够和页面下载不一样资源的时间并发，但毕竟对速度形成了影响。 并且这些信息在js/css/images/flash等静态资源上，几乎是没有任何须要的。 解决方案是启用和主站不一样的域名来放置静态资源，也就是cookie free。
• 将css放置在页面最上方应该是很天然的习惯，但第一个css内引入的图片下载是有可能堵塞后续的其余js的下载的。而在目前广泛过百的整页请求数的前提下，浏览器提供的仅仅数个并发，对于进行了良好优化甚至是前面有CDN的系统而言，是极大的性能瓶颈。 这也就衍生了domain hash技术来使用多个域名加大并发量（由于浏览器是基于domain的并发控制，而不是page），不过过多的散布会致使DNS解析上付出额外的代价，因此通常也是控制在2-4之间。 这里常见的一个性能小坑是没有机制去确保URL的哈希一致性（即同一个静态资源应该被哈希到同一个域名下），而致使资源被屡次下载。
• 再怎么提速，页面上过百的总资源数也仍然是很可观的，若是能将其中一些不少页面都用到的元素如经常使用元素如按钮、导航、Tab等的背景图，指示图标等等合并为一张大图，并利用css background的定位来使多个样式引用同一张图片，那也就能够大大的减小总请求数了，这就是css sprites的由来。
• 全站的js/css本来并很少，其合并技术的产生倒是有着和图片不一样的考虑。 因为cs/js一般可能对dom布局甚至是内容形成影响，在浏览器解析上，不连贯的载入是会形成屡次从新渲染的。所以，在网站变大须要保持模块化来提升可维护性的前提下，js/css combine也就天然衍生了，同时也是minify、compress等对内容进行多余空格、空行、注释的整理和压缩的技术出现的缘由。
• 随着cookie free和domain hash的引入，网站总体的打开速度将会大大的上一个台阶。 这时咱们一般看到的问题是大量的请求因为全站公有header/footer/nav等关系，其对应文件早已在本地缓存里存在了，但为了确保这个内容没有发生修改，浏览器仍是须要请求一次服务器，拿到一个304 Not Modified才能放心。 一些比较大型的网站在创建了比较规范的发布制度后，会将大部分静态资源的有效期设置为最长，也就是Cache-Control max-age为10年。 这样设置后，浏览器就不再会在有缓存的前提下去确认文件是否有修改了。 超长的有效期可让用户在访问曾访问过的网站或网页时，得到最佳的体验。 带来的复杂性则体如今每次对静态资源进行更新时，必须发布为不一样的URL来确保用户从新加载变更的资源。
• 即便是这样作完，仍然还存在着一个很大的优化空间，那就是不少页面浏览量很大，但其实用户直接很大比例直接就跳走了，第一屏如下的内容用户根本就不感兴趣。 对于超大流量的网站如淘宝、新浪等，这个问题尤为重要。 这个时候通常是经过将图片的src标签设置为一个loading或空白的样式，在用户翻页将图片放入可见区或即将放入可见区时再去载入。 不过这个优化其实和并发资源数的关系就比较小了，只是对一些散布不合理，或第一页底部的资源会有必定的帮助。 主要意图仍是下降带宽费用。
• 浏览器并发数