浏览器渲染原理解析建议收藏

Web页面运行在各种各样的浏览器当中,浏览器载入、渲染页面的速度直接影响着用户体验简单地说,页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程。先来大致了解一下浏览器都是

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

浏览器渲染原理解析建议收藏此处内容已经被作者隐藏,请输入验证码查看内容
验证码:
请关注本站微信公众号,回复“”,获取验证码。在微信里搜索“”或者“”或者微信扫描右侧二维码都可以关注本站微信公众号。

Web页面运行在各种各样的浏览器当中,浏览器载入、渲染页面的速度直接影响着用户体验简单地说,页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程。先来大致了解一下浏览器都是怎么干活的:
  1. 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件;
  2. 浏览器开始载入html代码,发现<head>标签内有一个<link>标签引用外部CSS文件;
  3. 浏览器又发出CSS文件的请求,服务器返回这个CSS文件;
  4. 浏览器继续载入html中<body>部分的代码,并且CSS文件已经拿到手了,可以开始渲染页面了;
  5. 浏览器在代码中发现一个<img>标签引用了一张图片,向服务器发出请求。此时浏览器不会等到图片下载完,而是继续渲染后面的代码;
  6. 服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排布,因此浏览器需要回过头来重新渲染这部分代码;
  7. 浏览器发现了一个包含一行Javascript代码的<script>标签,赶快运行它;
  8. Javascript脚本执行了这条语句,它命令浏览器隐藏掉代码中的某个<div> (style.display=”none”)。杯具啊,突然就少了这么一个元素,浏览器不得不重新渲染这部分代码;
  9. 终于等到了</html>的到来,浏览器泪流满面……
  10. 等等,还没完,用户点了一下界面中的“换肤”按钮,Javascript让浏览器换了一下<link>标签的CSS路径;
  11. 浏览器召集了在座的各位<div><span><ul><li>们,“大伙儿收拾收拾行李,咱得重新来过……”,浏览器向服务器请
  求了新的CSS文件,重新渲染页面。

 

 

 

页面为什么会慢?那是因为浏览器要花时间、花精力去渲染,尤其是当它发现某个部分发生了点变化影响了布局,需要倒回去重新渲染,内行称这个回退的过程叫reflow。

 http://www.cnblogs.com/roucheng/

reflow问题是可以优化的,我们可以尽量减少不必要的reflow。比如开头的例子中的<img>图片载入问题,这其实就是一个可以避免的reflow——给图片设置宽度和高度就可以了。这样浏览器就知道了图片的占位面积,在载入图片前就预留好了位置。

另外,有个和reflow看上去差不多的术语:repaint,中文叫重绘。如果只是改变某个元素的背景色、文 字颜色、边框颜色等等不影响它周围或内部布局的属性,将只会引起浏览器repaint。repaint的速度明显快于 reflow(在IE下需要换一下说法,reflow要比repaint 更缓慢)。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/120702.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 孙鑫老师 java从入门到精通 视频教程 批量下载

    孙鑫老师 java从入门到精通 视频教程 批量下载本视频教程是孙鑫老师亲自开发录制的,内容涵盖了java技术从入门到精通整个过程。对于java爱好者是一套不可多得的教材!相信下载此教程的同志都是未来的电脑高手,对于批量下载的方法我在这时就不一一说了,相信兄弟们都能找到这种简单规律。这里以第三课批量下载为例简单说一下:(记得将通配符长度设为1哦)第一课Java的一些基本概念http://www.ibook8.com/te

  • acwing-1170. 排队布局(差分约束)[通俗易懂]

    acwing-1170. 排队布局(差分约束)[通俗易懂]当排队等候喂食时,奶牛喜欢和它们的朋友站得靠近些。农夫约翰有 N 头奶牛,编号从 1 到 N,沿一条直线站着等候喂食。奶牛排在队伍中的顺序和它们的编号是相同的。因为奶牛相当苗条,所以可能有两头或者更多奶牛站在同一位置上。如果我们想象奶牛是站在一条数轴上的话,允许有两头或更多奶牛拥有相同的横坐标。一些奶牛相互间存有好感,它们希望两者之间的距离不超过一个给定的数 L。另一方面,一些奶牛相互间非常反感,它们希望两者间的距离不小于一个给定的数 D。给出 ML 条关于两头奶牛间有好感的描述,再给出 MD

  • String[]数组初始化「建议收藏」

    String[]数组初始化「建议收藏」创建数组://一维数组String[]str=newString[5];//创建一个长度为5的String(字符串)型的一维数组String[]str=newString[]{“”,””,””,””,””};String[]str={“”,””,””,””,””};//二维数组String[][]str=newString[2][2];//

  • 签名设计手写简单_怎么写自己的签名

    签名设计手写简单_怎么写自己的签名首语:大家好,很多人都想设计一个简单的艺术签名,所以就有人开始找【签名设计手写简单】,这其实对于设计师来说的很简单的事情。写字的时候也有简单的时候,也有复杂的时候。真的需要怎么去取舍,这就要看你是如何去选择了。签名设计手写简单首先说一下,三秒艺术签名网的所有签名都是手写完成的,大家这一点不要质疑。其次是说到简单,其实写签名就是要让名字变得简单,好写,这样才会让人感觉,舒畅。但是不是什么字都能被写的简单的,这需要考虑一个文字的笔画多少程度,举个例子“饕餮”这两个字就不好去做简化。像,明啊,等啊,峰啊

  • springMVC3学习(二)–ModelAndView对象

    springMVC3学习(二)–ModelAndView对象

    2021年11月13日
  • List转JSONArray、JSONArray转List、String转JSONArray

    List转JSONArray、JSONArray转List、String转JSONArray1.List转JSONArrayList<T>list=newArrayList<T>();JSONArrayarray=JSONArray.parseArray(JSON.toJSONString(list));2.JSONArray转ListJSONArrayarray=newJSONArray();List<EventColAttr>list=JSONObject.parseArray(array.toJSONStri

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号