摘要:的速度明显快于重排重绘与的区别理解了浏览器是如何渲染页面之后我们再来比较这两者就很好理解了执行的时间必须等到页面内包括图片的所有元素加载完毕后才能执行。
先上图,我们再慢慢解释,这图就是浏览器加载网页的一个过程
当我们在浏览器输入一个地址(比如: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树,当发现有外链资源或脚本、、的时候会异步发起请求加载,同时DOM树的解析继续。一般我们都会把style都放在head里面,那么这样浏览器就先拿到了css样式文件,他就知道如何讲每个元素绘出来放在哪个位置。
如果遇到图片浏览器不会等图片加载完再去加载,而是继续加载,这样就会出现个问题,当图片加载完时,在页面插入图片会影响页面的结果,浏览器就又要重新排布,这样浏览器又要花费时间跟经历去排布,所有如果图片是固定的尺寸,我们在写CSS的时候就应该给他加上宽高,浏览器就会预留一个位置给图片,这样就避免了重新排布
上文中将到的重新排布就是回流,网页加载慢,有一部分原因就是回流,因为浏览器要耗更多的时间去重新排布渲染,但回流也是不可避免的,因为网页中的一些效果,如鼠标滑过、点击效果等引起了页面上某些元素的占位面积、定位方式、边距包括浏览器的伸缩等的变化都会发生回流。但也有些事可以避免的,例如上文中说的给图片定死宽高。
有个和 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()?
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/116592.html
摘要:的速度明显快于重排重绘与的区别理解了浏览器是如何渲染页面之后我们再来比较这两者就很好理解了执行的时间必须等到页面内包括图片的所有元素加载完毕后才能执行。 先上图,我们再慢慢解释,这图就是浏览器加载网页的一个过程 showImg(https://segmentfault.com/img/remote/1460000008648335?w=516&h=425); 当我们在浏览器输入一个地址...
摘要:欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径开启性能优化之旅高性能滚动及页面渲染优化理论写法对压缩率的影响唯快不破应用的个优化步骤进阶鹅厂大神用直出实现网页瞬开缓存网页性能管理详解写给后端程序员的缓存原理介绍年底补课缓存机制优化动 欢迎来我的个人站点 性能优化 其他 优化浏览器关键渲染路径 - 开启性能优化之旅 高性能滚动 scroll 及页面渲染优化 理论 | HTML写法...
阅读 1617·2021-11-22 14:45
阅读 1062·2021-11-17 09:33
阅读 3321·2021-09-02 09:48
阅读 969·2019-08-30 15:54
阅读 2766·2019-08-30 15:53
阅读 2552·2019-08-30 12:54
阅读 2241·2019-08-29 12:37
阅读 2419·2019-08-26 13:58