浏览器的渲染过程

1.输入网址https://www.jd.com/

2.获取服务器页面，服务器页面经过编译后再由浏览器解释执行

3.浏览器先接受页面的文字信息，然后再进行由上到下解析

4.先生成DOM,优先将html里的内容以最快速度显示在网页上，此时的网页不好看，十分杂乱，并发起css、js、image请求。

5.css下载完成，开始构建cssom

6.cssom+dom=rendertree

7.再layout,计算出每个元素的位置布局再页面上。

8.再painting绘图，此时的页面已经是好看的页面了。image是并发下载的，而JS是阻塞下载

时间： 2024-10-03 07:10:18

浏览器的渲染过程的相关文章

前端进阶——浏览器页面渲染过程

一 .构建 DOM 和 CSSOM 树浏览器渲染页面前需要先构建 DOM 和 CSSOM 树. 浏览器解析过程大概经过:字节 → 字符 → 令牌 → 节点 → 对象模型. 浏览器处理html页面的方式如下图: 1.转换:浏览器从磁盘或网络读取HTML的原始字节,并根据文件指定的编码将它们转换成各个字符 2.令牌化:浏览器将字符串转换成W3C HTML5标准规定的各种令牌(节点) 3.词法分析:发出的令牌转换成定义其属性和规则的对象 4.DOM构建:根据标记之间的关系构建dom 整个流程的最终输

浏览器渲染过程

有时候想要进行性能优化时了解浏览器的渲染过程无疑是十分重要的.下面来看首先介绍一下主流浏览器的渲染引擎: IE:Trident chrome:Blink Safire:webkit Firefox:Gecko Opera:Blink QQ浏览器/微信webview:X5/Blink 可能有很多会感到疑惑:chrome不是webkit么?其实Blink也算是webkit的一种升级吧,前缀还是不变的. 然后介绍一下渲染过程 1.DOM解析(与CSS解析同时进行): 把HTML文档解析成DOM树的过

前端必备的浏览器知识（渲染过程、回流和重绘等）

常用哪几种浏览器测试?有哪些浏览器内核(Rendering Engine)? (Q1)浏览器:Chrome,IE,FireFox,Safari,Opera. (Q2)对应内核:Webkit,Trident,Gecko,Webkit,Presto.(国内的浏览器,除了傲游是直接基于Webkit开发的,其他基本都是基于谷歌在webkit上开发的Chromium,当然谷歌自己也是用的Chromium.另外值得的一提的是手机的系统(安卓.苹果)默认浏览器都是基于webkit内核的) 如何理解浏览器内核?

通过浏览器渲染过程来进行前端优化

介绍做web开发,我个人觉得必须要弄清楚浏览器的渲染过程,否则我们很难进行前端优化. 我今天就简单说一下页面加载和前端优化. 页面加载我按照最简单的方式进行描述,实际上更复杂,不管是在浏览器端还是服务端,比如dns解析,代理服务器,负载均衡器等等. 1.用户访问网页,发送一个http请求到网络服务器. 2.网络服务器(应用服务器)解析请求,发送请求给数据库服务器. 3.数据服务器返回数据给网络服务器,网络服务器解析数据,并生成html文件内容放入http response中,返回给浏览器.

浏览器的渲染机制

Google Web Fundamentals 是一个非常优秀的文档,里面讲到了跟web.浏览器.前端的方方面面.我总结一下其中的 Ilya Grigorik 写的 Critical rendering path 浏览器渲染机制部分的内容如下: 几个概念 1.DOM:Document Object Model,浏览器将HTML解析成树形的数据结构,简称DOM. 2.CSSOM:CSS Object Model,浏览器将CSS代码解析成树形的数据结构. 3.DOM 和 CSSOM 都是以 Byte

转---JS 一定要放在 Body 的最底部么？聊聊浏览器的渲染机制

作者:德来 segmentfault.com/a/1190000004292479 如有好文章投稿,请点击 → 这里了解详情一.从一个面试题说起面试前端的时候我喜欢问一些看上去是常识的问题.比如:为什么大家普遍把<script src=""></script>这样的代码放在body最底部?(为了沟通效率,我会提前和对方约定所有的讨论都以chrome为例) 应聘者一般会回答:因为浏览器生成Dom树的时候是一行一行读HTML代码的,script标签放在最后面就不

Vue中的浏览器关键渲染路径及虚拟DOM

1.浏览器渲染页面过程 (浏览器渲染引擎的渲染流程) 1.1.关键渲染路径关键渲染路径是指浏览器从最初接收请求来的HTML.CSS.javascript等资源,然后解析.构建树.渲染布局.绘制,最后呈现给客户能看到的界面这整个过程. 所以浏览器的渲染过程主要包括以下几步: 解析HTML生成DOM树. 解析CSS生成CSSOM规则树. 将DOM树与CSSOM规则树合并在一起生成渲染树. 遍历渲染树开始布局,计算每个节点的位置大小信息. 将渲染树每个节点绘制到屏幕. 2.JS操作真实DOM的代价!

浏览器页面渲染机制及简单优化

浏览器的内核是指支持浏览器运行的最核心的程序,分为两个部分: 1:渲染引擎 2:JS引擎目前市面上常见的浏览器内核可以分为这四种:Trident(IE).Gecko(火狐).Blink(Chrome.Opera).Webkit(Safari) 页面加载过程要点如下: 1:浏览器根据DNS服务器得到域名的IP地址 2:向这个IP的机器发送HTTP请求 3:服务器收到.处理并返回HTTP请求 4:浏览器得到返回内容浏览器渲染过程: 1:浏览器会解析三个东西: ①.HTML/SVG/XHTML,H

网页在浏览器上的渲染过程

最近在学习性能优化,学习了雅虎军规 ,可是觉着有点云里雾里的,因为里面有些东西虽然自己也一直在使用,但是感觉不太明白所以然,比如减少DNS查询,css和js文件的顺序.所以就花了时间去了解浏览器的工作,有一篇经典的文章<how browsers work> ,讲的很详细,也有中文译本 .不过就是文章有点太长,也讲了一堆东西,还是自己总结一下. 为什么要了解浏览器加载.解析.渲染这个过程? 好,我们先说一下,为什么要了解这些呢?如果想写出一个最佳实践的页面,就要好好了解. 了解浏览器如何进行加载