美文网首页web
网页中引入js的几种方法及比较

网页中引入js的几种方法及比较

作者: DecadeHeart | 来源:发表于2017-03-06 23:58 被阅读820次

首先,来看一下 Html5 页面引用 JavaScript 代码的几种方式:

1、Html5 页面中使用 <script> 标签容纳 JavaScript 代码;

<script>
init();
</script>

这里不仅可以调用任意位置的函数,而且可以声明变量,构建函数和对象等等。
2、Html5 页面中使用 <script src="xxx.js"></script> 引入同路径下的 xxx.js 文件中的 JavaScript 代码;

<script src=
"js/main.js"
</script>

注意这里的 main.js 是与当前 Html 页面文件同目录下的 js 子目录中的文件,使用时,确保相对路径正确,当然了,也可以使用绝对路径。

3、Html5 界面元素事件直接赋与一段 JavaScript 代码;

<input type=
"button"
name=
"Button"
value=
"Button"
onclick=
"javascript:alert('测试')"

4.通过其他网站CDN直接进行添加

<script src="http://cdn.uedsc.com/jquery/2.1.3/jquery.js"></script>

此处可参考 javascript设置onclick

以下资源可供参考,进一步理解 JavaScritp:JavaScript的5种调用函数的方法
解读ECMAScript[1]——执行环境、作用域及闭包
解读ECMAScript[2]——函数、构造器及原型

百度百科 javascript
要想真正掌握 JavaScript 语言,那么闭包是必须要深刻理解和领悟的核心。

顺便,记录一下引用 [CSS] 的几种方式:
1、外部样式表
css 样式存于一个 .css 扩展名的文件中,引用方式:

<link href=
"../Styles/Site.css"
rel=
"stylesheet"
type=
"text/css"

2、内部样式表

<title>page标题</title>
<style type=
"text/css"
input{background-color:Green }
</style>

3、内联样式

<input type=
"text"
style=
"background-color:Blue;"
value=
"input1"

更详细的 CSS 运用,可参考 CSS 选择器及各样式引用方式介绍 。
最后,切入主题,页面加载初始调用 JavaScript 代码的三种方式:
1、body 的 onload 事件触发回调 JavaScript 函数;

该事件在 document 文档中的所有内容都加载完成后才会被调用,这种方式显得有点笨拙,但比较把握,确保一切安好,才去调用。
如想避勉过多加载,那么页面设计上可以相对讲究些方法,人为达到滞后加载的效果,就可以给这个事件进行减压,达到尽快执行的目标。
2、document 的 onready 事件触发回调 JavaScript 函数;

document.onready = init();

该事件在 document 文档中的 dom 模型加载完成就会产生回调,而不考虑引用的图片、脚本等资源。
3、在引入 Html5 页面的 JavaScript 代码中,直接调用 JavaScript 函数或执行 JavaScript 命令;

<script>
init();
</script>

或在外部 js 脚本中,直接调用 init();
init() 可以是 Html5 页面中声明的函数,也可以是外部引用的脚本中的函数。
不过发现一个有趣的问题,当在 init() 函数定义中,通过

document.getElementById(
'container'
);

获取 container 元素的引用时,如果该 Html5 元素在该段页面内 JavaScript 代码之后时,会获取不到该元素。
这说明一个问题,第三种启动执行方式,是边加载边执行,所以对顺序有要求;

4.网站使用CDN的好处和弊端
1、多域名加载资源
一般情况下,浏览器都会对单个域名下的并发请求数(文件加载)进行限制,通常最多有4个,那么第5个加载项将会被阻塞,直到前面的某一个文件加载完毕。
因为CDN文件是存放在不同区域(不同IP)的,所以对浏览器来说是可以同时加载页面所需的所有文件(远不止4个),从而提高页面加载速度。

2、文件可能已经被加载过并保存有缓存
一些通用的js库或者是css样式库,如jQuery,在网络中的使用是非常普遍的。当一个用户在浏览你的某一个网页的时候,很有可能他已经通过你网站使用的CDN访问过了其他的某一个网站,恰巧这个网站同样也使用了jQuery,那么此时用户浏览器已经缓存有该jQuery文件(同IP的同名文件如果有缓存,浏览器会直接使用缓存文件,不会再进行加载),所以就不会再加载一次了,从而间接的提高了网站的访问速度。

3、高效率
你的网站做的再NB也不会NB过百度NB过Google吧?一个好的CDNs会提供更高的效率,更低的网络延时和更小的丢包率。

4、分布式的数据中心
假如你的站点布置在北京,当一个香港或者更远的用户访问你的站点的时候,他的数据请求势必会很慢很慢。而CDNs则会让用户从离他最近的节点去加载所需的文件,所以加载速度提升就是理所当然的了。

5、内置版本控制
通常,对于CSS文件和JavaScript库来说都是有版本号的,你可以通过特定版本号从CDNs加载所需的文件,也可以使用latest加载最新版本(不推荐)。

6、使用情况分析
一般情况下CDNs提供商(如百度云加速)都会提供数据统计功能,可以了解更多关于用户访问自己网站的情况,可以根据统计数据对自己的站点适时适当的做出些许调整。

7、有效防止网站被攻击
一般情况下CDNs提供商也是会提供网站安全服务的。

相关文章

  • 网页中引入js的几种方法及比较

    首先,来看一下 Html5 页面引用 JavaScript 代码的几种方式: 1、Html5 页面中使用 标签...

  • JS语法

    一、CSS和JS在网页中的放置顺序是怎样的?js引入样式:1、内部js样式 alert(1); 2、引入外部js样...

  • js文件位置+白屏+async+浏览器渲染机制

    CSS和JS在网页中的放置顺序是怎样的? 为什么引入js文件? 因为网页 = Html+CSS+JavaScrip...

  • js-this

    javascript中的this js中的this,比较难以理解,下面进行简单记录。主要分为以下几种情况 方法调用...

  • js中绑定this的几种方法及简单比较

    JavaScript(以下简称js)是一门动态语言,与传统的c,c++最大的区别就是js是在运行时动态检测值的类型...

  • 微信公众号支付开发-JSSDK

    最近微信网页开发要用到公众平台支付的功能,过程中坑不少。 引入js 在需要调用JS接口的页面引入如下JS文件(支持...

  • Js 延迟加载的办法

    使用setTimeout延迟方法的加载时间 (延迟加载js代码,给网页加载留出更多时间) 让js最后加载例如引入外...

  • 11、vue 引入自定义全局css和js

    vue 引入自定义css 和js 一. 引入自定义js 方法一首先在main.js中引入: 自定义js 中写: 页...

  • Web调用APP方法

    封装useApp.js useApp.js 在js中引入useApp.js文件 调用方法

  • js简单认知

    1.CSS和JS在网页中的放置顺序是怎样的? css link引入放置在头部 标签里 js放置在网页底部 2.解释...

网友评论

    本文标题:网页中引入js的几种方法及比较

    本文链接:https://www.haomeiwen.com/subject/zejpgttx.html