最近一直在困扰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. asp.net的mongodb实例

    mongodb为2.6版本, .net是4.0, c#接口时1.7. 运行环境为windows8 with visual studio2010 注意事项:在mongodb中使用地理位置存储信息且动用到 ...

  2. 使用bat/vbs/ahk对Windows下进行自动化操作

    回想90年代,我们在DOS下使用各种命令链对操作进行简化和自动化,如DOS 5.0添加的DosKey,利用管道和重定向对多组命令进行链式操作.后来使用了Ubuntu和其它Linux发型版后,bash下 ...

  3. OC-02 如何设计类

    1.确认类名 2.类的属性 3.功能行为 例子:类名:person   属性:height   行为:fight 例子:坦克发射3颗炮弹打中2架飞机   类:坦克.炮弹.飞机 把相同属性的对象抽象成一 ...

  4. C# 调用Excel 出现服务器出现意外情况. (异常来自 HRESULT:0x80010105 (RPC_E_SERVERFAULT)

    C# 调用Excel 出现服务器出现意外情况. (异常来自 HRESULT:0x80010105 (RPC_E_SERVERFAULT) private Microsoft.Office.Intero ...

  5. android微信支付总结+自己搭建服务器

    1.前期注册操作 1-1:微信开发平台:https://open.weixin.qq.com/ 1-2:创建移动应用 签名获取: 1.将自己的apk签名打包,运行到手机上. 2.将微信支付的签名工具, ...

  6. Mac Mail PGP Setup 如何在苹果电脑上设置安全邮件 良好隐私密码法(英语:Pretty Good Privacy,缩写为PGP)

    背景知识 良好隐私密码法(英语:Pretty Good Privacy,缩写为PGP),一套用于讯息加密.验证的应用程序,采用IDEA的散列算法作为加密与验证之用. 关联文献:https://en.w ...

  7. Dagger2 使用初步

    Dagger2 是一个Android依赖注入框架,由谷歌开发,最早的版本Dagger1 由Square公司开发.依赖注入框架主要用于模块间解耦,提高代码的健壮性和可维护性.Dagger 这个库的取名不 ...

  8. 设计一个泛型类Collection

    要求:设计一个泛型类Collection,它存储object对象的集合(在数组中),以及该集合当前的大小.提供public方法isEmtpy,makeEmpty,insert,remove,isPre ...

  9. 。U盘安装windows7操作系统

    1.下载. Windows 7微软原版无修改的系统镜像下载地址:Windows 764位旗舰版ed2k://|file|cn_windows_7_ultimate_with_sp1_x64_dvd_u ...

  10. IOS苹果和百度地图的相关使用

    iOS中使用较多的3款地图,google地图.百度地图.苹果自带地图(高德).其中苹果自带地图在中国使用的是高德的数据.苹果在iOS 6之后放弃了使用谷歌地图,而改用自家的地图.在国内使用的较多的就是 ...