最近在学习dom树节点操作时,发现查找结点总是返回null,原因在于将js代码放在了head里,因为页面是从上往下逐行加载,在还未加载相关节点时当然查找不到,返回值为null.

而对于另一句老生常谈的语句:“在不影响HTML页面加载的情况下,js代码越晚加载越好”,博主在查阅了部分资料后,有了如下初步认识:

  1. 浏览器逐行解析代码,放在头部的js代码会拖慢页面加载速度
  2. 部分(如onload)应该在页面加载时生效的js代码,应该放在页面头部
  3. 将不同模块页面合并时,有些js代码无可避免的会出现在body中
  4. 页面元素未加载时,对该元素的操作会失效

另外,https://segmentfault.com/a/1190000004292479这篇文章有关于dom树和js代码的深入解释,但现在所学尚浅,还不能完全理解,待深入学习之后,在做第二次整理。

关于js代码位置的第一次总结的更多相关文章

  1. js 代码位置不同,导致随着点击函数执行次数累加

    每个人书写代码的习惯都不同吃,思想也都不一样,但在工作中为了减少工作量与时间,难免遇到要用别人写的代码.这次在使用同事的代码中,偶然发现的问题,因为js不好,所以一眼也没发现问题所在,查了查网上才知道 ...

  2. HTML 练习js代码位置在head标签

    方式一: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  3. JS代码的位置与事件响应代码块的封装问题

    JS代码的位置       我们可以将JavaScript代码放在html文件中任何位置,但是我们一般放在网页的head或者body部分.   放在<head>部分最常用的方式是在页面中h ...

  4. JS代码放置位置、变量与数据类型、运算符与逻辑表达运算符

    内容简要: 1.JS代码放置位置的问题: 2.变量与数据类型: 3.运算符与逻辑表达式的运算符   我的位置 全局问题:为何在网页推荐位置(一般在<head></head>内部 ...

  5. node源码详解(三)—— js代码在node中的位置,process、require、module、exports的由来

    本作品采用知识共享署名 4.0 国际许可协议进行许可.转载保留声明头部与原文链接https://luzeshu.com/blog/nodesource3 本博客同步在https://cnodejs.o ...

  6. 000 在什么位置写js代码

    一:介绍 1.DOM 2.节点分类 节点及其类型: 1). 元素节点 2). 属性节点: 元素的属性, 可以直接通过属性的方式来操作. 3). 文本节点: 是元素节点的子节点, 其内容为文本. 二:J ...

  7. JavaScript入门:002—JS代码放置的位置

    JavaScript在页面中使用,那么这些JS代码应该放在什么位置呢?以下来看一下. 一般来说有两种方式.写在界面上和使用.js文件.1.1界面上的Head部分能够直接放在head标签内,例如以下代码 ...

  8. js基础之javascript的存在形式和js代码块在页面中的存放位置和 CSS 对比

    1.存在形式 文件 如: <script src='js/jc.js'></script> 前页面 <script type='text/javascript'>a ...

  9. js数组特定位置元素置空,非null和undefined,实现echarts现状图效果;谷歌格式化压缩js代码

    一.想要实现eCharts线状图表的断点效果,如图(后来又查到数据格式为data:['-', 2, 3,'-' , 5, 6, 7]:也可以断点显示) 这种效果,在设置数据的时候应该是这样: data ...

随机推荐

  1. listview cacheColorHint,listSelector属性

    ListView是常用的显示控件,默认背景是和系统窗口一样的透明色,如果给ListView加上背景图片,或者背景颜色时,滚动时listView会黑掉, 原因是,滚动时,列表里面的view重绘时,用的依 ...

  2. JS是单线程的吗?

    Javascript是单线程的深入分析 首先一个引子:为什么JavaScript是单线程的却能让AJAX异步发送和回调请求,还有setTimeout也看起来像是多线程的? 先看例子1: functio ...

  3. 针对XX系统的可用性方面的相关想法(结合书)

    在开始对此系统进行再次分析之前,再回顾下可用性.首先,可用性是与系统故障有关的一个质量属性,是指系统正常运行的时间的比例,一般通过两次故障之间的时间长度或在系统崩溃情况下能恢复正常运行的速度来衡量,同 ...

  4. SQL Server ->> 高可用与灾难恢复(HADR)技术 -- AlwaysOn(实战篇)之建立活动目录域、DNS服务器和Windows故障转移群集(准备工作)

    因为篇幅原因,AlwaysOn可用性组被拆成了两部分:理论部分和实战部分.而实战部分又被拆成了准备工作和AlwaysOn可用性组搭建. 三篇文章各自的链接: SQL Server ->> ...

  5. Angular4 微信的坑

    1.不要重置对象的引用!(重置只应该在组件或服务的初始化时) why:会使页面产生闪烁 2.不要给图片绑定一个空的值或空的图片引用(如果值从服务器异步过来,那应该在初始化时给它一个默认值) why:会 ...

  6. linux 用户切换 标签: linux 2016-07-30 13:57 144人阅读 评论(0) 收藏

    一.指令修改 1.普通用户切换到root用户: su root 需要输入密码 2.root用户切换到普通用户: su 用户名 不需要输入密码 二.直接注销,再用新用户登录 注:1.两种方式存在差别,用 ...

  7. 设置dedecms标签 [field:global.autoindex/] 初始值{class递增}

    在{dede:arclist/}这个标签中有个[field:global.autoindex/],是从0开始自增,如果我们想自定义一个数值,比如自定义从2开始.那么就可以写成下面代码: [field: ...

  8. 原生js实现类名(class)的增、删

    先判断是否有这个类名: function hasClass( elements,cName ){   return !!elements.className.match( new RegExp( &q ...

  9. c# HttpWebRequest与HttpWebResponse

    [转]c# HttpWebRequest与HttpWebResponse 绝技 如果你想做一些,抓取,或者是自动获取的功能,那么就跟我一起来学习一下Http请求吧. 本文章会对Http请求时的Get和 ...

  10. 20140322 卡迪夫城VS利物浦,拔出重剑,有惊无险

    一.菱形442 起初在客战南安普顿的时候,罗杰斯启用了菱形442阵式,阵容和今天客战卡迪夫城几乎一样,只是格伦·约翰逊打左后卫,弗拉纳甘任职右后卫,目的是为了在客场抵御卢克·肖+拉拉纳.当时库蒂尼奥的 ...