浏览器渲染过程

cucumber 发布于2019-08-29 17:22 / 1470人阅读

摘要：在这个过程中，中可能会通过去引入其他相应的资源，比如的资源，这个时候浏览器可能就会兵法的向服务器去请求这个相关的静态资源，请求回来后通过解析器对其进行解析，从而生成一个树，去和树进行结合生成一个，进一步的进行一个布局，最终进行绘制。

网页内容的组成

doctype: 提供浏览器的html版本信息

head : html头部

meta: 元数据信息

charset: 声明当前文档所实用的字符编码

http-equiv: 客户端行为，如渲染模式，缓存等

name[keywords]: 搜索引擎关键字

name[description]: 搜索引擎描述

name[viewport]: 浏览器视口设置

link

script: 需要在body前完成加载或运行的脚本

body: html实体

script: 需要在body解析时加载或运行的脚本

渲染需要做的工作

通过上面的图可以知道，网页内容首先会被html解析器解析成一个DOM树，实际上html是我们最先会通过网址向服务器请求回来的，请求回来的html从字节流转成字符流，我们的浏览器实际拿到的就是一个字符流，然后浏览器通过词法分析对输入字节流进行逐字扫描，根据构词规则识别单词和符号，分词，生成相应的token，之后会将这些token通过nextToken()添加到dom树中去。所以html解析是从上到下对文档进行一个此法分析，所以它首先遇到html标签的时候会对html生成一个token，这个token会被标记成一个startTag的类型，对于header的花也会被标记成startTag，但是它会声称为headerToken，就是说对于不同类型的html标签格式，在词法分析的过程中，会解析成一个相应的对象，然后token类型会被浏览器解析，最后会将token类型append到dom树上去。

在这个过程中，html中可能会通过link去引入其他相应的资源，比如css的资源，这个时候浏览器可能就会兵法的向服务器去请求这个相关的静态资源，请求回来后通过css解析器对其进行解析，从而生成一个css树，去和dom树进行结合生成一个render Tree，进一步的进行一个布局，最终进行绘制。

加载

css的加载不会阻塞dom解析，但是会阻塞页面渲染，所以一般把css加载放在头部

css会去阻塞js的执行，就是说css资源在加载完之前，js的执行会被阻塞，但是css不会阻塞js脚本的加载

js会去阻塞页面dom的解析

js不阻塞资源的加载

js顺序执行，阻塞后续js逻辑的执行

云服务器混合云 jsp 浏览器渲染云渲染平台视频渲染代渲染 3d渲染

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114280.html

浏览器渲染那些事之 Reflow、Repaint

摘要：原文链接浏览器渲染那些事之浏览器内核渲染引擎在各个浏览器厂商你追我赶的形势下，截止今日，产生了很多不同的浏览器，各个浏览器本质大同小异，核心部分基本相似，由渲染引擎和引擎组成。原文链接浏览器渲染那些事之 Reflow、Repaint 浏览器内核（渲染引擎）在各个浏览器厂商你追我赶的形势下，截止今日，产生了很多不同的浏览器，各个浏览器本质大同小异，核心部分基本相似，由渲染引擎和 J...

morgan 2019-08-29 12:19 评论0 收藏0
你不知道的浏览器页面渲染机制

摘要：前言浏览器的内核是指支持浏览器运行的最核心的程序，分为两个部分的，一是渲染引擎，另一个是引擎。渲染引擎在不同的浏览器中也不是都相同的。接下来就是浏览器的渲染过程。布局完成后，浏览器会立即发出和事件，将渲染树转换成屏幕上的像素。前言浏览器的内核是指支持浏览器运行的最核心的程序，分为两个部分的，一是渲染引擎，另一个是JS引擎。渲染引擎在不同的浏览器中也不是都相同的。目前市面上常见的浏览...

zhunjiee 2019-08-23 16:50 评论0 收藏0
你不知道的浏览器页面渲染机制

摘要：前言浏览器的内核是指支持浏览器运行的最核心的程序，分为两个部分的，一是渲染引擎，另一个是引擎。渲染引擎在不同的浏览器中也不是都相同的。接下来就是浏览器的渲染过程。布局完成后，浏览器会立即发出和事件，将渲染树转换成屏幕上的像素。前言浏览器的内核是指支持浏览器运行的最核心的程序，分为两个部分的，一是渲染引擎，另一个是JS引擎。渲染引擎在不同的浏览器中也不是都相同的。目前市面上常见的浏览...

aboutU 2019-08-19 11:36 评论0 收藏0
详细介绍 Weex 的 JS Framework

摘要：详细的初始化和渲染过程会在后续章节里展开。事件的派发模块的回调函数都是通过这个接口通知到，然后再将其传递给上层前端框架。目前来看有了原生实现的后，这一层可以移除。冻结当前环境里全局变量的原型链如。很久以前，我写过两篇文章（《Weex 框架中 JS Framework 的结构》，《详解 Weex JS Framework 的编译过程》）介绍过 JS Framework。但是文章写于 2...

Mike617 2019-06-25 16:41 评论0 收藏0
浏览器渲染页面过程与页面优化

摘要：由一道面试题引发的思考从用户输入浏览器输入到页面最后呈现有哪些过程一道很常规的题目，考的是基本网络原理，和浏览器加载，过程。所以抽出时间研究下浏览器渲染页面的过程。由一道面试题引发的思考：从用户输入浏览器输入url到页面最后呈现有哪些过程？一道很常规的题目，考的是基本网络原理，和浏览器加载css，js过程。答案大致如下：用户输入URL地址浏览器解析URL解析出主机名浏览...

djfml 2019-08-29 12:58 评论0 收藏0
面试题之从敲入 URL 到浏览器渲染完成

摘要：响应由三个部分组成，分别是状态行消息报头响应正文。详情参考小汪之前写的文章浏览器内核之解释器和模型解释解释过程是指从字符串经过解释器处理后变成渲染引擎内部规则的表示过程。 showImg(https://segmentfault.com/img/remote/1460000016404846); 前言小汪最近在看【WebKit 技术内幕】一书，说实话，这本书写的太官方了，不通俗易懂。...

MAX_zuo 2019-08-23 11:59 评论0 收藏0