小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

🌟从url输入地址到渲染出页面之间进行了什么操作

域名DNS解析

　　- 浏览器DNS缓存

　　- 系统DNS缓存

　　- 路由器DNS缓存

　　- IPS服务器DNS缓存

　　- 根域名服务器DNS缓存

- 顶级域名服务器DNS缓存

TCP连接： TCP三次握手

　　- 第一次握手，由浏览器发起，告诉服务器我要发送请求了

　　- 第二握手，由服务器发起，告诉浏览器我准备接受了，你赶紧发送吧

　　- 第三次握手，由浏览器发送，告诉服务器，我马上就发了，准备接受吧

发送请求

　　- 请求报文：HTTP协议的通信内容

接受响应

　　- 响应报文

渲染页面

- 遇见HTML标记，浏览器调用HTML解析器解析成Token并构建成dom树

- 遇见style/link标记，浏览器调用css解析器，处理css标记并构建cssom树

- 遇到script标记，调用JavaScript解析器，处理script代码（绑定事件，修改dom树/cssom树）

- 将dom树和cssom树合并成一个渲染树

- 根据渲染树来计算布局，计算每个节点的几何信息（布局）

- 将各个节点颜色绘制到屏幕上（渲染）

注意：这几个不一定按顺序执行，如果dom树或cssom树被修改了，可能会执行多次布局和渲染。往往实际页面中，这些步骤都会执行多次的。

断开连接：TCP四次挥手

- 第一次挥手：由浏览器发起的，发送给服务器，我东西发送完了（请求报文），你准备关闭吧

- 第二次挥手：由服务器发起的，发送给浏览器，我东西接收完了（请求报文），我准备关闭了，你也准备吧

- 第三次挥手：由服务器发起的，发送给浏览器，我东西发送完了（响应报文），你准备关闭吧

- 第四次挥手：由浏览器发起的，发送给服务器，我东西接收完了（响应报文），我准备关闭了，你也准备吧

口述：

浏览器会根据URL逐层查询DNS服务器缓存，解析URL中的域名所对应的IP地址，DNS解析的缓存由近到远分别是（见上）；根据找到的IP地址和对应的端口来和服务器建立TCP连接；浏览器发送HTTP请求；服务器对浏览器请求做出响应，并把对应的带有HTML文本的HTTP响应报文发送给浏览器；浏览器收到了HTML后在窗口开始渲染页面；最后浏览器释放TCP连接

问题：为什么是三次握手，四次挥手？

在握手的时候，浏览器和服务器之间没有建立数据连接。挥手这是在建立数据连接的基础上进行的，需要确保数据的完整性

🌟typeof 和 instanceof 的区别

instanceof和typeof都能用来判断一个变量是否为空或是什么类型的变量。

1. typeof用以获取一个变量的类型

typeof一般只能返回如下几个结果：number,boolean,string,function,object,undefined。

我们可以使用typeof来获取一个变量是否存在，如if(typeof a!="undefined"){}，而不要去使用if(a)因为如果a不存在（未声明）则会出错，对于Array,Null等特殊对象使用typeof一律返回object，这正是typeof的局限性。

2. instanceof用于判断一个变量是否某个对象的实例

如果我们希望获取一个对象是否是数组，或判断某个变量是否是某个对象的实例，则要选择使用instanceof

var a = new Array();

alert(a instanceof Array) //true

alert(a instanceof Object) //true

websocket的实现和应用

(1)什么是WebSocket?

WebSocket是HTML5中的协议，支持持久连续，http协议不支持持久性连接。Http1.0和HTTP1.1都不支持持久性的链接，HTTP1.1中的keep-alive，将多个http请求合并为1个

(2)WebSocket是什么样的协议，具体有什么优点？

HTTP的生命周期通过Request来界定，也就是Request一个Response，那么在Http1.0协议中，这次Http请求就结束了。在Http1.1中进行了改进，是的有一个connection：Keep-alive，也就是说，在一个Http连接中，可以发送多个Request，接收多个Response。但是必须记住，在Http中一个Request只能对应有一个Response，而且这个Response是被动的，不能主动发起。

WebSocket是基于Http协议的，或者说借用了Http协议来完成一部分握手，在握手阶段与Http是相同的。我们来看一个websocket握手协议的实现，基本是2个属性，upgrade，connection。

基本请求如下：

GET /chat HTTP/1.1

Host: [server.example.com](http://server.example.com/)

Upgrade: websocket

Connection: Upgrade

Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==

Sec-WebSocket-Protocol: chat, superchat

Sec-WebSocket-Version: 13

Origin: [http://example.com](http://example.com/)

告诉服务器发送的是websocket

Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==

Sec-WebSocket-Protocol: chat, superchat

Sec-WebSocket-Version: 13

IE6的bug们

1.双边距BUG float引起的使用display

2.3像素问题使用float引起的使用dislpay:inline -3px

3.超链接hover 点击后失效使用正确的书写顺序 link visited hover active

4.Ie z-index问题给父级添加position:relative

5.Png 透明使用js代码改

6.Min-height 最小高度！Important 解决’

7.select 在ie6下遮盖使用iframe嵌套

8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

各大厂前端面试题合集 — javascript（一）

🌟从url输入地址到渲染出页面之间进行了什么操作

🌟typeof 和 instanceof 的区别

websocket的实现和应用

IE6的bug们