最近在学习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. 大V云集!参加首届阿里巴巴在线技术峰会的八大理由

    由阿里巴巴集团.阿里巴巴技术协会(ATA)和阿里云云栖社区联合举办的首届阿里巴巴在线技术峰会(Alibaba Online Technology Summit)将于7月19日-21日20:00-21: ...

  2. 【转】Web服务器之Nginx详解(理论部分)

    大纲 一.前言 二.Web服务器提供服务的方式 三.多进程.多线程.异步模式的对比 四.Web 服务请求过程 五.Linux I/O 模型 六.Linux I/O 模型具体说明 七.Linux I/O ...

  3. Scrum----学习心得

    Scrum学习心得 什么是敏捷开发? 敏捷开发(Agile Development)是一种以人为核心.迭代.循序渐进的 开发方法.它不是一门技术,它是一种开发方法,也就是一种软件开发的流程,它会指导我 ...

  4. javascprit form表单提交前验证以及ajax返回json

    1.今天要做一个手机验证码验证的功能.需求是前端页面点击发送 短信验证码,后台接收后通过ajax返回到前端,之后前端在提交时候进行验证.思路很简单,不过做的过程还是学到不少的东西. 1.ajax请求后 ...

  5. idea 多项目部署JRebel

    碰到个问题,Jrebel热部署Idea,两个项目一个可以热部署,一个不行.刚开始发现是其中一个项目没有添加JRebel,于是加上 然而发现还是不行,继续google, 在一篇文章里面发现如下的内容: ...

  6. django模板报错:Requested setting TEMPLATE_DEBUG, but settings are not configured. You must either define

    转自:http://blog.csdn.net/xiaowanggedege/article/details/8651236 django模板报错: Requested setting TEMPLAT ...

  7. git go使用socket5代理

    git # set git through socks5 proxy: git config --global http.proxy socks5://127.0.0.1:1080 # Recover ...

  8. C# 转换运算符:implicit(隐式),explicit(显示)

    //A类 class Cls1 { public string name; //构造函数 public Cls1(string name) { this.name = name; } //implic ...

  9. crt文件上传下载

    为了方便修改文件,下载与修改服务器文件,便利很多啊! 主要命令: sz filename #下载 rz 参数 #上传 弹窗选择文件 如果没有安装请装工具: yum install lrzsz man ...

  10. Spark 中的宽依赖和窄依赖

    Spark中RDD的高效与DAG图有着莫大的关系,在DAG调度中需要对计算过程划分stage,而划分依据就是RDD之间的依赖关系.针对不同的转换函数,RDD之间的依赖关系分类窄依赖(narrow de ...