理解浏览器是如何加载及渲染网页的

先上图，咱们再慢慢解释，这图就是浏览器加载网页的一个过程

当咱们在浏览器输入一个地址（好比:http://toadw.cn）,那么点击回车后，浏览器是如何加载网页的呢？

加载过程

一开始浏览器是不知道你输入的http://toadw.cn这个东西是什么的，也不知道要去哪里给你找这个网页，他须要向DNS服务发出解析请求
大体的步骤以下：

1. 浏览器发送toadw.cn寻址请求给DNS服务

2. DNS返回数据告诉浏览器toadw.cn的服务器地址是255.255.255.255

3. 本地电脑缓存DNS数据，并发送请求给255.255.255.255这个服务器，而后浏览器和服务器根据HTTP协议进行通信

网页渲染

浏览器拿到HTML代码以后，它是如何显示给你们看的呢？其实所谓的渲染就是讲HTML代码根据CSS定义的规则显示在浏览器窗口中的这个过程

1. 首先浏览器先把这个HTML文档先转化为DOM树，而后根据这个DOM树，进行渲染，转化为可视的东西

2. 在渲染的时候，浏览器从上到下依次渲染DOM树，当发现有外链资源或脚本<link>、<img>、<script>的时候会异步发起请求加载，同时DOM树的解析继续。通常咱们都会把style都放在head里面，那么这样浏览器就先拿到了css样式文件，他就知道如何讲每一个元素绘出来放在哪一个位置。

3. 若是遇到图片<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()?