一. <script>标记

　　第一种方法是把 <sript></script>直接放到head和script两个标记之间（title下面，</head>上面）

    <head>...

    <title>demo</title>

    <script type=”text/java script”>

    /*type属性常被忽略掉。脚本默认是js，所以<script type=”text/java script”>可直接简写做<script>*/

    ...

    </scipt>

    </head>

　　内嵌js时，可能会涉及一些与html冲突的判断。比如<>之类的操作符。可以通过html实体来替代。如&gt;为>，&lt;为<。

　二．引用外链

　　写好js文件，然后引用，在js文件中，不需要加入<script>标记。

　　

<script type=”text/java script” src=”xxx.js”></script>

　　//内部的js代码将被忽略。

　　推荐使用第二种方法。具有方便维护，可缓存，标准化等优点。

　三. 那么问题来了

　　script标记的加载方式是由上到下进行的。在解析器<script>元素对所有js代码求值结束之前，页面中其余的内容都不会被显示。如何改善性能？

　　1.defer属性延迟加载

　　一个方法是利用script元素的defer属性。表面脚本在不影响页面构造时才会执行（在html内容加载完之后才执行）。如在<head>元素内加入：

<script defer=”defer” arc=”xxx*.js”></script>

　　两个defer存在时，理论上是按顺序执行。

　　2.异步加载

　　script的另一个属性async与defer相似。要求在不影响页面构造时，立即下载js文件。　

<script defer=”defer” async arc=”xxx*.js”></script>

　　但是当存在两个async时，即便理论上也不能保证二者是顺序加载。

　　3.最好的方式

　　把<script>放到html页面内容最后（</body>之前），再外链引用之——这样可以更好快地加载文件。

　　4.又一个问题

　　当浏览器不支持脚本；或者浏览器js脚本被禁用后，如何让页面平稳退化？

　　在body元素内最后部分加上noscript代码（这段代码在js正常时不会显示）：

<noscript>

<p>本页面需要浏览器支持（启用）javascript脚本。</p>

</nosript>

　　【补充】

　　历史上，js可以被写在html注释中。可以认为是js的“行间形式”。<!--js代码//-->，现在已废弃。

第2章 两种调用JS的方法——在HTML中使用JavaScript的更多相关文章

  1. iOS - UITableView中有两种重用Cell的方法

    UITableView中有两种重用Cell的方法: - (id)dequeueReusableCellWithIdentifier:(NSString *)identifier; - (id)dequ ...

  2. SSH简介及两种远程登录的方法

    出处 https://blog.csdn.net/li528405176/article/details/82810342 目录 SSH的安全机制 SSH的安装 启动服务器的SSH服务 SSH两种级别 ...

  3. js调用php和php调用js的方法举例

    js调用php和php调用js的方法举例1 JS方式调用PHP文件并取得php中的值 举一个简单的例子来说明: 如在页面a.html中用下面这句调用: <script type="te ...

  4. C#两种创建快捷方式的方法

    C#两种创建快捷方式的方法http://www.cnblogs.com/linmilove/archive/2009/06/10/1500989.html

  5. HTTP/HTTPS GET&POST两种方式的实现方法

    关于GET及POST方式的区别请参照前面文章:http://www.cnblogs.com/hunterCecil/p/5698604.html http://www.cnblogs.com/hunt ...

  6. 两种ps切图方法（图层/切片）

    两种Ps切图方法 一．      基础操作: a)    Ctrl++ 放大图片,ctrl - -缩小图片 b)    按住空格键space+,点击鼠标左键,拖动图片. c)    修改单位,点击编辑 ...

  7. Eclipse中SVN的安装步骤（两种）和使用方法

    Eclipse中SVN的安装步骤(两种)和使用方法 一.给Eclipse安装SVN,最常见的有两种方式:手动方式和使用安装向导方式.具体步骤如下: 方式一:手动安装 1.下载最新的Eclipse,我的 ...

  8. TextView两种显示link的方法

    TextView两种显示link的方法 一.简介 也是TextView显示文本控件两种方法 也是显示丰富的文本 二.方法 TextView两种显示link的方法  1)通过TextView里面的类ht ...

  9. Python_两种导入模块的方法异同

    Python中有两种导入模块的方法 1:import module 2:from module import * 使用from module import *方法可以导入独立的项,也可以用from m ...

随机推荐

  1. iOS开发小技巧--获取自定义的BarButtonItem中的自定义View的方法(customView)

    如果BarButtonItem是通过[[UIBarButtonItem alloc] initWithCustomView:(nonnull UIView *)]方法设置的.某些情况下需要修改BarB ...

  2. windows2003开启vpn服务

    远程连接登陆到Windows服务器,在配置VPN之前,需要设置两个地方: 1.请确认windows自带的防火墙处于关闭状态,可以在我的电脑点右键>>管理>>服务和应用程序> ...

  3. Tomcat安装

    第一步,下载: 直接上下载地址:http://tomcat.apache.org/download-70.cgi 直接下载如下选中即可: 第二步,安装: 然后解压(这里我是放在下载里),再进入bin目 ...

  4. 快速查找无序数组中的第K大数？

    1.题目分析: 查找无序数组中的第K大数,直观感觉便是先排好序再找到下标为K-1的元素,时间复杂度O(NlgN).在此,我们想探索是否存在时间复杂度 < O(NlgN),而且近似等于O(N)的高 ...

  5. [日常训练]常州集训day7

    T1 Description 给定一个序列,初始为空.依次将$1-n$插入序列,其中$i$插到当前第$a_i$个数的右边($a_i=0$表示插到序列最左边).求最终序列. Input 第一行一个整数$ ...

  6. 【BZOJ-2177】曼哈顿最小生成树 Kruskal + 树状数组

    2177: 曼哈顿最小生成树 Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 190  Solved: 77[Submit][Status][Discu ...

  7. ubuntu下gedit中文乱码

    gsettings set org.gnome.gedit.preferences.encodings auto-detected "['GB18030', 'GB2312', 'GBK', ...

  8. DedeCMS Xss+Csrf Getshell \dede\file_manage_control.php

    目录 . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 对这个漏洞的利用方式进行简单的概括 . 这个漏洞的利用前提是需要登录到后台进行操作 ...

  9. VMP虚拟机加壳的原理学习

    好久没有到博客写文章了,9月份开学有点忙,参加了一个上海的一个CHINA SIG信息比赛,前几天又无锡南京来回跑了几趟,签了阿里巴巴的安全工程师,准备11月以后过去实习,这之前就好好待在学校学习了. ...

  10. CentOS彻底卸载wine

    说明:折腾啊折腾,装了卸,卸了装,哈哈. 1. 卸载wine及相关组件 yum remove wine* 2. 删除相关文件 ~/.wine ~/.local/share/applications / ...