script 放置最佳位置以及 html 执行顺序

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。

看到知乎上有很多讨论关于javascript位置的文章。所以特意留意了这方面的问题。

  首先要了解到的是:

    html文件是自上而下的执行方式,但引入的css和javascript的顺序有所不同,css引入执行加载时,程序仍然往下执行,而执行到<script>脚本是则中断线程,待该script脚本执行结束之后程序才继续往下执行。

    所以,大部分网上讨论是将script脚本放在<body>之后,那样dom的生成就不会因为长时间执行script脚本而延迟阻塞,加快了页面的加载速度。

    但又不能将所有的script放在body之后,因为有一些页面的效果的实现,是需要预先动态的加载一些js脚本。所以这些脚本应该放在<body>之前。

    其次,不能将需要访问dom元素的js放在body之前,因为此时还没有开始生成dom,所以在body之前的访问dom元素的js会出错,或者无效

    直接上代码

</head><script type="text/javascript">document.getElementById("text").innerHTML="hello world";</script><body><h1 id="text"></h1></body>
</html>

 

    此时结果空白一片。

    将script脚本放在body之后

<body><h1 id="text"></h1>
</body>
<script type="text/javascript">document.getElementById("text").innerHTML="hello world";
</script>
    有了结果

    所以,我认为script放置位置的原则“页面效果实现类的js应该放在body之前,动作,交互,事件驱动,需要访问dom属性的js都可以放在body之后”。

 

转自:http://www.cnblogs.com/iamwangxupeng/p/4950255.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/448515.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Arduino】使用C#实现Arduino与电脑进行串行通讯

在给Arduino编程的时候&#xff0c;因为没有调试工具&#xff0c;经常要通过使用串口通讯的方式调用Serial.print和Serial.println输出Arduino运行过程中的相关信息&#xff0c;然后在电脑上用Arduino IDE的Serial Monitor来查看print出来的信息。Serial Monitor不仅可以接受Ar…

node、npm、vue安装 -- VUE 项目 demo 实例

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1. 安装node&#xff1a; sudo yum install epel-release sudo yum install nodejs node --version // 安装好后查看版本2. 安装 npm …

用C语言实现简单的停车场管理

这个程序是利用栈和循环队列实现的&#xff0c;自己得先处理好逻辑关系就好了。由于题目没有要求&#xff0c;这个程序就没加重复判断&#xff0c;比如一辆车已经停在车位上或者便道上&#xff0c;再来一辆就判断不了了。关于栈&#xff0c;就是先进后出的思想&#xff0c;队列…

Windows To Ghost系统封装之必备软件集 - 好压

好压压缩软件&#xff08;HaoZip&#xff09;是强大的压缩文件管理器&#xff0c;是完全免费的新一代压缩软件&#xff0c;相比其它压缩软件系统资源占用更少&#xff0c;有更好的兼容性&#xff0c;压缩率比较高。 它提供了对ZIP、7Z和TAR文件的完整支持&#xff0c;能解压RAR…

XSLT学习笔记

1. 样式声明&#xff1a;<xsl:stylesheet>或<xsl:transform> 2. XSLT常用元素&#xff1a; 2.1 <xsl:template>&#xff1a;创建模板 Match属性的作用是使模板和XML元素相关联 e.g.:<xsl:template match"\">......</xsl:template&g…

超详细设置 Idea 类注释模板和方法注释模板

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 网上找了一下&#xff0c;没有很详细且正确介绍Idea配置注释模板的&#xff0c;于是结合多篇文章自己琢磨整理出如下。 设置类注释模板…

水调歌头·中秋

转载于:https://www.cnblogs.com/divineka/archive/2004/09/04/39560.html

代码面试最常用的10大算法

摘要&#xff1a;面试也是一门学问&#xff0c;在面试之前做好充分的准备则是成功的必须条件&#xff0c;而程序员在代码面试时&#xff0c;常会遇到编写算法的相关问题&#xff0c;比如排序、二叉树遍历等等。 在程序员的职业生涯中&#xff0c;算法亦算是一门基础课程&#…

IDEA 2018 集成 MyBatis Generator 插件 详解、代码生成

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1、修改maven的pom文件 只需要将如下依赖添加到pom.xml文件中即可。&#xff08;注意此处是以plugin的方式&#xff0c;放在<plugins…

MongoDB监控及报警

转载请注明出处&#xff1a;https://www.cnblogs.com/shining5/p/11142357.html MongoDB监控及报警 Prometheus是由SoundCloud开发的开源监控报警系统和时序列数据库&#xff0c;其使用go语言开发。基本原理是通过HTTP协议周期性抓取被监控组件的状态&#xff0c;任意组件只要提…

浅谈三种特殊进程:孤儿进程,僵尸进程和守护进程

昨天学了进程控制&#xff0c;就这三种特殊的进程研究了一下&#xff0c;其中也借鉴了一些前人总计的经验。 1、孤儿进程 如果父进程先退出,子进程还没退出那么子进程将被 托孤给init进程,这里子进程的父进程就是init进程(1号进程).其实还是很好理解的。 // 父进程先子进程退…

设计师为什么要学编程,开发者为什么要学设计?

摘要&#xff1a;设计师和开发者目前正处于互联网的两端&#xff0c;看着彼此做不同的工作。如果他们能互相学习对方的技术&#xff0c;那么会协作得更好。 很多开发者认为&#xff0c;设计师应该学会如何编写代码&#xff0c;这一点是真的&#xff1a;通过学习&#xff0c;设计…

git 查看远程仓库地址

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 就一个命令&#xff1a; git remote -v 如下&#xff1a;

tensorflow之tf.train.exponential_decay()指数衰减法

exponential_decay(learning_rate, global_steps, decay_steps, decay_rate, staircaseFalse, nameNone) 使用方式&#xff1a; tf.tf.train.exponential_decay() 例子&#xff1a; tf.train.exponential_decay(self.config.e_lr, self.e_global_steps&#xff0c;self.config…

wait( )和 waitpid( )

进程一旦调用了wait&#xff0c;就立即阻塞自己&#xff0c;由wait自动分析是否当前进程的某个子进程已经退出&#xff0c;如果让它找到了这样一个已经变成僵尸的子进程&#xff0c;wait就会收集这个子进程的信息&#xff0c;并把它彻底销毁后返回&#xff1b;如果没有找到这样…

在 vscode 中使用 Git :拉取、提交、克隆

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 PS&#xff1a;转载此文后&#xff0c;网友在评论中提到还有其它方法&#xff0c;不过目前个人尚在研究中&#xff0c;有兴趣的朋友们也可…

vscode 配置 git (配置、暂存、推送、拉取、免密)

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 vscode 中对 git 进行了集成&#xff0c;很多操作只需点击就能操作&#xff0c;无需写一些 git 指令。 不过这就需要你对 vscode 进行配…

处理bugs心法

1. 前提 第一层&#xff1a;遇到异常首先必须告诉自己&#xff0c;冷静&#xff0c;不要慌。&#xff08;一看到Bug就心慌&#xff0c;那么武功就施展不了了&#xff09; 2. 入门级 第二层&#xff1a;遇到Bug&#xff0c;第一潜意识看输出异常的信息的&#xff08;控制台输出&…

解决 VS Code 保存时候自动格式化

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 不知道从哪个版本起&#xff0c;VS code 保存会自动格式化。 以前都是altshiftF格式化的&#xff0c;现在一保存就格式化&#xff0c;而…

12种食物最养男人 10种食物最养女人 太值得收藏了

据统计&#xff0c;男性10大死因中有4项与饮食有关&#xff0c;包括癌症、脑血管疾病、心脏病和糖尿病。以下12种食品对男性健康有益&#xff0c;建议男性多多摄取。 男人需要的十种养生食物 No.1西红柿 西红柿的酸味能促进胃液分泌&#xff0c;帮助消化蛋白质等&#xff…