交互过程 #

1. 用户请求服务器资源
2. 浏览器作为代理查找远程资源，封装用户请求并发送给服务器
3. 服务器根据用户请求的资源路径及其它参数，进行业务处理把生成的结果发送给浏览器
4. 浏览器解析结果并呈现给用户

具体步骤 #

1. 把URL地址通过DNS解析为具体的服务器主机
2. 浏览器封装HTTP请求 (window.navigator.userAgent)
3. 浏览器创建与服务器的TCP连接
4. 浏览器发出HTTP请求
5. 服务器收到请求后交给相应的进程处理
6. 服务器把处理后的结果发送给浏览器
7. 浏览器生成渲染树和DOM树渲染页面
8. 浏览器处理页面中嵌入的资源和异步请求

域名解析 #

• 域名要比IP好记忆
• 域名通过DNS(Domain Name System)转成IP地址

DNS解析 #

1. 浏览器缓存
2. 系统缓存
3. 路由器缓存
4. ISP(Internet Service Provider)DNS缓存
5. 从顶级域名服务器的根域名服务器开始递递归查询

HTTP请求 #

request

GET / HTTP/1.1
Accept: */*
Accept-Language: zh-cn
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022)
Host: www.google.cn
Connection: Keep-Alive

创建TCP连接 #

• 浏览器和服务器之前传输协议用的是TCP协议，TCP协议比较可靠，所以响应是完整的
• 浏览器封装的请求是HTTP报文
• 页面如果加载内嵌资源失败会出现页面残缺不全的情况

请求的方式 #

• GET 获取服务器上的资源
• POST 增加服务器上的资源
• DELETE 删除服务器上的资源
• HEAD 只要响应头
• OPTIONS 询问服务器支持的方法和请求头
• PUT 更新服务器上的资源

服务器 #

• 物理服务器 IBM Legend
• 服务器程序 nginx apache resin

处理客户端请求的程序 #

每个进程会占用监听一个端口，请求这个端口就可以把请求发给相应的服务

• HTTP 80 nginx apache resin
• HTTPS 443 nginx node
• FTP 21
• SSH 22

服务器进行处理 #

• 请求方法
• 路径
• query string
• 请求头(cookie)
• 请求体
• 服务器配置
• 业务逻辑

响应体 #

response

渲染页面 #

• 浏览器下载的顺序是至上而下，渲染的顺序也是至上到下，下载和渲染同时进行
• 解析HTML生成DOM树
• 解析HTML中的CSS，生成渲染树
• 解析Javascript,解析到的时候执行

DOM树和渲染树 #

DOM树和渲染树都是边解析边生成页面的，所以会随着下面的页面内容不断调整

内嵌资源处理 #

• 在渲染到页面的某一部分时，上面的所有部分都已经下载完成
• 图片和视频等元素需要另外下载
• 同一个域名下并行下载数量有限制

JS和Ajax #

• JS不能并行下载和解析，采用阻塞的方式，当页面引用了JS的时候浏览器发出请求会一直阻塞直到得到响应
• 因为浏览器需要一个稳定的DOM树结构，而JS中很有可能有代码直接改变了DOM树结构，浏览器为了防止出现JS修改DOM树，需要重新构建DOM树的情况，所以就会阻塞其它 下载和呈现
• 遇到ajax后执行，然后执行下面的步骤，直到ajax返回后再重新执行回调函数

CSS #

• 样式表在下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有的元素(包含以前渲染过的)重新渲染
• JS和CSS如果有重定义，后定义的将覆盖之前定义不会报错

为何CSS放上面，JS放下面 #

1. CSS放在下面会新渲染
2. JS放在上面一方面会阻塞渲染执行，出现白页面，一方面得到的DOM树不完整

状态码 #

• 200 OK
• 301 Moved Permanently
• 304 Not Modified
• 403 Forbidden
• 404 Not Found
• 500 Internal Server Error
• 502 Bad Gateway