页面加载时执行js代码的2种方式与差别

需求：

在页面加载时用jquery设置jquery图片轮播插件的第一个图片为active状态。

方法1：

在html上加入js代码

<script>
window.onload = function(){
    $(".carousel-inner.one").children().first().addClass("active");
    $(".carousel-inner.two").children().first().addClass("active");
    $(".carousel-inner.three").children().first().addClass("active");
}
</script>

但是在页面加载时会有明显的闪动效果，即页面先加载完成然后才生效，明显的卡顿渲染感。

方法2：

在html上加js代码

<script>
$(function(){
    $(".carousel-inner.one").children().first().addClass("active");
    $(".carousel-inner.two").children().first().addClass("active");
    $(".carousel-inner.three").children().first().addClass("active");
});
</script>

页面加载时没有任何卡顿渲染效果，用户体验佳。

原因就在于使用jquery的$(ready)函数是在页面加载时就渲染的，而window.onload是在页面加载完成后才渲染。