常见的调试报错 - 基础:加载顺序 ¶

这里想强调一下JS代码在HTML页面里的加载顺序，阅读源代码时也跟着这个思维就知道这块代码是怎么一回事的了

其它一切代码都有可能引发一些事情，导致各处变量的改变

页面加载完成 ¶

如果有window.onload或者$(function(){})又或者$(document).ready(function(){})这些代码，表示它们正在监听页面加载完毕后的事情，怎么才叫页面加载完毕呢

首先加载HTML代码，这当请求页面的时候HTML是第一时间到达的，然后一边呈现这些HTML，开始一边根据link标签加载样式，一边根据script标签加载脚本等

其中如果是link标签，则加载样式，但样式未加载完成的话不会阻塞脚本加载，样式可以加载回来后慢慢渲染，所以经常能看到的就是页面的内容都未成形但脚本已经开跑了好多

简单地说就是脚本不会等样式

样式未加载完成问题不大，但所有script涉及的脚本未加载运行完毕就都不算“页面完成”，所以是不会触发onload事件的

页面中假设有5个script标签引用了外部脚本，则如果上一个脚本未运行完，不会运行下一个

所以平时追查页面问题时就可以这样思考：如果脚本C出了意外，由于脚本C前面是脚本B，则在脚本B之前的脚本A里做做事情看正常不，如果正常，说明可能是脚本B里有影响的因素

查问题的时候经常要掌握这个思路，可以先从A开始输出一个东西，看它的值对不对，对就慢慢往后输出。虽然这个好像很普通大家都懂，但实际上由于菜鸟程序员都不清楚JS的一些细节上的运行顺序，往往搞错了调试的位置，导致简单的问题查了老久