点击之间，发生了什么？

我以后通过自问自答的方式，将所学知识总结一下,明天要不要写一下github呢？

1.简单描述下web 服务器、PHP、数据库、浏览器是如何实现动态网站的?

0_1460642408896_发生了什么.PNG

2.常见的 WEB 服务器有哪些？

0_1460642873503_web.PNG

Apache 这应该就是所说的阿帕奇吧，应该是目前来说用得最多的web服务器
Nginx 一个小巧且高效的HTTP服务器
IIS 中文翻译过来就是Internet信息服务，巨硬推出的
GFE Google的web服务器

3.打开浏览器，在地址栏输入 http://xxxxxx.com 页面展现了xxx官网的信息，整个过程发生了什么？（xxx官网后台语言 php ,web 服务器 nginx，数据库 mysql）

1.从域名解析主机IP

本机先拿着url找到DNS服务器，然后再里面找这个键对应的值(Web主机的IP)；

• 浏览器从浏览器的缓存中查找域名对应的IP
• 如果没有，则从系统缓存中查找域名对应的IP
• 如果没有，则从路由器缓存中查找
• 如果没有，则从ISP服务商的服务器缓存中查找，一般都会在这里找到
• 如果没有，则跑到自己所在的顶级域名服务器递归搜索
• 访问IP对应的服务器，并向服务器请求HTML文件

2.打包HTTP请求

其中第一项和最后一项，分别将本机的一些信息和要求传送出去了，这就是所谓的 request 请求了吧

0_1460644183576_HTTP报文.PNG

3.通过TCP协议与服务器建立连接

• 看视频里面，老师有提到三次握手；
• 用户端向服务器发送连接请求报文段（SYN），并等待服务器的确认；
• 服务器收到报文段后将确认信息和服务器的请求信息放到一个报文段（SYN＋ACK）中，发送给用户端；
• 用户端收到服务器的报文段后再次发送报文段（ACK），完成三次握手。；

4.向服务器发送HTTP请求

• 服务器根据不同端口来分配相关的进程来处理请求；
• 发来的http请求，服务器将请求交给 Web服务器 Nginx进行处理。
• 如果请求的是php文件，Nginx自身不能处理，就委托php应用服务器来处理（服务器端事先得安装php应用服务器)，php应用服务器接收php文件（如index.php），打开并解释php文件，最终翻译成html静态代码，再将html静态代码交还给Nginx服务器，Nginx 将接收到的html静态代码输出到客户端浏览器（即用户）。
• 如果php应用服务器打开php文件，在php文件中通过对数据库连接的代码来连接本机或者网络上其他机器上的MySQL数据库，并在php程序中通过执行标准的SQL查询语句来获取数据库中的数据，再通过php应用服务器将数据生成html静态代码，并将得到的文件交给Nginx服务器。
• Nginx将文件交给服务器。

5.服务器 response

服务器回应浏览器请求，通过刚才创建的TCP连接，将传输客户端请求的文件（HTML代码）给浏览器。

0_1460645226705_respond.PNG

5.1 有关返回时的状态码

• 200： 请求大胜利 OK;
• 301：被请求的资源已永久移动到新位置；
• 404：找得到主机，但是主机下面没有你所请求的文件；
• 500：服务器自己出了问题；
• 502：主机都找不到了；

5.2 304 状态码

• Cache-control和Expires 都是用来判断本地缓存是否过期失效；
• 假如过期了，再向服务器请求新的，并不是每次都去请求；
• 以这个图片来说，可以根据Etag、Last-Modified、貌似还有MD5，阿里貌似用的Unicorn？
  
  

  0_1460647685216_图片.PNG
• 当然就算判定过期了，也不是一定会重新请求这个图，因为本地缓存里面的creative time 对比 Last-Modified后，发现没什么变化，然后继续用缓存的，把这个图在本地Expires也改一下到新的。
• 500：服务器自己出了问题；
• 502：主机都找不到了；

6.浏览器开始拿着代码渲染

• 浏览器下载也是从上到下，渲染也是从上到下，并且下载和渲染同时；
• 解析HTML生成DOM，解析CSS样式表生成渲染树；
• 解析 JavaScript，不过js是阻塞式加载，这里又想到了js的defer和async ；
• 渲染树OK了，浏览器计算完成之后开始绘制；
  用户就看到了页面。

6.1 为什么一般建议CSS放入head，JS放在body底部

• CSS在下载之后，会将之前的样式表一起解析，解析完成之后将会对此前(包含已经渲染的)重新渲染，所以最好将多个CSS，放在开头，在获得DOM之前，就让他们这些CSS合并，让他们商量决定了，到底怎么渲染，不要搞得渲染好了，突然又来一个新的，让前面渲染白费力气，假如CSS太大或者放到下面了，就可能造成FOUC。

• JS，阻塞式加载是因为JS极有可能修改DOM，一修改DOM，DOM树得重新绘制，所以浏览器为了得打一个稳定的DOM树，就让JS这种下载完马上执行(可以想到还有defer和async )的先让他做完形成稳定的DOM树，再下载别的，但是假如放在头部，网又特别渣，JS还是一些国外的，在某些浏览器里面就可能出现白屏。