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

  • 作者:KK

  • 发表日期:2016.11.08


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

  1. 如果只定义函数,那不会有什么事情被运行

  2. 监听事件也不会有什么事情被运行

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


页面加载完成

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

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

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

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

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


脚本会等待脚本

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

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

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