url到返回数据

url 解析，根据 dns 系统进行 ip 查找

1. url为啥要解析，dns查询规则是什么？

DNS在数据库上存在域名与IP地址的映射关系。通过域名，得到该域名对应IP地址的过程叫做域名解析
1. 浏览器检查自身缓存中有没有被解析过的这个域名对应的IP地址，如果存在解析就结束了。
2. 如果没有，则检查操作系统缓存中有没有对应的已解析过的结果。hosts的文件如果指定了一个域名对应的IP地址，那么浏览器会首先使用这个IP地址进行访问。
3. 如果1和2都没有命中，会请求本地的域名服务器（LDNS）来解析这个域名，大约80%的域名解析会到这里完成。
4. 如果LDNS仍然没有命中，就会直接跳到Root Server域名服务器请求解析。全球13个地址。一定会找到并返回目标IP

2. URL编码规则:四种情况

1. 网址路径中包含汉字 http://zh.wikipedia.org/wiki/春节
http://zh.wikipedia.org/wiki/%E6%98%A5%E8%8A%82
2. 查询字符串包含汉字 http://www.baidu.com/s?wd=春节
3. Get方法生成的URL包含汉字,GET和POST方法的编码，用的是网页的编码。<meta http-equiv="Content-Type" content="text/html;charset=xxxx">
   如果上面这一行最后的charset是UTF-8，则URL就以UTF-8编码；如果是GB2312，URL 就以GB2312编码。
4. Ajax调用的URL包含汉字
   url = url + "?q=" +document.myform.elements[0].value; // 假定用户在表单中提交的值是“春节”这两个字

解决：
1. escape()与decodeURI() (弃用)
它着眼于对整个URL进行编码，因此除了常见的符号以外，对其他一些在网址中有特殊含义的符号; / ? : @ & = + $ , #，也不进行编码。编码后，它输出符号的utf-8形式，并且在每个字节前加上%。
2. encodeURIComponent()与decodeURIComponent()
; / ? : @ & = + $ , #在encodeURIComponent()中统统会被编码

html如何做dns优化

前端的dns优化，可以在html页面头部写入dns缓存地址，

<meta http-equiv="x-dns-prefetch-control" content="on" />
<link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />

查找到IP之后，就是http协议的三次握手

1. 从网卡把数据包传输出去到服务器发生了什么，OSI参考模型
   1. 将经过应用层（DNS,http,https）封装后的数据包交给传输层（TCP,UDP）
   2. 浏览器将经过传输层封装的数据包交给系统的网络层（IP协议）
   3. 浏览器根据目标IP判定非本地，找到谁是网关，找网关需要ARP协议。
   4. 操作系统将IP数据包给MAC层，网卡将数据包发出。
   5. 网关（路由器）接收数据包，取出目标IP，根据路由协议（OSPF，BGP），获取下一个网关MAC地址，直到获取到最后一个网关。网关内用MAC地址通讯。
   6. 数据到达最后网关，查找目标IP，获取目标IP的MAC地址
   7. 目标服务器对比数据包中MAC地址（9中获取到的MAC地址），将数据包发送给服务器的网络层（IP协议），对比IP，取下IP头，IP头里写上一层封装的TCP协议，将数据包交给TCP层
   8. TCP沿来路回复“已到达目标服务器”

建立完链接，就该请求html文件了，如果html文件在缓存里面浏览器直接返回，如果没有，就去后台拿

1. 前端缓存
   1. 主要是分为HTTP缓存和浏览器缓存。
   2. HTTP缓存分为强缓存与协商缓存
   3. 强缓存分为Expires和Cache-Control， Cache-Control优先级高于Expires
   4. Expires为服务器返回约定的到期时间。即再次发起该请求时，如果客户端的时间小于Expires的值时，直接使用缓存结果。
   5. Cache-Control
      1. public 所有内容都将被缓存（客户端和代理服务器都可缓存）
      2. private 只有客户端可以缓存
      3. no-cache 客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定。必须先与服务器确认返回的响应是否发生了变化，如果存在合适的验证令牌(ETag)
      4. no-store 所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存。直接禁止浏览器以及所有中间缓存存储任何版本的返回响应。例如包含个人隐私数据或银行业务数据的响应
      5. max-age=xxx (xxx is numeric) 缓存内容将在xxx秒后失效
   6. 协商缓存If-Modified-Since: <date>和If-None-Match:<tags>
   7. If-Modified-Since: / Last-Modified,服务器将最后的修改日期(Last-Modified)附加到所提供的文档上去，如果没命中强缓存，则会携带If-Modified-Since， 如果内容被修改了,服务器回送新的文档,返回200状态码和最新的修改日期；如果内容没有被修改,会返回一个304 Not Modified响应。
   8. If-None-Match / ETag 以一秒为粒度的修改日期可能就不够用；有些服务器无法准确判定其页面的最后修改日期

2. from disk cache和from memory cache，什么时候会触发？
3. 启发式缓存?在什么条件下触发？

返回html之后，cssom + domTree = html,然后布局和绘制

1. 页面渲染优化
2. 如何诊断页面渲染时各个性能指标