Web开发常用到的JavaScript代码区别和经验总结

1.下列三种写法的区别:就存在写法上的区别,而实际作用一致。
$(document).ready(function(){
//do something
})
$().ready(function(){
//do something
})
$(function(){
//do something
})

总结:
    ready() 函数仅能用于当前文档,因此无需选择器。
    所以document选择器可以不要,那么就可以写成:
    $().ready(function(){})
    最后$的默认事件就是ready,所以,ready也可以省略,写成:
    $(function(){});

2.document.ready和onload的区别
    页面加载完成有两种事件，
    一、是ready,表示文档结构已经加载完成（不包含图片等非文字媒体文件）,
    二、onload,指示页面包含图片等文件在内的所有元素都加载完成。

  页面中的内容加载顺序:域名解析-加载html-加载js和css-加载图片等其他信息
    Dom Ready:在DOM加载完成后就可以可以对DOM进行操作。
    Dom Ready应该在“加载js和css”~~~~~~“加载图片等其他信息”之间,就可以操作Dom了

  //经常使用
  document.getElementById("imgID").οnlοad=function(){
  //do something
  }
  这是:Dom Load-->在document文档加载完成后就可以可以对DOM进行操作,document文档包括了加载图片等其他信息。

  例子分析理解:
    Dom Ready是在dom加载完成后就可以直接对dom进行操作,
    比如一张图片只要<img>标签完成,不用等这个图片加载完成,
    就可以设置图片的宽高的属性或样式等。

    Dom Load是在整个document文档（包括了加载图片等其他信息）
    加载完成后就可以直接对dom进行操作,
    比如一张图片要等这个图标加载完成之后才能设置图片的宽高的属性或样式等。

  最佳实践:
    解决方案就是用Dom Ready而不是Dom Load，因为通常大图片加载的时候会一点一点的加载,
    这个在尺寸大,字节多,网速慢的时候表现的非常明显,用Dom Load，通常是先把页面撑开,
    加载完成后再把图片重设宽高,图片加载多少时间,这个页面就会撑开多久，用户会非常难受！！

3.图片浏览效果最佳解决方案:
  图片大小比较统一:可以直接给<img>标签添加宽和高的值,要保证不图片不变形,就直接自设置宽的值。
  图片大小比较不统一:影响-->图片失真, 解决:设置max-width,min-height的值来解决。