最近一直在困扰dom的加载顺序问题，经常会遇到以为绑定好的事件不响应等情况，一头雾水，直到请教了周围的同事，才发现了解dom的加载顺序是多么的重要。

　　关于这个问题，其实网上已经有一些介绍，但是我觉得并不是特别准确，所以还是把自己理解的整理一下~

　　浏览器解释html文件中的所有内容是从上到下加载的！浏览器解释html文件中的所有内容是从上到下加载的！浏览器解释html文件中的所有内容是从上到下加载的！重要的事情说三遍。

找到CSS和JS的正确位置

　　所以我们写文件的时候，要把CSS样式写在head中， 如果放底部的话，页面结构出来了，css还没开始渲染。然而js文件却应该尽量放在下面，除了少量轻量级、并且非常重要的js可以放在上面以外，剩下的都应该写在body底部或body下面，尤其是大一些的js文件，最好也在最后引入。

加载顺序

　　现在就来说说dom的加载顺序，其实dom的加载真的就是从上到下啊，都打好冒号敲好回车了竟然还是觉得写成一段话比较明白。浏览器解释文件会从上到下顺序解释，遇到样式就把样式加载到内存，遇到标签就加载标签，遇到js就加载js，遇到文件就先下载文件，然后加载里面的内容，加完完内容之后就回到原ng页面接着解释。。。就是酱紫。。。

但是如果就是酱紫哪里还用得着写一篇博客呢？首先，今天我们说的所有都围绕“浏览器解释html文件中的所有内容是从上到下加载的”这句话闸门开的，由于这个特性，会导致很多问题。

不遇到不知道坑——知识点一

　　那么重点来了，首先在js方法调用上，由于都是解释型语言，所以和python一样，如果我们调用一个js中的方法，而这个js我们是在调用方法之后才引入，就会出现问题。例如：

  1. <script src="/static/js/tree.js"></script>
  2. <script src="/static/js/jquery-1.11.1.min.js"></script>

如上，如果我们在tree.js里面用到了jquery-1.11.1.min.js中的内容，加载的时候就会出问题。。。简单来说就是它还木有解释道后面的js，也就不知道你写的是什么啦~~~

不遇到不知道坑——知识点二

　　还有一点，我们在初学js的时候，很喜欢给标签绑定function,就像下面这样！

  1. <script type="text/javascript">
  2.     $(".nav").on("click","li",function(){
  3.          alert(1)
  4.     });
  5. </script>
  6. <ul class='nav'>
  7.     <li>example blablabla<li>
  8. </ul>

　　如上例，如果你写成上面那个样子，你就完了！！！因为解释到“$(".nav").on("click","li",function(){”的时候还没有这个nav class呢！这个时候怎么办呢？

  1. <ul class='nav'>
  2.     <li>example blablabla<li>
  3. </ul>
  4. <script type="text/javascript">
  5.     $(".nav").on("click","li",function(){
  6.         alert(1)
  7.       });
  8. </script>
  1. <body>
  2.     <script type="text/javascript">
  3.         $("body").on("click",".nav li",function(){
  4.             alert(1)
  5.           });
  6.     </script>
  7.     <ul class='nav'>
  8.         <li>example blablabla<li>
  9.     </ul>
  10. </body>

2

  1. <script type="text/javascript">
  2.     $(function(){
  3.     $(".nav").on("click","li",function(){
  4.         alert(1)
  5.       });
  6.     });
  7. </script>
  8. <ul class='nav'>
  9.     <li>example blablabla<li>
  10. </ul>

3

　　上面有三种解决方法，第一种就是把nav放上面去，先加载nav class，再绑定事件；第二种方法是把方法绑到已经加载的body上去，因为body是早就存在的标签了，这里比较有意思的是on方法，它的参数分别是event，target和function，这个target是click事件被触发的时候才去找的，所以也就不会受顺序问题影响了；最后一种方法，$(function(){}），这个是非常好用哒，意思是等到整个页面加载完成之后，再执行里面的方法，也就是说，我们有了这个方法，不管这个nav写在哪里，只要等到加载完在去绑定方法，就ok啦~~~

　　就是酱，上面的三种方法，第2种和第3种都比较常用，第三种方法比较好理解了，第二种方法往往在实际的操作中容易出错，但是用好了可以发挥更大的作用，自己体会下吧。

　　有了上面这些基础，就算遇到异步加载等复杂的问题，其实也是由最基本的原因引起的，遇到问题不要慌，一点点的寻找原因，计算机很单纯，你说1它不会做2，总之它不对，一定不是它的错~~~

DOM加载顺序的更多相关文章

  1. 关于js css html加载顺序整理

    1.js放在head中会立即执行,阻塞后续的资源下载与执行.因为js有可能会修改dom,如果不阻塞后续的资源下载,dom的操作顺序不可控. 正常的网页加载流程是这样的. 浏览器一边下载HTML网页,一 ...

  2. html,css,js加载顺序

    1.js放在head中会立即执行,阻塞后续的资源下载与执行.因为js有可能会修改dom,如果不阻塞后续的资源下载,dom的操作顺序不可控. 正常的网页加载流程是这样的. 浏览器一边下载HTML网页,一 ...

  3. DOM加载：浏览器渲染和操作顺序（转载 学习中。。。）

    DOM加载:浏览器渲染和操作顺序 1.HTML解析完毕 2.外部脚本和样式表加载完毕 3.脚本在文档内解析并执行 4.HTML DOM完全构造起来 5.图片和外部内容加载 6.网页完成加载 基于这个顺 ...

  4. JS 和 CSS 的位置对其他资源加载顺序的影响

    JS 和 CSS 在页面中的位置,会影响其他资源(指 img 等非 js 和 css 资源)的加载顺序,究其原因,有三个值得注意的点: JS 有可能会修改 DOM. 典型的,可能会有 document ...

  5. Ckeditor 的加载顺序

    我们的只用在文件里面引用一个CKEditor的js文件--CKEditor目录下的ckeditor.js文件, 该文件会完成后续的所有的CKEidtor依赖的js文件的加载. 所依赖的js文件加载顺序 ...

  6. jquery的 $(function(){ }) = $(document).ready(function(){ }) ，及页面的加载顺序

    document.ready和onload的区别:一.JavaScript文档加载完成事件页面加载完成有两种事件一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件) 二.是onloa ...

  7. easyui控件的加载顺序

    使用easyui做布局时,会模仿窗口程序界面,做出一些较复杂的布局.按由外层到内层的顺序: (最外层)panel->tabs->tabs1 ->tabs2->layout-&g ...

  8. HTML加载顺序总结测试

    首先,页面加载顺序:解析HTML结构.加载外部脚本和样式表文件.解析并执行脚本代码.构造HTML DOM模型.加载图片等外部文件.页面加载完毕. 也就是:html → head → title → # ...

  9. jquery源码 DOM加载

    jQuery版本:2.0.3 DOM加载有关的扩展 isReady:DOM是否加载完(内部使用) readyWait:等待多少文件的计数器(内部使用) holdReady():推迟DOM触发 read ...

随机推荐

  1. 数据库备份checksum选项你会用么？

    SQL SERVER有好多好多功能,选项也一大堆,很多功能选项并不常用.但是如果真有这种需求的时候又想不起来~ 本篇我们就来聊聊备份里的选项checksum,这是个啥玩意?听都没听过?来看下图: 就是 ...

  2. RabbitMQ高可用方案总结

    RabbitMQ的集群方案有以下几种: 1.普通的集群 exchange,buindling再所有的节点上都会保存一份,但是queue只会存储在其中的一个节点上,但是所有的节点都会存储一份queue的 ...

  3. loadrunner总体使用篇

    为什么要进行性能测试呢?  有些问题是只有在大并发或者压力测试下才会暴露出来的,在平常的公司内部测试中,感觉一切都是正常的,但是把服务放到生产线上,例如某个时刻突然有很多的用户要向我们的服务发送请求, ...

  4. 数据分析 - 开放街道地图(OpenStreetMap)

    数据分析 - 开放街道地图(OpenStreetMap) Reinhard使用OpenStreetMap的开放地图数据作为本次数据分析的数据源,使用Python进行数据清洗,使用MongoDB进行数据 ...

  5. SpringMVC框架下的拦截器

    在eclipse的javaEE环境下:导包.... web.xml文件中的配置: <?xml version="1.0" encoding="UTF-8" ...

  6. STM32 MX Cube生成的工程中 使用printf向Uart发送数据

    1. 在main函数前面添加: int fputc(int ch,FILE *f){ uint8_t temp[1]={ch}; HAL_UART_Transmit(&huart1,temp, ...

  7. java使用sax解析xml

    目的:解析xml文件,并存入mysql,并且要解析的字段能一一对应.这里解析的是微博的文件,想要利用里面的article和person_id字段. 思路: 为了能得到person_id和article ...

  8. Mac下体验Hexo与Github Pages搭建

    很久之前就知道Github可以发布自己的博客,因为仅支持静态文件,一直懒于动手自己进行编辑.再了解到还存在 JekyII 和 Hexo 这样的内容生成框架后,终于决定体验一下. 一.本地环境准备. G ...

  9. 关于phpcms 万一忘记密码怎么破？

    莫慌~海洋小生教你~我也是偷偷学来的,呀哈哈哈! first:............................你就认命吧!哈哈哈... 开玩笑开玩笑! LOOK HERE ↓: 1.在没有安装 ...

  10. python3 cgi传数据

    用cgi向文本或者数据库写入数据 1.开启cgi服务 python -m http.server  --cgi port[端口可选默认为8000] update.py代码 #coding:utf8im ...