如何优化网站的访问速度

先来说一下我们使用浏览器访问一个网页 , 到看到这个网页出现, 中间到底经过了些啥?

首先, 在HTTP请求之前需要做这些:

获取ip:  浏览器地址栏中输入网址并提交, 首先它会在DNS本地缓存表中查找, 如果有则直接告诉IP地址, 如果没有则要求网关DNS进行查找, 如此下去, 当找到对应ip后, 返回给浏览器

简历TCP[连接:  当获取IP之后, 就开始与所请求的服务器完成三次握手建立TCP连接.

连接建立后, 就向服务器发出http请求.

HTTP请求,  首先会得到页面文件, 然后解析页面文件中的资源文件, 包括css,js,图片等,  再发请求获取这些资源文件, 在HTTP 1.1请求中, 多个请求是可以重叠进行的, 但是页面文件必须要先到才能知道去请求哪些资源文件.

所以整个过程中有几个阶段,

 第一阶段是首字节获取时间, 也就是url请求到服务器接受HTTP请求后返回相应的内容的时间, 这其实并不是DNS和建立连接的时间, 对于动态页面来说, 要由于\服务器将动态代码执行完毕返回页面代码才可以, 于是包括运算和数据库操作这些都会直接增加首字节获取时间, 而静态文件来说,首字节获取时间通常比较快的, 但是如果服务器之间网络不畅通, 比如说服务器在国外, 则会造成很长时间的延迟.

第二个阶段是得到页面文件的时间, 在页面文件得到之前, 是不会请求任何资源文件的, 因为还不知道页面上有哪些资源文件, 所以这段时间也非常关键.

第三阶段是获取head中各种资源文件时间, 资源文件是在HTML页面中出现顺序来加载的, 所以head中的资源会有限加载, head里主要是css和js文件, 然后页面才会渲染出来, 所以要特别注意head所需要资源的载入时间, 毕竟在页面渲染出来之前, 用户所看到的都是一片空白.

第四阶段是 获取剩下资源文件的时间, 这部分主要是图片动态视频等文件了, 重要性不是那么高了, 毕竟页面出来了, 大部分用户觉得用几秒时间看到他们载入也是可以接受的

优化方法

第一阶段, 服务器相应时间, 这部分基本没啥太好的办法了, 如果动态网站的话,主要以算法和数据库优化为主, 还有用ajax异步读取数据之类的, 其实是后端的事.  不过如果一个网站如果服务器顺应时间超过2秒, 基本上可以认为这服务器挂掉了, 通常应该控制在500ms以内, 或许让人感觉并不 明显, 如果能控制在250ms以为就更好了

第二阶段:  获取页面文件, 首先页面文件通常都不大, 而且是纯文本, 越是优化的方法就是开启GZIP压缩, 开启方式,, 对于Apache来说,首先要把httpd.conf里的LoadModule deflate_module modules/mod_deflate.so前的#去掉， 
然后重启Apache，然后在.htaccess中加入： 
 
 
<IfModule mod_deflate.c> 
AddOutputFilter DEFLATE html xml php js css text/html text/plain 
</IfModule> 

第三阶段:  head中的资源文件, 主要是css和js文件, 方法有这几个:

使用GZip压缩, 

使用minify之后的js和css, 原版用于修改, 输出min版用于使用, 虽然不利于阅读,但是尺寸明显减少,

合并多个css和js文件, 减少http请求数据

把不必要的js文件移动到页面后面去加载, 对于那些不影响渲染的js文件, 移动第四阶段再加载可以减少页面显示时间.

对于不需要更新的文件设置缓存时间并使用css或cdn

第四阶段:  这一段才是真正的大数据量, 现在通常用户带宽都不是问题了, 平静主要出现在服务器上, 可以想象看, 如果一个页面完全载入需要2MB的数据, 那么如果服务器出口带宽只有1Mps的话, 则忽略各种延时不计, 在只有一个用户量访问的情况下, 最快也需要10秒的时间才能传输完成这2MB的数据, 这对于用户来说是不能容忍的.  方法主要是使用OSS存储，CDN加速和GZip压缩。这具体的优化就很细致了，努力将ECS上直接访问的数据量减至最少

还要设置图片文件和js缓存时间1个月, 图标文件的缓存时间为1年

<IfModule mod_expires.c> 
ExpiresActive OnExpiresByType image/jpg "access plus 1 month" 
ExpiresByType image/jpeg "access plus 1 month" 
ExpiresByType image/gif "access plus 1 month" 
ExpiresByType image/png "access plus 1 month" 
ExpiresByType text/x-javascript "access plus 1 month" 
ExpiresByType application/x-shockwave-flash "access plus 1 month" 
ExpiresByType image/x-icon "access plus 1 year" 
</IfModule>