如何加快页面的访问速度
如何加快页面的访问速度
如何加快页面的访问速度一. 减少对服务器的文件请求
常规的HTTP请求属于“请求”-“应答”-“断开”形式的短连接，每一个独立的资源我们都会向服务器发去一份get请求，再等服务端将我们需要的文件传回来。每一次资源的请求都实实在在地耗费了一次“连接-等待-接收”的时间（当然将http请求设为keep-alive长连接状态可以减少“连接”的次数和时间），如果我们能有效减少对服务器文件的请求次数，便意味着我们可以从这块省下一些页面等待时间，也可以顺便减少服务器的负担。
1、使用css sprite技术合并多个图片为单个图片文件，实际使用时通过background-position来定位背景位置；
2、合并多个css样式文件为单个样式文件，合并多个脚本为单个脚本，再在页面中引用合并后的样式/脚本文件。
3、将小块的css、js代码段直接写在页面上，而非在页面引入独立的样式/脚本文件。相信有的朋友看惯了“保持结构 （标记）、表现 （样式）、行为 （脚本）三者分离”的规范，对此观点可能有些意见。只能说规范不是教条，适合自己的才是硬道理。直接把小段的、复用率低的样式/脚本直接写于页面上带来的利还是大于弊的（弊可能也就是增大了页面代码量、不那么好维护了点）。
4、利用http-equiv="expires"元标签，设定一个未来的某时间点作为页面文件过期时间，用户在过期时间之前所获取到的页面文件都仅从缓存中去取。不过这个办法太死板（有时候即使服务端及时把过期时间更改为已结束时间，客户端可能都不会按照新更改的规则去服务端获取新文件资源），常规是不推荐使用的。
二. 减少文件大小
文件太大（特别是图片）导致加载时间较长，往往都是影响页面加载体验的头号大敌，那么尽可能减少请求文件的大小便是相当重要的事情了，我们可以做的事情有：
1、压缩样式/脚本文件，减少css/js文件的大小。
2、针对性选择图片格式，在无透明背景需求下，对于颜色较单一、无色彩渐变的图片仅使用gif格式，对于jpg图片也可按照其清晰度要求，在导出jpg的时候选择对应的“品质”进行优化，如果你喜欢尝鲜，可以使用webp图片格式，它能很好地优化同画质下的文件大小
三. 适度使用CDN
1、如果用户在其它站点下载过这个CDN资源，那么来我们站点仅仅从缓存获取即可；
2、减少了对自己站点服务器的文件请求（外部CDN的情况下），减少服务器负担；
3、多个域会使浏览器允许异步下载资源的最大数量增多，比如一个站点只从一个域来请求资源，那么FireFox只允许同时刻最多异步下载2个文件，但如果使用了外部CDN来引入资源，那么FF允许在同时异步下载本域中的两个资源外，还额外允许同时异步下载另一个域（CDN）下的2个资源。
4、但是使用CDN有一个很大的问题
增加了dns解析的开销，如果一个页面同时引入了多个CDN的资源，可能会因为dns解析而陷入较多的等待时间，导致得不偿失。
四. 延迟请求、异步加载脚本
1、在各主流浏览器下，常规情况，我们的脚本文件跟随其它资源文件一样都是异步下载的，但这里存在一个问题——比如FireFox下载好脚本后的一小段时间内会有“执行阻塞”的情况发生，也就是说浏览器下载好脚本后执行它的这段时间里，浏览器的其它行为被阻塞，导致页面上的其它资源都是无法被请求和下载的
2、如果你页面里存在js代码执行时间过长的情况，那么用户就会明显感觉到页面的延迟。解决这个问题有一个简单的方法——将脚本请求标签放置到</body>结束标签前，使得页面上的脚本成为最后被请求的资源，自然也不会阻塞其它页面资源的请求事件了。
3、另外，虽然上面提到“我们的脚本文件跟随其它资源文件一样都是异步下载的”，但异步下载不代表异步执行，为了严格保证脚本逻辑顺序和依赖关系的正确性，浏览器会按照脚本被请求的先后顺序来执行脚本。那么问题就来了——如果页面上的脚本依赖关系并不大，甚至没有任何相互间的依赖，那么浏览器的这套规则就仅仅增加了页面请求阻塞时间而已
五. 延迟请求首屏外的文件
先解释下，“首屏”指的是页面初始化时候的页面内容显示区域，也就是页面一加载，用户就首先看到的区域。
很多网站中对于需要滚动页面才能看到的图片内容，都做了类似lazyload的处理，这些无非都是走了代理模式的理念，但的确给用户一个错觉——这个页面更快地加载完了，因为我很快就看到了屏幕上的内容（即使我还没下拉滚动条，而页面后方的文件其实还没真正加载）。
六. 优化页面模块排放顺序
这里有一个很好的例子，比如有一个页面是这样的——左边是侧边栏，用于存放用户的头像啊、资料啊，以及网站投放的广告啊，而右侧是文章内容区域：
我们可以类似这样布局
<body>
<sidebar>
<!-- 侧边栏内容 -->
</sidebar>
<content>
<!-- 文章内容 -->
</content>
</body>
我们得弄清楚，页面上各个区域模块，对于用户而言，哪个才是最重要、最应当首先展示的。
七. 其它建议
1. 不要在css中使用@import，它会让一个样式文件去等待另一个样式文件的请求，无形中增加了页面等待时间；
2. 避免页面或者页面文件重定向查找；
3. 减少无效请求——比如通过css/js来请求一个不存在的资源，可能会导致较长的等待和阻塞（直到它返回错误信息）；
4. 无论你是否决定将脚本放到页尾，但一定要保障脚本放置于样式文件后方；
热门推荐
- opencv人脸识别算法（python利用Opencv实现人脸识别功能）
- python气温变化数据分析（基于python历史天气采集的分析）
- echart图表有哪些（使用laravel和ECharts实现折线图效果的例子）
- python如何解压加密zip文件（python读取有密码的zip压缩文件实例）
- python如何解压加密zip文件（python读取有密码的zip压缩文件实例）
- sql语句按字段排序（SQL语句实现表中字段的组合累加排序）
- css 三级层级菜单（利用CSS3实现动态的二级三级菜单效果实例源码）
- 安装mysql中要注意什么问题（安装Mysql时可能会遇到的一些疑难杂症）
- 阿里云ecs怎么当成云主机用（阿里云ECS服务器入门使用流程新手必看教程）
- 如何利用Email求职