最近在学习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. arcgis server10.1 gp GetResultMapServiceLayer

    根据10.1文档 silverlight 里面提供了新的_geoprocessorTask.GetResultMapServiceLayer方法 研究了一下得知 原来的GetResultImageLa ...

  2. Java基础之Java中的泛型

    1.为什么要使用泛型 这里我们俩看一段代码; List list = new ArrayList(); list.add("CSDN_SEU_Cavin"); list.add(1 ...

  3. MVC中用NPOI导出Excel相关问题

    情形1:可以直接带参数 前端页面: @.ActionLink("导出Excel", "DownLoadExcel", new { 参数名= '参数值' }, n ...

  4. js 数据格式化

    //金额增加千分号formatPrice(123456.78) = 123,456.78 function formatPrice(val) { var parts = val.toString(). ...

  5. 阿里云OSS 上传文件SDK

    Aliyun OSS SDK for C# 上传文件 另外:查找的其他实现C#上传文件功能例子: 1.WPF用流的方式上传/显示/下载图片文件(保存在数据库) (文末有案例下载链接) 2.WPF中利用 ...

  6. UVa 1395 - Slim Span(最小生成树变形)

    链接: https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  7. BZOJ1923:[SDOI2010]外星千足虫(高斯消元)

    Description Input 第一行是两个正整数 N, M. 接下来 M行,按顺序给出 Charles 这M次使用“点足机”的统计结果.每行 包含一个“01”串和一个数字,用一个空格隔开.“01 ...

  8. 2springboot:快速创建springboot项目

    使用IDEA快速创建springboot项目流程: 创建新的项目选择 项目的命名以及包名 需要什么包就导入什么包 进行测试的单元 <dependency> <groupId>o ...

  9. 3spring:生命周期,属性赋值,自动装配

    有不懂的可以参考之前的文章! https://www.cnblogs.com/Mrchengs/p/10109053.html 1.Bean的生命周期     创建---初始化---销毁   容器管理 ...

  10. jar包解压

    jar -xvf project.jar 解压到当前文件夹