http常用问题总结(二)
1、一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?
一.当发送一个URL请求时,不管这个URL是Web页面的URL还是Web页面上每个资源的URL,浏览器都会开启一个线程来处理这个请求,同时在远程DNS服务器上启动一个DNS查询。这能使浏览器获得请求对应的IP地址。
二.浏览器与远程Web服务器通过TCP三次握手协商来建立一个TCP/IP连接。该握手包括一个同步报文,一个同步-应答报文和一个应答报文,这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信,而后服务器应答并接受客户端的请求,最后由客户端发出该请求已经被接受的报文。
三.一旦TCP/IP连接建立,浏览器会通过该连接向远程服务器发送HTTP的GET请求。远程服务器找到资源并使用HTTP响应返回该资源,值为200的HTTP响应状态表示一个正确的响应。
四.此时,Web服务器提供资源服务,客户端开始下载资源。 请求返回后,便进入了我们关注的前端模块 简单来说,浏览器会解析HTML生成DOM Tree,其次会根据CSS生成CSS Rule Tree,而javascript又可以根据DOM API操作DOM。
2.浏览器解析渲染过程?
基本流程:解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树
浏览器会解析三个东西:
(1)HTML/SVG/XHTML,解析这三种文件会产生一个 DOM Tree。
(2)CSS,解析 CSS 会产生 CSS 规则树。
(3)JavaScript脚本,主要是通过 DOM API 和 CSSOM API 来操作 DOM Tree 和 CSS Rule Tree.
3.渲染树(render tree)和DOM树的关系?
在DOM树构建的同时,浏览器会构建渲染树(render tree)。渲染树的节点(渲染器),在Gecko中称为frame,而在webkit中称为renderer。渲染器是在文档解析和创建DOM节点后创建的,会计算DOM节点的样式信息。
在webkit中,renderer是由DOM节点调用attach()方法创建的。attach()方法计算了DOM节点的样式信息。attach()是自上而下的递归操作,故父节点总是比子节点先创建自己的renderer。销毁的时候,则是自下而上的递归操作,故子节点总是比父节点先销毁。
若元素的display属性被设置成了none,或者如果元素的子孙继承了display:none,renderer不会被创建。节点的子类和display属性一起决定为该节点创建什么样的渲染器。但是visibility:hidden的元素会被创建。
4.浏览器同源策略
同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能;所谓同源是指:域名、协议、端口相同。
同源策略一般分为2种:
DOM 同源策略:禁止对不同源页面 DOM 进行操作。主要场景是 iframe 跨域的情况,不同域名的 iframe 是限制互相访问的。非同源Cookie、LocalStorage 和 IndexDB 无法读取; DOM 无法获得;
XMLHttpRequest 同源策略:禁止使用 XHR 对象向不同源的服务器地址发起 HTTP 请求,即AJAX 请求不能发送;
跨域的解决方法:
一、CORS(跨域资源共享)
使用自定义的 HTTP 头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功,还是应该失败。
二、JSONP 跨域
通过动态创建 script 标签,然后利用 src 属性进行跨域
三、图像 Ping 跨域
由于img标签不受浏览器同源策略的影响,允许跨域引用资源。因此可以通过 img 标签的 src 属性进行跨域
四、服务器代理
由服务器请求所要域的资源再返回给客户端。
五、document.domain 跨域
适用于Cookie 和 iframe 窗口在一级域名相同,只是二级域名不同的情况下
六、window.name 跨域
只要在同一个窗口里,前一个网页设置了这个属性,后一个网页可以读取它
七、location.hash 方式跨域
是子框架具有修改父框架 src 的 hash 值,通过这个属性进行传递数据,且更改 hash 值,页面不会刷新。但是传递的数据的字节数是有限的。
八 postMessage 跨域
window.postMessage(message,targetOrigin) 方法是 HTML5 新引进的特性,可以使用它来向其它的window 对象发送消息,无论这个 window 对象是属于同源或不同源。适用于解决 dom 跨域问题。