如何提升页面的访问速度

HTTP请求属于请求-应答形式的短连接，每一个独立的资源我们都会向服务器发去一份get请求，再等服务端将我们需要的文件传回来。每一次资源的请求都实实在在地耗费了一次连接-等待-接收的时间(当然将http请求设为keep-alive长连接状态可以减少连接的次数和时间)，如果我们能有效减少对服务器文件的请求次数，便意味着我们可以从这块省下一些页面等待时间，顺便减少服务器的负担。解决方案：

1. 使用css sprite技术合并多个图片为单个图片文件，实际使用时通过background-po sition来定位背景位置，推荐阅读：CSS Sprites:图片整合技术;

2. 合并多个css样式文件为单个样式文件，合并多个脚本为单个脚本。

3.将小块的css、js代码段直接写在页面上，而非在页面引入独立的样式/脚本文件。相信有的朋友看惯了保持结构 (标记)、表现 (样式)、行为 (脚本)三者分离的规范，对此观点可能有些意见。只能说规范不是教条，适合自己的才是硬道理。直接把小段的、复用率低的样式/脚本直接写于页面上带来的利还是大于弊的(弊可能也就是增大了页面代码量、不那么好维护了点)。

二. 减少文件大小

文件太大(特别是图片)导致加载时间较长，往往都是影响页面加载体验的头号大敌，要尽可能减少请求文件的大小：

1. 压缩样式/脚本文件，可以使用gulp或者grunt来实现，它们均能很好地减少css/js文件的大小(对于js还能起到混淆变量、函数名的作用);推荐!在线js、CSS、网页压缩工具

2. 针对性选择图片格式，在无透明背景需求下，对于颜色较单一、无色彩渐变的图片仅使用gif格式，对于jpg图片也可按照其清晰度要求，在导出jpg的时候选择对应的品质进行优化，还有背景单一的图片尝试使用PNG格式能大大减小图片大小;

三. 延迟请求、异步加载脚本

在各主流浏览器下，我们的脚本文件跟随其它资源文件一样都是异步下载的，但这里存在一个问题——比如FireFox下载好脚本后的一小段时间内会有执行阻塞的情况发生，也就是说浏览器下载好脚本后执行它的这段时间里，浏览器的其它行为被阻塞，导致页面上的其它资源都是无法被请求和下载的。如果你页面里存在js代码执行时间过长的情况，那么用户就会明显感觉到页面的延迟。解决这个问题有一个简单的方法——将脚本请求标签放置到结束标签前，使得页面上的脚本成为最后被请求的资源，自然也不会阻塞其它页面资源的请求事件了。

四. 延迟请求首屏外的文件

先解释下，首屏指的是页面初始化时候的页面内容显示区域，也就是页面一加载，用户就首先看到的区域。比如像京东啊淘宝啊，对于需要滚动页面才能看到的图片内容，都做了类似lazyload的处理，这些无非都是走了代理模式的理念，但的确给用户一个错觉——这个页面更快地加载完了，因为我很快就看到了屏幕上的内容(即使我还没下拉滚动条，而页面后方的文件其实还没真正加载呢)。