面试突破21.从输入URL到加载显示页面,这个过程发生了什么?浏览器会开启一个线程来处理这个请求,同时在远程DNS服务器上启动一个DNS查询,这样浏览器就可以获取到这个请求对应的IP地址。浏览器与远程Web服务器建立TCP三向握手协商。/IP链接。TCP/IP连接建立,浏览器会通过连接向远程服务器发送HTTPGET请求。远程服务器找到资源并通过HTTP响应返回它。HTTP状态代码200表示响应正确。Web服务器提供资源服务,客户端开始下载资源。解析html构建dom树->构建渲染树->布局渲染树->绘制渲染树。TCP/IP三次握手示意图二、http协议相关知识HTTP是由请求和响应组成的应用层协议,是一种标准的客户端服务器模型。HTTP是一种无状态协议。statelessprotocol协议的状态是指下一次传输“记住”本次传输的信息的能力。HTTP不会为下一次连接维护本次连接传输的信息,以保证服务器内存。例如,客户端获取到一个网页后关闭浏览器,然后再次启动浏览器,然后登录网站,但服务器并不知道客户端关闭了一次浏览器。由于Web服务器要面对众多浏览器的并发访问,为了提高Web服务器处理并发访问的能力,在HTTP协议的设计中规定,当Web服务器发送HTTP响应报文和文档时,不不保存请求Web浏览器进程的任何状态信息。有可能当浏览器在几秒钟内两次访问同一个对象时,服务器进程不会拒绝接受第二次服务请求,因为它已经向它发送了响应消息。由于网络服务器不保存发送请求的网络浏览器进程的任何信息,因此HTTP协议是一种无状态协议(StatelessProtocol)。HTTP协议无状态和Connection:keep-alive的区别:stateless是指协议没有事务处理的内存,服务端不知道客户端处于什么状态。另一方面,两者之间没有连接在服务器上打开网页并在您之前在该服务器上打开网页。从HTTP/1.1开始,默认启用Keep-Alive,保持连接特性。简单的说,当一个网页被打开时,客户端和服务器之间用来传输HTTP数据的TCP连接并不会关闭。如果客户端再次访问此服务器上的网页,将继续使用此已建立的连接。Keep-Alive不会永远保持连接,它有一个保持时间,可以在不同的服务器软件(如Apache)中设置。HTTP两种基本加密算法对称加密:AES、DES非对称加密:RSA状态码1(信息类):表示收到请求并继续处理100——客户端必须继续发送请求101——客户端要求服务器根据请求转换HTTP协议版本2(响应成功):表示动作被成功接收、理解和接受200—表示请求成功完成,并将请求的资源回传给客户端201—提示知道新文件的URL202—接受并处理,但处理未完成203—返回信息不确定或不完整204—收到请求,但返回信息为空205—服务器已完成请求,用户代理必须重置当前浏览的文件206-服务器部分用户的GET请求已经完成3(重定向类别)为了完成指定的动作,必须接受进一步的处理300-可以多次获取请求的资源places301-此网页永久转移到另一个URL302-请求的网页被转移到一个新的地址,但客户访问继续通过原来的URL地址,重定向,新的URL会在响应中的Location返回,浏览器将使用新的URL发出新的请求。303——建议客户访问其他网址或访问方式304——请求的网页自上次请求后没有修改过,服务器返回此响应时,不会返回网页内容,表示lastdocument已经被缓存,仍然可以继续使用305-请求的资源必须从服务器指定的地址获取306-上一版HTTP使用的代码,现在不再使用version307-声明暂时删除所请求的资源4(客户端错误类):请求包含不正确的语法或无法正确执行400-客户端请求存在服务器无法理解的语法错误401-请求未经授权,这个状态码必须和WWW-Authenticate头字段一起使用402-reservedvalidChargeTo头响应403—forbidden,服务器收到请求,但拒绝提供服务将使用我们的网页布局被破坏。这时,有人提出用“em”来定义网页的字体。em单位一般以
的“font-size”为准。比如我们用“1em”等于“10px”来改变默认值“1em=16px”,这样当我们设置字体大小等于“14px”时,只需要将它的值设置为“1.4”em”。em是一个相对于父元素的值,它真正的计算公式是:1÷父元素的font-size×要转换的像素值=em值em的问题是:无论如何,你需要知道父元素的值font-sizerem单位(根元素的字体大小)rem是相对于html的,也就是说我们只需要在根元素上确定一个参考值即可。rem兼容性:rem是CSS3新引入的计量单位。大家肯定会对浏览器的支持感到心灰意冷和担忧。其实不用怕,你可能会惊讶,支持的浏览器还蛮多的,比如:MozillaFirefox3.6+、AppleSafari5+、GoogleChrome、IE9+和Opera11+,都不支持IE6-8。4.用于绘画的html5Canvas元素的新特性,用于媒体播放的svg视频和音频元素更好地支持本地离线存储Geolocation新的特殊内容元素,例如article、footer、header、nav、section新的表单控件,例如calendar、日期、时间、电子邮件、url、搜索参考http协议