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 跨域问题。
网友评论