理解浏览器是如何加载及渲染网页的
先上图,我们再慢慢解释,这图就是浏览器加载网页的一个过程
当我们在浏览器输入一个地址(比如:http://toadw.cn),那么点击回车后,浏览器是如何加载网页的呢?
加载过程
一开始浏览器是不知道你输入的http://toadw.cn
这个东西是什么的,也不知道要去哪里给你找这个网页,他需要向DNS服务发出解析请求
大致的步骤如下:
浏览器发送
toadw.cn
寻址请求给DNS服务DNS返回数据告诉浏览器
toadw.cn
的服务器地址是255.255.255.255
本地电脑缓存DNS数据,并发送请求给
255.255.255.255
这个服务器,然后浏览器和服务器根据HTTP协议进行通讯
网页渲染
浏览器拿到HTML代码之后,它是如何显示给大家看的呢?其实所谓的渲染就是讲HTML代码根据CSS定义的规则显示在浏览器窗口中的这个过程
首先浏览器先把这个HTML文档先转化为DOM树,然后根据这个DOM树,进行渲染,转化为可视的东西
在渲染的时候,浏览器从上到下依次渲染DOM树,当发现有外链资源或脚本
<link>、<img>、<script>
的时候会异步发起请求加载,同时DOM树的解析继续。一般我们都会把style都放在head里面,那么这样浏览器就先拿到了css样式文件,他就知道如何讲每个元素绘出来放在哪个位置。如果遇到图片
<img>
浏览器不会等图片加载完再去加载,而是继续加载,这样就会出现个问题,当图片加载完时,在页面插入图片会影响页面的结果,浏览器就又要重新排布,这样浏览器又要花费时间跟经历去排布,所有如果图片是固定的尺寸,我们在写CSS的时候就应该给他加上宽高,浏览器就会预留一个位置给图片,这样就避免了重新排布
回流(重排reflow)
上文中将到的重新排布就是回流,网页加载慢,有一部分原因就是回流,因为浏览器要耗更多的时间去重新排布渲染,但回流也是不可避免的,因为网页中的一些效果,如鼠标滑过、点击效果等引起了页面上某些元素的占位面积、定位方式、边距包括浏览器的伸缩等的变化都会发生回流。但也有些事可以避免的,例如上文中说的给图片定死宽高。
重绘(repaint)
有个和 reflow 看上去差不多的术语:repaint,中文叫重绘。如果只是改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性,将只会引起浏览器 repaint。repaint 的速度明显快于reflow
$(img).css('width',200px)//重排
$(body).css('backgroud','#fff')//重绘
window.onload()与$(document).ready()的区别
理解了浏览器是如何渲染页面之后我们再来比较这两者就很好理解了
执行的时间
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。
可编写个数不停
window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个 $(document).ready()可以同时编写多个,并且都可以得到执行
简化缩写
window.onload没有简化写法 $(document).ready(function(){})可以简写成$(function(){});也可写成$().ready()
$().load()和window.onload()的区别
这里又会联想到 $().load()
和window.onload()
有没有区别?
查看jq文档load()
事件的定义是
当指定的元素(及子元素)已加载时,会发生
load()
事件。且$(window).load
方法是$(window).on('load',handler)
的shortcut
所以$(window).load()
和window.onload()
是没区别的,唯一的小区别就是$(window).load()
可以写很多个。
最后来个小练习
如何用原生的JS实现$(doucment).ready()
?
理解浏览器是如何加载及渲染网页的相关推荐
- android webview加载不出来,【新手有关问题】Android浏览器中WebView加载不出网页
当前位置:我的异常网» Android » [新手有关问题]Android浏览器中WebView加载不出网 [新手有关问题]Android浏览器中WebView加载不出网页 www.myexcepti ...
- android 浏览器对图片加载高度渲染问题
今天在开发有道汉语词典移动版的时候遇到了一个很奇怪的问题. 在android设备上访问的时候,总是发现有底部背景色不能完全渲染出来的情况(有时候又是正常的,一会儿出现一会儿不出现,iphone设备也是 ...
- 浏览器加载和渲染html的顺序
1.浏览器加载和渲染html的顺序 浏览器加载和渲染html的顺序 IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的. 在渲染到页面的某一部分时,其上面的所有部分都已经下载完成 ...
- 加载如下html 写出输出顺序,浏览器加载和渲染html的顺序-结论篇
我只转载觉得可以使用的. 1.浏览器加载和渲染html的顺序 1.IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的. 2.在渲染到页面的某一部分时,其上面的所有部分都已经下载完 ...
- 浏览器加载解析渲染机制的全面解析
(注1:如果有问题欢迎留言探讨,一起学习!本文首发于我的简书,转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录.) 1. 简介 在前面一篇文章中,讲到了用户从输入url到看到页面的 ...
- 浏览器渲染html的流程,浏览器渲染的工作流程和图片加载与渲染规则
1 浏览器渲染的工作流程 浏览器的工作原理.以Webkit引擎的工作流程为例,浏览器加载一个HTML页面后进行如下操作 解析HTML[遇到标签加载图片] -> 构建DOM树 加载样式 -> ...
- 页面加载完毕_【前端面试】dom 的解析,加载,渲染
本文会把 dom 的解析,加载,渲染结合 window.performance 一起讲. dom 的解析 解析:HTMl 解析器把 HTML 构建成 HTML 树形数据结构,也就是 DOM 树. 注意 ...
- 页面的加载与渲染顺序
页面的加载与渲染顺序: 1.一个页面的加载顺序是从上到下顺序加载的,并且加载与渲染同时进行. 2.引用外部js文件时,当在加载过程中遇到标签时,浏览器会向服务器发送一个reques并等待该reques ...
- 浏览器页面资源加载过程与优化
评价页面性能好坏的核心之一就是页面的加载速度,而页面加载速度的关键就是页面资源的加载.本文将从浏览器浏览器页面资源加载过程展开分析,来引出页面关键请求路径的概念,并给出如何优化该关键请求路径的一些方法 ...
最新文章
- 课程第五天内容《基础交换 五》
- 怎么解决tomcat占用8080端口问题图文教程
- 控件 qml_Flat风格的Qml进度条
- 代码优化能减少多少运行速度_35 个小细节,提升 Java 代码的运行效率!你知道几个?...
- ichart.js绘制虚线 ,平均分虚线
- 深入理解JVM虚拟机读书笔记——类的加载机制
- 设置盒子背景色透明度
- 免费下载思维导图模板的方法
- 自定义 Spring Starter
- 洞见科技解决方案总监薛婧:联邦学习助力数据要素安全流通
- mumu模拟器网络问题相关处理
- aspectj框架切入点表达式
- Mac 安装Photoshop遇到一系列问题解决方法
- 解决GitHub/GitLab官网访问慢的问题
- SpringBoot之事务处理:隔离级别与传播行为
- 乐视网复牌即跌停,仍有千万买单甘作“接盘侠”
- 精彩回顾|「源」来如此 第六期 - 开源经济与产业投资
- java基础巩固-宇宙第一AiYWM:为了维持生计,多高(多线程与高并发)_Part7~整起(打手集团【线程池】)
- vue中引入jquery方法 或 $ is not defined错误解决方法
- JNCIP-M考试通过体会