门户网站的建设方式有哪些,合理的网站结构,合肥学校网站建设,企业官网网页设计报价1、浏览器内部组成 我们看到浏览器主要包括#xff1a;
1个浏览器主进程#xff1a; 主要负责界面显示#xff0c;用户交互#xff0c;子进程管理多个渲染进程#xff1a;一般浏览器会为每个Tab标签窗口创建一个渲染进程#xff0c;主要负责将html#xff0c;css#…1、浏览器内部组成 我们看到浏览器主要包括
1个浏览器主进程 主要负责界面显示用户交互子进程管理多个渲染进程一般浏览器会为每个Tab标签窗口创建一个渲染进程主要负责将htmlcssJavaScript转换成我们看到的网页里面包含多个线程比如JavaScript的V8引擎。1个GPU进程 主要负责复杂的计算比如3D动画图形绘制。1个网络进程 主要负责网络资源加载多个插件进程 浏览器器每个插件都会分配一个插件进程。
2、从一个url开始
我们下面来看在地址栏输入一个url后浏览器做了什么事我们先来看下流程图 下面我们来分析下流程图
当用户在地址栏输入一个地址或者关键字并按下回车键的时候意味着当前页面很快要被替换在这个时候会触发当前页面的beforeunload事件。然后浏览器的当前tab栏就变成加载状态变成一个转动的圆圈此时页面还没有开始改变需要等到后面“提交文档”后才会别新内容替换。浏览器主进程合成完整Url如果是输入的是地址比如“baidu.com”则自动合成为https://www.baidu.com/。 如果输入的是关键字则使用默认搜索引擎合成带搜索关键字Url比如输入‘hello’默认搜索引擎为百度则合成为https://www.baidu.com/s?ieUTF-8wdhello然后把完整url发送给网络进程。网络进程接收到url请求后先判断是否本地缓存了资源。如果有则直接返回资源给浏览器主进程不发起网络请求。如果没有缓存则进入网络请求。网络请求之前先要进行DNS解析把域名转换成ip这一步也是先查DNS缓存如果有当前域名的缓存则从缓存中直接取对应ip。如果没有缓存则从DMS服务器请求ip。然后构建请求体请求头包括cookie等信息向服务端发送网络请求建立Tcp链接。服务端接收到请求消息后进行对应操作然后生成响应数据发送给网络进程。网络进程接收到服务器返回的响应数据后先解析响应头信息判断状态码是否为重定向3xx),如果是则取响应头中Location字段重新发起请求。如状态码为200表示请求成功可以继续处理请求。如果状态码为200浏览器主进程会根据响应头中的Content-Type字段做出响应对策如果此字段的值为application/octet-stream则启动下载流程。如果Content-Type为text/html则启动渲染流程。默认情况下浏览器会为每一个tab页签创建一个渲染进程但是如果是同一个站点根域名协议相同端口子域名不同则共用一个渲染进程。进入渲染流程开始前浏览器主进程会发送一个“接收文档”消息给渲染进程这里的文档是指存在网络进程里面的响应体信息。渲染进程接收到“提交文档”的消息后会和网络进程建立一个通道接收数据。渲染进程接收到数据后开始向浏览器主进程发送“确认提交”,消息浏览器主进程接收到“确认提交”的消息后开始更新浏览器页面包括地址栏的url前进后退按钮。渲染进程开始生成页面这个过程是一边接收一边生成。当页面渲染完毕后当前页面及内部iframe都出发了onload事件发送“渲染完毕”消息。浏览器主进程接收到消息后显示页面并停止标签栏的加载动画。
到这里为止当我们在地址栏输入一个url然后到页面展示在我们面前的大致流程就梳理完毕了。但是这里面还有一个非常重要的环节就是页面解析的流程我们上面只是一带而过这是渲染进程来做的工作下面来具体展开。
3、渲染进程
渲染进程的核心工作就是解析接收到的html/js/css代码并将其转换成用户可交互的页面。 渲染进成包含
主线程GUI负责解析dom结构js引擎线程负责执行js代码会阻塞主进程。合成线程分组合成并把视口附近图块提交给光栅化线程。多个光栅化线程生成位图即页面需要的每个像素点的颜色值我们看到的页面其实就是每个像素点的颜色 下面来分析下流程图
渲染进程开始接受到数据的时候为了提高效率会先预扫描接收到的数据如果如果发现有需要加载资源的标签img,link,外部script等就先告诉浏览器主进程先去下载这个过程叫预解析,这个任务交出去后就继续做自己本职工作,解析html文件。 当主线程解析html文件时会碰到三种类型数据html标签css代码js代码。 html标签对于普通的html标签会生成Dom树(标签节点的结构树是浏览器的内置对象会有一些内置方法和属性)。 css样式对于css代码会根据css的样式选择器构建cssDom树,并对样式进行计算(remem转换为px没有定义样式的提供默认样式生成computedStyle。 如果遇到的是css外部链接如果从预解析开始还没下载完则继续下载不会阻塞解析。 js代码对于js代码会先判断js代码前的css有没有解析完包括外部css的下载如果没有则等待css代码下载完并解析完毕然后再执行js代码。js执行期间阻塞解析。所以步骤是这样遇到js - 阻塞dom树构建 - css下载 - css解析-js执行-继续构建dom树 js链接对于js的链接如果标签上没有设置异步标志async/defer),则和普通的js代码一样下载也会阻塞dom解析也需要等css下载解析完但是css下载不会阻塞js下载步骤如下 遇到js链接(无异步标签) - 阻塞dom树构建 - css下载同时js下载 - css解析-js执行-继续构建dom树 如果有异步标签则下载不阻塞dom树构建async文件下载完立即执行。defer文件下载完等html解析完按加载顺序执行。步骤如下 遇到js链接(async) -下载js不影响dom构建 - js下载完毕 - 立即执行js走普通js代码流程 遇到js链接(defer) -下载js不影响dom构建 - js下载完毕 - 等html解析完毕 - 按顺序执行js 等dom树和computedStyle都构建完毕后(要都构建完毕), 更具dom树和computedStyle构建布局树layoutTree,布局树包含每个节点的位置坐标和盒模型的大小并且剔除了隐藏的节点样式设置了display:none的节点)。等布局树layoutTree构建完毕后我们已经知道了页面上要显示的每个节点的大小位置和样式。继续来主线程会对节点进行分层通过遍历layoutTree构建图层树layerTree。哪些节点会被分为一层呢分为两种情况 拥有层叠上下文属性的元素会被单独提升为一层(什么是层叠上下文),包含设置了z-indextransformwill-changefilteropacity1,flex子元素等等。 需要裁剪的地方会被分为一层即元素的大小被限制而内容超出元素大小内容被裁剪。 图层树layerTree被创建后会为每一个图层创建绘制指令列表可以再浏览器调试窗口的layers标签下查看分层和指令列表信息。渲染进程的主线程把绘制指令生成后并不执行而是转交给合成线程。合成线程先把图层分为图块(大小通常为256256/512512)然后把浏览器用户视口附近的图块优先交给栅格化线程来生成位图。栅格化的最小执行单位是图块即最少要把一个图块栅格化。栅格化的过程通常会用GPU执行就是说栅格化线程会把绘制图块的指令发送给GPU然后GPU生成图块的位图像素点的颜色值存在GPU内存。当视口附近所有图块栅格化完毕后合成线程发送DrawQuad指令给浏览器主进程浏览器主进程把页面的内容显示在屏幕上。
