PHP从URL到页面展示流程,从输入url到页面展现的过程

一、大致步骤

第一步：输入url：

url是什么：

url全称为资源统一定位符，url对应协议(常见的有http(明文传输)，https(加密传输)，file，ftp等)，端口号，

url和uri的区别：

url(资源统一定位符)

uri(资源统一标识符)

url是uri的一个特例，url包含定位web资源的足够信息，其它的uri(如：mailto:xxx@.com)则不是定位符，因为根据他的标识符无法定位任何资源；

url是绝对的，他是一个结构化字符串。

urn(统一资源名称)

urn是uri的一个子类，urn命名资源，但不指定如何定位资源；

第二步：域名到ip

过程：域名(url)=>dns(domain name stystem)解析机=>IP地址

dnf会在哪里查询？

浏览器缓存：如果在之前对该url指定的主机进行过访问，浏览器会缓存该主机的ip一段时间(该时间浏览器指定)，然后通过该IP地址找到对应主机；

系统缓存：若浏览器中无该缓存，那么就到系统缓存中进行查询，浏览器会进行系统调用，查询缓存；

路由器缓存：如果系统缓存中也没有，那么就到路由器缓存中进行查询；

ISP DNS 缓存：如果路由器缓存依旧未命中，那么就到ISP DNS中查询，一般的域名都能在这里查询得到；

递归搜索：如果以上都没有查询到，那么就会到顶级域名服务器的根服务器中进行递归查询，只要该域名存在就肯定能找得到；

获取浏览器属性：window.navigator.userAgent

第三部：找到ip对应的主机后，打包并发送http请求

http报文信息范例

get：http://asadasdasd.com/asdasd(请求方式和地址，同时还有：post，put，delete，head，trace，options)

user-agent：用户浏览器的类型版本信息

accept：text/html,application/xhtml+xml,application/xml;q=0.9,image/webp*(浏览器接收的能识别的数据类型)

accept-encoding：gzip，deflate(浏览器能识别的encoding)

accept-language：浏览器能识别的语言

cache-control：max-age=0

connection：keep-alive

cookie：XXXXXXXX(用户的cookie)

什么是cookie

cookie是一小段文本，当用户访问站点时，可以对用户的浏览器种下一个cookie用以保存用户的相关信息，然后当用户下次进行访问时，站点会先读取用户的cookie，然后呈现相应的页面(例如：登陆一次后，下次再进该网页就自动登录)

几种请求方式的用途和异同

get：索取数据(也可用于发送数据)，向服务器拿一个资源，常见百度搜索，附带发送的参数有512字节的限制，附带的参数会在url地址中显示，以键值对形式并且以？进行分隔；

post：发送数据(也可用于获取数据)，向服务器发送一段数据，常见有留言板，理论上附带发送的数据无大小限制，附带的数据不再url上显示；

put：用于向服务器传输一段数据，可以通过get/post达成；

delete：用于删除服务器上的一段数据，可以通过get/post达成；

head：只查询回应的头部，但是不拿response(响应内容)；

trace：查询从本地网络到访问的站定之间经历了什么节点，查询路由；

option：向服务器询问支持什么传输方式；

第三步：创建TCP链接

UDP和TCP的区别

UDP不能够保证传输的可靠性，包不完整时，UDP不会重新发送请求(例如只接受到半张图片)；

TCP可以保证传输的可靠性，包不完整时，TCP会重新发送请求；

为什么有时候页面残缺不全

因为有时候嵌入资源(例如：img标签的图片)未下载下来导致dom布局错乱；

相关进程处理(默认端口不会再url上显示，下面是一些默认端口)

通过端口号来处理不同的进程

http：80

https：443

ssh：22

ftp：21

服务器

物理主机

webserver

nginx

阿帕奇

微软

第四步：服务器响应请求

那些内容影响服务器生成的结果

请求方式(get/post拿到的可能不一样)

路径

请求参数(？XXX=XXX)

cookie(用户身份识别)

服务器配置

动态语言代码逻辑

服务器响应的内容

相应的head

response

第五步：浏览器拿到响应文本，然后渲染

浏览器渲染页面

浏览器渲染页面的下载是自上而下的，渲染顺序也是自上而下的，下载与渲染同时进行；

解析HTML变成DOM树；

解析CSS变成渲染树；

遇到JS时解析JS，解析完成后立即执行；

(1，2同时进行，一边解析一边生成页面，会随着页面的内容不断调整)

关联资源的处理

在渲染页面到某一部分时，其上面的所有部分(当前的HTML元素和CSS)都已下载完成；

但是相关联的的元素不一定下载完成了(例如：图片，视屏等元素会并行下载)；

同一个域名下并行下载数量有限制(有些网站图片等其他资源会放在另外的服务器上)；

JS和AJAX

下载解析JS时候是以阻塞的方式进行下载，下载JS时，浏览器在发送了请求后直到响应前都会阻塞其它资源的下载和渲染；

可以用HTML5的异步下载属性(async和defer)

async：遇到JS后与其他资源一起下载，下载完成后执行；

defer：遇到JS后与其他资源一起下载，等所有资源下载完成后再去执行；

JS的阻塞性下载是因为JS有可能会改变DOM结构，导致页面重绘；

遇到AJAX后执行，然后进行下面的步骤，等待AJAX拿到数据后再执行AJAX回调；

CSS

CSS下载完成后，将和原先下载的所有样式表一起进行解析，解析完成后，将对此前所有元素(包含已经渲染过的元素)再渲染一遍；

JS、CSS如果有重定义，首先查看优先级，以优先级高的为主，若无优先级问题则浏览器以后定义的为主；

白屏和FOUC问题

白屏问题：

原因：

先加载CSS，加载完成后再对HTML进行渲染，如果CSS加载时间过长，则导致白屏；

使用@import，即使css放在link标签里，也有可能导致白屏；

在IE浏览器下：css放置在页面底部，在某些场景下(新窗口打开,刷新等)页面会出现白屏,而不是内容逐步展现；

JS放置在头部阻塞后面内容的下载；

FOUC(无样式内容闪烁)

原因：

因为浏览器渲染机制问题，再CSS加载之前，先呈现了HTML，就会出现逐步展示无样式内容，然后样式突然跳出来的问题；

总结：

如果等待CSS下载完成后才进行渲染，那么就有可能导致白屏；

如果先展示页面，等CSS下载完成后再渲染，就有可能导致FOUC问题；

解决：

CSS放置在头部(head)里，JS放置在/body之前；

常见状态码

200：OK(响应成功)；

301：Moved Permanently(页面已重定向)；

304：not modified(页面未修改)；

403：Forbidden(无权限访问)；

404：Not Found(服务器找到，但是没找到页面)；

500：Internal Server Error(服务器出错)；

502：bad getway(服务器未链接上)

304 Not Modified

304码是页面未改变的意思，说明当前页面已访问过，且缓存在有效期内，则服务器回应last-modified给浏览器，浏览器进行判断后若缓存未改变，页面将直接从本地缓存中提取；

cache-control：max-age=30000(该页面缓存的有效时间秒数)

expires：mon 02 nov 2015 03：02：54 GMT (该页面缓存过期时间)

若页面缓存被清理，那么就重新发送请求拿；

若缓存超过了有效期，则验证last-modified(最后修改时间)或者etag

last-modified：页面最后修改的时间；

etag：文本内容加密出来的一串字符串，若与之前相比未变则发送304；

二、以服务器为阿帕奇，php语言，动态网站访问过程图

三种情况

第一种：用户访问服务端的index.html文件

输入url，通过本机dns解析为ip地址，通过ip地址找到阿帕奇服务器；

通过http协议创建tcp链接，并连接到服务器上，默认端口号是80，请求服务器下载对应的资源；

服务器收到请求后，找到对应页面后打开，然后将内容返回给用户的浏览器；

浏览器渲染页面并呈现给用户；

第二种：用户访问服务端的index.php文件

与上面相同，经过dns解析后的ip找到服务器，服务器找到相应的php文件；

阿帕奇本身无法处理php文件，于是委托php应用服务器(需要安装php应用服务器)进行处理。并且转化为html静态代码，再返回给阿帕奇；

阿帕奇将html静态代码传输给浏览器，浏览器渲染并呈现；

第三种：用户访问服务器里面的mysql数据库里面的数据

与上面相同，经过dns解析后的ip找到服务器，服务器找到相应的php文件；

服务器委托php应用服务器解析php文件；

★3. php服务器打开php文件，在php文件中通过与数据库连接的代码链接到数据库，然后通过sql语句操作数据库中的数据。找到数据后在通过php服务器转化为html静态码，再返回给阿帕奇；

阿帕奇返回给浏览器，浏览器渲染并呈现；