一、大致步骤
第一步：输入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静态码，再返回给阿帕奇；
阿帕奇返回给浏览器，浏览器渲染并呈现；
192
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
