一、大致步骤

第一步：输入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会在哪里查询？

  1. 浏览器缓存：如果在之前对该url指定的主机进行过访问，浏览器会缓存该主机的ip一段时间（该时间浏览器指定），然后通过该IP地址找到对应主机；
  2. 系统缓存：若浏览器中无该缓存，那么就到系统缓存中进行查询，浏览器会进行系统调用，查询缓存；
  3. 路由器缓存：如果系统缓存中也没有，那么就到路由器缓存中进行查询；
  4. ISP DNS 缓存：如果路由器缓存依旧未命中，那么就到ISP DNS中查询，一般的域名都能在这里查询得到；
  5. 递归搜索：如果以上都没有查询到，那么就会到顶级域名服务器的根服务器中进行递归查询，只要该域名存在就肯定能找得到；

• 获取浏览器属性：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

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

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

  • get：索取数据（也可用于发送数据），向服务器拿一个资源，常见百度搜索，附带发送的参数有512字节的限制，附带的参数会在url地址中显示，以键值对形式并且以？进行分隔；
  • post：发送数据（也可用于获取数据），向服务器发送一段数据，常见有留言板，理论上附带发送的数据无大小限制，附带的数据不再url上显示；
  • put：用于向服务器传输一段数据，可以通过get/post达成；
  • delete：用于删除服务器上的一段数据，可以通过get/post达成；
  • head：只查询回应的头部，但是不拿response（响应内容）；
  • trace：查询从本地网络到访问的站定之间经历了什么节点，查询路由；
  • option：向服务器询问支持什么传输方式；

第三步：创建TCP链接

• UDP和TCP的区别

  1. UDP不能够保证传输的可靠性，包不完整时，UDP不会重新发送请求（例如只接受到半张图片）；
  2. TCP可以保证传输的可靠性，包不完整时，TCP会重新发送请求；

• 为什么有时候页面残缺不全
  因为有时候嵌入资源（例如：img标签的图片）未下载下来导致dom布局错乱；

• 相关进程处理（默认端口不会再url上显示，下面是一些默认端口）
  通过端口号来处理不同的进程
  http：80
  https：443
  ssh：22
  ftp：21

• 服务器
  物理主机
  webserver

  • nginx
  • 阿帕奇
  • 微软

第四步：服务器响应请求

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

  1. 请求方式（get/post拿到的可能不一样）
  2. 路径
  3. 请求参数（？XXX=XXX）
  4. cookie（用户身份识别）
  5. 服务器配置
  6. 动态语言代码逻辑

• 服务器响应的内容

  1. 相应的head
  2. response

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

• 浏览器渲染页面

  1. 浏览器渲染页面的下载是自上而下的，渲染顺序也是自上而下的，下载与渲染同时进行；
  2. 解析HTML变成DOM树；
  3. 解析CSS变成渲染树；
  4. 遇到JS时解析JS，解析完成后立即执行；
     （1，2同时进行，一边解析一边生成页面，会随着页面的内容不断调整）

• 关联资源的处理

  1. 在渲染页面到某一部分时，其上面的所有部分（当前的HTML元素和CSS）都已下载完成；
  2. 但是相关联的的元素不一定下载完成了（例如：图片，视屏等元素会并行下载）；
  3. 同一个域名下并行下载数量有限制（有些网站图片等其他资源会放在另外的服务器上）；

• JS和AJAX

  1. 下载解析JS时候是以阻塞的方式进行下载，下载JS时，浏览器在发送了请求后直到响应前都会阻塞其它资源的下载和渲染；
  2. 可以用HTML5的异步下载属性（async和defer）
     • async：遇到JS后与其他资源一起下载，下载完成后执行；
     • defer：遇到JS后与其他资源一起下载，等所有资源下载完成后再去执行；
  3. JS的阻塞性下载是因为JS有可能会改变DOM结构，导致页面重绘；
  4. 遇到AJAX后执行，然后进行下面的步骤，等待AJAX拿到数据后再执行AJAX回调；

• CSS

  1. CSS下载完成后，将和原先下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（包含已经渲染过的元素）再渲染一遍；
  2. JS、CSS如果有重定义，首先查看优先级，以优先级高的为主，若无优先级问题则浏览器以后定义的为主；

• 白屏和FOUC问题

  1. 白屏问题：
     • 原因：
       • 先加载CSS，加载完成后再对HTML进行渲染，如果CSS加载时间过长，则导致白屏；
       • 使用@import，即使css放在link标签里，也有可能导致白屏；
       • 在IE浏览器下：css放置在页面底部，在某些场景下(新窗口打开,刷新等)页面会出现白屏,而不是内容逐步展现；
       • JS放置在头部阻塞后面内容的下载；
  2. FOUC（无样式内容闪烁）
     • 原因：
       • 因为浏览器渲染机制问题，再CSS加载之前，先呈现了HTML，就会出现逐步展示无样式内容，然后样式突然跳出来的问题；
  3. 总结：
     • 如果等待CSS下载完成后才进行渲染，那么就有可能导致白屏；
     • 如果先展示页面，等CSS下载完成后再渲染，就有可能导致FOUC问题；
  4. 解决：
     CSS放置在头部（head）里，JS放置在/body之前；

• 常见状态码

  1. 200：OK（响应成功）；
  2. 301：Moved Permanently（页面已重定向）；
  3. 304：not modified（页面未修改）；
  4. 403：Forbidden（无权限访问）；
  5. 404：Not Found（服务器找到，但是没找到页面）；
  6. 500：Internal Server Error（服务器出错）；
  7. 502：bad getway（服务器未链接上）

• 304 Not Modified

  1. 304码是页面未改变的意思，说明当前页面已访问过，且缓存在有效期内，则服务器回应last-modified给浏览器，浏览器进行判断后若缓存未改变，页面将直接从本地缓存中提取；
     • cache-control：max-age=30000（该页面缓存的有效时间秒数）
     • expires：mon 02 nov 2015 03：02：54 GMT （该页面缓存过期时间）
  2. 若页面缓存被清理，那么就重新发送请求拿；
  3. 若缓存超过了有效期，则验证last-modified（最后修改时间）或者etag
     • last-modified：页面最后修改的时间；
     • etag：文本内容加密出来的一串字符串，若与之前相比未变则发送304；

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

三种情况

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

1. 输入url，通过本机dns解析为ip地址，通过ip地址找到阿帕奇服务器；
2. 通过http协议创建tcp链接，并连接到服务器上，默认端口号是80，请求服务器下载对应的资源；
3. 服务器收到请求后，找到对应页面后打开，然后将内容返回给用户的浏览器；
4. 浏览器渲染页面并呈现给用户；

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

1. 与上面相同，经过dns解析后的ip找到服务器，服务器找到相应的php文件；
2. 阿帕奇本身无法处理php文件，于是委托php应用服务器（需要安装php应用服务器）进行处理。并且转化为html静态代码，再返回给阿帕奇；
3. 阿帕奇将html静态代码传输给浏览器，浏览器渲染并呈现；

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

1. 与上面相同，经过dns解析后的ip找到服务器，服务器找到相应的php文件；
2. 服务器委托php应用服务器解析php文件；
   ★3. php服务器打开php文件，在php文件中通过与数据库连接的代码链接到数据库，然后通过sql语句操作数据库中的数据。找到数据后在通过php服务器转化为html静态码，再返回给阿帕奇；
3. 阿帕奇返回给浏览器，浏览器渲染并呈现；