面试闯关2

1.一个页面从输入URL到页面加载显示完成，这个过程中都发生了什么？

浏览器都会开启一个线程来处理这个请求，同时在远程DNS服务器上启动一个DNS查询，这样就可以使得浏览器获得请求对应的IP地址了
浏览器通过与远程web服务器TCP三次握手协商来建立一个TCP/IP链接。
TCP/IP链接建立，浏览器会通过该链接向远程服务器发送HTTP的GET请求。远程服务器找到资源并使用HTTP响应返回该资源，值为200的HTTP状态码表示一个正确的响应。
web服务器提供资源服务，客户端开始下载资源。
解析html构建dom树->构建render树->布局render树->绘制render树。

TCP/IP三次握手示意图

技术图片

2.http协议的相关知识

HTTP是一个应用层协议，由请求和响应构成，是一个标准的客户端服务器模型。HTTP是一个无状态的协议。

无状态协议

协议的状态是指下一次传输可以“记住”这次传输信息的能力。
http是不会为了下一次连接而维护这次连接所传输的信息,为了保证服务器内存。
比如客户获得一张网页之后关闭浏览器，然后再一次启动浏览器，再登陆该网站，但是服务器并不知道客户关闭了一次浏览器。
由于Web服务器要面对很多浏览器的并发访问，为了提高Web服务器对并发访问的处理能力，在设计HTTP协议时规定Web服务器发送HTTP应答报文和文档时，不保存发出请求的Web浏览器进程的任何状态信息。这有可能出现一个浏览器在短短几秒之内两次访问同一对象时，服务器进程不会因为已经给它发过应答报文而不接受第二期服务请求。由于Web服务器不保存发送请求的Web浏览器进程的任何信息，因此HTTP协议属于无状态协议（Stateless Protocol）。

HTTP协议是无状态的和Connection: keep-alive的区别：

无状态是指协议对于事务处理没有记忆能力，服务器不知道客户端是什么状态。从另一方面讲，打开一个服务器上的网页和你之前打开这个服务器上的网页之间没有任何联系。
从HTTP/1.1起，默认都开启了Keep-Alive，保持连接特性，简单地说，当一个网页打开完成后，客户端和服务器之间用于传输HTTP数据的TCP连接不会关闭，如果客户端再次访问这个服务器上的网页，会继续使用这一条已经建立的连接。
Keep-Alive不会永久保持连接，它有一个保持时间，可以在不同的服务器软件（如Apache）中设定这个时间。

HTTP两种基本的加密算法

对称加密：AES、DES

非对称加密：RSA

状态码

1(信息类)：表示接收到请求并且继续处理
100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本

2(响应成功)：表示动作被成功接收、理解和接受
200——表明该请求被成功地完成，所请求的资源发送回客户端
201——提示知道新文件的URL
202——接受和处理、但处理未完成
203——返回信息不确定或不完整
204——请求收到，但返回信息为空
205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件
206——服务器已经完成了部分用户的GET请求

3(重定向类)为了完成指定的动作，必须接受进一步处理
300——请求的资源可在多处得到
301——本网页被永久性转移到另一个URL
302——请求的网页被转移到一个新的地址，但客户访问仍继续通过原始URL地址，重定向，新的URL会在response中的Location中返回，浏览器将会使用新的URL发出新的Request。
303——建议客户访问其他URL或访问方式
304——自从上次请求后，请求的网页未修改过，服务器返回此响应时，不会返回网页内容，代表上次的文档已经被缓存了，还可以继续使用
305——请求的资源必须从服务器指定的地址得到
306——前一版本HTTP中使用的代码，现行版本中不再使用
307——申明请求的资源临时性删除

4(客户端错误类)：请求包含错误语法或不能正确执行
400——客户端请求有语法错误，不能被服务器所理解
401——请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用
402——保留有效ChargeTo头响应
403——禁止访问，服务器收到请求，但是拒绝提供服务

技术图片

3.css3的rem设置字体大小

px单位

px 优点：比较稳定和精确
px 存在问题：当改变了浏览器的字体大小，这时会使用我们的Web页面布局被打破。这时就提出了使用“em”来定义Web页面的字体。

em单位

一般都是以<body>的“font-size”为基准。比如说我们使用“1em”等于“10px”来改变默认值“1em=16px”，这样一来，我们设置字体大小相当于“14px”时，只需要将其值设置为“1.4em”。

em 是一个相对于父元素的值，其真正的计算公式是：

1 ÷ 父元素的font-size × 需要转换的像素值 = em值

em存在的问题就是：在任何情况下都需要知道父元素的font-size

rem单位(font size of root element)

rem 是相对于html的，这样就意味着，我们只需要在根元素确定一个参考值。

 <style>
   html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
   body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
   h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}
   @media(min-width: 320px) { html { font-size: 12.5%; } }
   @media(min-width: 360px) { html { font-size: 22.5%; } }
   @media(min-width: 400px) { html { font-size: 42.5%; } }
   @media(min-width: 640px) { html { font-size: 62.5%; } }
   @media(min-width: 800px) { html { font-size: 82.5%; } }
   @media(min-width: 1000px) { html { font-size: 92.5%; } }
</style>

rem 的兼容性：

rem是CSS3新引进来的一个度量单位，大家心里肯定会觉得心灰意冷呀，担心浏览器的支持情况。其实大家不用害怕，你可能会惊讶，
支持的浏览器还是蛮多的，比如：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+，不支持IE6-8。

4.html5的新特性

用于绘画的 canvas 元素、svg
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
地理定位
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

参考资料

http协议