浏览器的渲染顺序

直接上代码

 1 <style>
 2     div{
 3         width: 500px;
 4         height: 400px;
 5         border: 1px solid #ff0000;
 6         background: url(./images/11.jpg);   //css里的图片11.jpg
 7     }
 8 </style>
 9 <script>
10     new Image().src = "./images/22.jpg";    //js里的图片22.jpg
11 </script>

13 <body>
14      <div></div>
15      <img src="./images/33.jpg" alt="" />     //html里的图片33.jpg
16 </body>

如果是按代码写入的顺序来发起图片请求,应该是11,22,33,

但实际在调试工具中可以看见是33,22,11,

也就是说先执行的是html中的代码,再执行的是js中的代码,最后执行的是css中的代码

具体原理看  →  浏览器的渲染原理简介:http://coolshell.cn/articles/9666.html

时间: 2024-10-05 22:37:03

浏览器的渲染顺序的相关文章

从进度条和alert的出现顺序来了解浏览器 UI 渲染 &amp; JS进程

项目里有一个需求是在上传文件的时候需要显示进度条,那么理所当然的在上传完成后就需要提示用户上传完毕并且更新进度条. 之前的预期表现是,上传完毕后,先更新进度条到100%,再alert出提示,所以代码如下. 1 $('progressBar').text('100%'); 2 $('progressBar bar').css('width', '100%'); 3 alert('上传成功'); 问题一:实际表现为先alert出提示,此时被阻塞的页面显示的进度条没有被更新到100%. 分析原因,浏览

服务器端渲染VS浏览器端渲染

1)浏览器渲染和服务器渲染区别:何为渲染?如果我们只是想显示一堆不变的数据,那么我们直接写一个a.html丢到服务器上让客户端访问就可以了.但这是基本不可能的事情,数据一般是变化的.你不可能为每套数据写一个视图,所以我们需要分离数据和视图,然后使用一种技术将数据塞到视图中,这种技术就叫渲染.这工作放在服务器上做就是服务器渲染,放在浏览器做就是浏览器渲染. 这里的渲染,就是指生成html文档的过程,和浏览器渲染html没有关系.浏览器端渲染,指的是用js去生成html,前端做路由.举例:React

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

浏览器的内核是指支持浏览器运行的最核心的程序,分为两个部分: 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

【转】浏览器的渲染原理简介

How Browsers Work 这篇文章把浏览器的很多细节讲的很细,也有中文的翻译版本,现在转载的这篇是陈皓写的,目的的为了能在上班途中,或是坐马桶时就能读完,并能从中学会一些能用在工作上的东西. 浏览器工作大流程 先看个图 从图中,可以看到: 1) 浏览器会解析三个东西 * 一个 HTML/SVG/XHTML,事实上,Webkit 有三个C++的类对应这三类文档.解析这三种文件会产生一个DOM Tree * CSS,解析CSS会产生CSS规则树 * JavaScript 脚本,主要是通过

浏览器的渲染机制

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

(转)CAS (4) —— CAS浏览器SSO访问顺序图详解(CAS Web Flow Diagram by Example)

CAS (4) —— CAS浏览器SSO访问顺序图详解(CAS Web Flow Diagram by Example) tomcat版本: tomcat-8.0.29 jdk版本: jdk1.8.0_65 nginx版本: nginx-1.9.8 cas版本: cas4.1.2cas-client-3.4.1 参考来源: jasig.github.io:CAS protocol CAS (1) —— Mac下配置CAS到Tomcat(服务端) CAS (2) —— Mac下配置CAS到Tomc

Vue服务端渲染和Vue浏览器端渲染的性能对比

Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司做Vue项目的时候,一直苦于产品.客户对首屏加载要求,SEO的诉求,也想过很多解决方案,本次也是针对浏览器渲染不足之处,采用了服务端渲染,并且做了两个一样的Demo作为比较,更能直观的对比Vue前后端的渲染. talk is cheap,show us the code!话不多说,我们分别来看两个D

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

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

UGUI学习笔记之渲染顺序

数据记录为Unity4.6b21版本 图片解释:这是一个按钮UI,层级1显示的是按钮背景,层级2显示的Image(白色方框),层级3显示的是Text; 实验的结果渲染顺序为3->2->1;即在Hierarchy面板中,从下往上依次渲染.