1. 答案
详细版:
-
浏览器会开启一个线程来处理这个请求,对 URL 分析判断如果是 http 协议就按照 Web 方式来处理;
-
调用浏览器内核中的对应方法,比如 WebView 中的 loadUrl 方法;
-
通过DNS解析获取网址的IP地址,设置 UA 等信息发出第二个GET请求;
-
进行HTTP协议会话,客户端发送报头(请求报头);
-
进入到web服务器上的 Web Server,如 Apache、Tomcat、Node.JS 等服务器;
-
进入部署好的后端应用,如 PHP、Java、JavaScript、Python 等,找到对应的请求处理;
-
处理结束回馈报头,此处如果浏览器访问过,缓存上有对应资源,会与服务器最后修改时间对比,一致则返回304;
-
浏览器开始下载html文档(响应报头,状态码200),同时使用缓存;
-
文档树建立,根据标记请求所需指定MIME类型的文件(比如css、js),同时设置了cookie;
-
页面开始渲染DOM,JS根据DOM API操作DOM,执行事件绑定等,页面显示完成。
简洁版:
-
浏览器根据请求的URL交给DNS域名解析,找到真实IP,向服务器发起请求;
-
服务器交给后台处理完成后返回数据,浏览器接收文件(HTML、JS、CSS、图象等);
-
浏览器对加载到的资源(HTML、JS、CSS等)进行语法解析,建立相应的内部数据结构(如HTML的DOM);
-
载入解析到的资源文件,渲染页面,完成。
2. 浏览器是如何渲染页面的
-
HTML 被 HTML 解析器解析成 DOM 树;
-
CSS 被 CSS 解析器解析成 CSSOM 树;
-
结合 DOM 树和 CSSOM 树,生成一棵渲染树(Render Tree),这一过程称为 Attachment;
-
生成布局(flow),浏览器在屏幕上“画”出渲染树中的所有节点;
-
将布局绘制(paint)在屏幕上,显示出整个页面。
3. 重绘制和重排
重排(Reflow):当渲染树的一部分必须更新并且节点的尺寸发生了变化,浏览器会使渲染树中受到影响的部分失效,并重新构造渲染树。
重绘(Repaint):是在一个元素的外观被改变所触发的浏览器行为,浏览器会根据元素的新属性重新绘制,使元素呈现新的外观。比如改变某个元素的背景色、文字颜色、边框颜色等等
区别:重绘不一定需要重排(比如颜色的改变),重排必然导致重绘(比如改变网页位置)
3.1 引发重排的操作
添加、删除可见的dom
元素的位置改变
元素的尺寸改变(外边距、内边距、边框厚度、宽高、等几何属性)
页面渲染初始化
浏览器窗口尺寸改变
获取某些属性。当获取一些属性时,浏览器为取得正确的值也会触发重排,它会导致队列刷新,这些属性包括:offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)。所以,在多次使用这些值时应进行缓存。
3.2 如何优化渲染
浏览器自己的优化:
浏览器会维护1个队列,把所有会引起重排,重绘的操作放入这个队列,等队列中的操作到一定数量或者到了一定时间间隔,浏览器就会flush队列,进行一批处理,这样多次重排,重绘变成一次重排重绘
开发者要减少 reflow/repaint:
(1)不要一条一条地修改 DOM 的样式。可以先定义好 css 的 class,然后修改 DOM 的 className。
(2)不要把 DOM 结点的属性值放在一个循环里当成循环里的变量。
(3)为动画的 HTML 元件使用 fixed 或 absoult 的 position,那么修改他们的 CSS 是不会 reflow 的。
(4)千万不要使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。(table及其内部元素除外,它可能需要多次计算才能确定好其在渲染树中节点的属性,通常要花3倍于同等元素的时间。这也是为什么我们要避免使用table做布局的一个原因。)
(5)不要在布局信息改变的时候做查询(会导致渲染队列强制刷新)