javaScript引入方式

前言：

毕业到现在从事前端开发已经半年左右，做过移动端和PC端大小不同项目，发现自己所学习的技能都只是为了更好的完成项目，从来没有花时间好好整理下所掌握的知识。农历三月百花盛开，群芳争艳；新历三月是个跳槽季，各路神仙汇集一堂，大展神通。原本只打算安安稳稳、踏踏实实工作的我，却受朋友的蛊惑，邀请我去他们公司试试，听朋友介绍他们公司福利好，妹子靓，氛围棒，环境优……我那颗老僧入定，坚若磐石的心动摇了。我犹豫，渴望，心情像久未人事的少妇在红杏出墙时的忐忑。我兴奋地开始整理半年来所做的大小项目，看着那些存在公司硬盘的大大小小项目，心里油然升起莫名的自信，觉得经验在手，天下我有。当我整理完项目后，我打开浏览器准备看下笔试题，那一道道笔试题像一把把锋利的尖刀直插我心脏，虽然大多数能看个所以然，但是要我自己一个个写出来好比登上那珠穆朗玛峰，心情一落千丈，就像喝醉酒的老男人看着躺在床上脂如白玉窈窕可人的“小绵羊”，心有余而力不足…….为了让自己变得更加强大，我抬起头，仰望苍穹，嘴角露出属于男人的自信……为了那一枪打的更持久，我抖了抖衣角，低下头，从基础开始做起。

言归正传，下次再扯淡！

JavaScript引入方式

嵌入式

<script type="text/javascript">function sayHi(){alert("Hi!");}
</script>

注意点：文档加载和解析方式从上到下，意味着嵌入式的javaScript也将从上至下依次解析，所以需要注意嵌入式的javaScript存放的位置，因为页面上javaScript内部所有代码求值完毕以前，页面中的其余内容都不会被浏览器加载或显示。
测试：

<head><meta charset="UTF-8"><title>我是一个死循环</title><script>var i=0;while(true){i++;}</script>
</head>
<body>
<p>因为那该死的script,让我露个面都不行</p>
</body>

测试结果显示，JavaScript在一直计算，页面中其余内容无法被加载或显示。
外部引用

head头部中引用：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>我是一个测试用例</title><script type="text/javascript" src="example1.js"></script><script type="text/javascript" src="example2.js"></script>
</head>
<body><!--这里放内容-->
</body>
</html>

body内容之后引用：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>我是一个测试用例</title>
</head>
<body><!--这里放内容--><script type="text/javascript" src="example1.js"></script><script type="text/javascript" src="example2.js"></script>
</body>
</html>

注意点：head中引用JavaScript外部文件，意味着必须等到JavaScript代码被全部下载、解析、执行完成后才开始呈现页面内容，这种引入方式会导致页面呈现的延迟，所有慎用。body内容之后引用，则先呈现页面内容，再下载JavaScript代码，这种加载方式会出现页面可能在一段时间内无法进行交互，因为JavaScript代码没有被解析完成。当然以用户体验为先，我们选择第二种引入方式。

JavaScript加载顺序：

浏览器会根据`<script>`元素在页面中的先后顺序对他们依次解析，前提是不存在defer和async属性。意思是说在第一个`<script>` 包含的代码解析完成后，第二个`<script>` 才会被解析，以此类推。

延迟脚本defer属性

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>我是一个测试用例</title><script type="text/javascript" defer="defer" src="example1.js"></script><script type="text/javascript" defer="defer" src="example2.js"></script>
</head>
<body><!--这里放内容-->
</body>
</html>

defer:可选。表示脚本可以延迟到文档完全被解析之后再执行。只对外部脚本文件有效。
从属性的解释就可以知道它的作用，不过需要注意的是，延迟脚本不一定会按照顺序执行，所以最好只包含一个延迟脚本。和defer类似的还有一个属性：async，这个属性我个人不太推荐去了解它，因为几乎不怎么用到，如果有兴趣的哥们自己去查看相关资料。

嵌入式和外部引用选择

HTML中嵌入JavaScript代码虽然没问题，但一般认为最好的做法还是尽可能的使用外部文件来包含JavaScript代码。
优势：
可维护性：遍及不同HTML页面的JavaScript会造成维护问题，
可缓存：浏览器能够根据具体的设置缓存链接的所有外部JavaScript文件，也就是，如果两个页面都使用同一个文件，那么文件只需要加载一次。

<noscript> 元素

说完JavaScript引入方式后提及下 <noscript> 元素，早期浏览器面临一个特殊问题，当浏览器不支持JavaScript时如何让页面平稳退化，这个问题的最终解决方案就是创造一个 <noscript> 元素。

使用场景：
1：浏览器不支持脚本
2：浏览器支持脚本，但脚本被禁用。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>我是一个测试用例</title><script type="text/javascript" defer="defer" src="example1.js"></script><script type="text/javascript" defer="defer" src="example2.js"></script>
</head>
<body><noscript><p>本页面需要浏览器支持（启用）JavaScript</p></noscript>
</body>
</html>

小弟开始整理相关知识，如果有不同哪里理解不对的，请大神们多多指教。

javaScript引入方式相关推荐

JavaScript——引入方式
JavaScript引入方式 1.编写一个简单网页 2.将JavaScript嵌入到HTML中 3.JavaScript引入方式 1.嵌入式 2.外链式 3.行内式 1.编写一个简单网页 <!D ...
JavaScript简介及其引入方式
#博学谷IT学习技术支持# 目录 #博学谷IT学习技术支持# 1.JavaScript简介 2.JavaScript 引入方式 1内部脚本:将 JS代码定义在HTML页面中 2. 外部脚本:将 JS代 ...
web前端（13）—— 了解JavaScript，JavaScript的引入方式
从本篇博文开始,将进入web前端方便最关键最重要的部分--javascript,学到后面你就知道它真的太重要了什么是JavaScript JavaScript一种直译式的脚本语言,是一种动态类型.弱 ...
JavaScript的引入方式
javaScript 的几种引入方式: 通常大家最为熟悉和常见的是以下两种方法: 在页面中直接写入<script type="text/javascript">js代码 ...
Javascript - 1 引入方式，变量常量，数据类型，运算符，流程控制，数组，函数，对象，DOM
Javascipt:是一门弱类型的脚本语言,需要在网页上执行. html负责框架结构,css负责样式修饰,js负责行为交互,动态效果. 前端三大件:html,css,js. javascript 和 ...
【前端系列教程之JavaScript】01_JavaScript概述和引入方式
JavaScript概述 JavaScript可以做什么页面的各种动画效果页面的点击/移入响应对客户端数据进行验证各种页面小游戏用途总结嵌入动态文本于HTML页面. 对浏览器事件做出响应( ...
HTML引入CSS和JavaScript的方式
高速通道 HTML结合CSS 引入CSS之内联式引入CSS之嵌入式引入CSS之外部式三种方式的比较 HTML结合JavaScript 引入JavaScript之嵌入式引入JavaScript之 ...
javascript的三种引入方式
javascript有三种引入方式: 1.行内引入: <开始标签 on+事件类型="js代码"></结束标签> 行内引入方式必须结合事件来使用,但是内部js ...
JavaScript——JS的引入方式
文章目录 JavaScript--我的第一个JavaScript程序以及JS的引入方式初识JavaScript 我的第一个JS程序 JS的引入方式外部引入方式嵌入式内部引用方式行内引用 Ja ...
JS的三种引入方式[javaScript入门]
目录 1.行内引入方式 2.内嵌引入方式(内部引入) 3.外部引入方式 1.行内引入方式写在行内,每个标签里面单独设置 (1)写在标签的事件属性当中(以on开头的属性),如onclick[on+事件 ...

javaScript引入方式

javaScript引入方式相关推荐

最新文章

热门文章