把JS和CSS脚本写在html里和写在独立文件里有什么区别?

1. 都写在html里是性能最优的方案。

2. 都写在html里是可维护性最差的方案。

3. 分开写在js、css、html是可维护性最有的方案。

4. 分开写在js、css、html是性能最差的方案。

5. 折中一下,不可复用的js和css直接写在html中。

6. 再优化下,把js都打包在一个文件里,css也打包在一个文件,减少http请求。

7. 以上都过渡完了,那个时候会有一群人叫你大神。

js的三种使用方式(行内js、内部js、外部js)

1、行内js:js不单独写出

1. <!DOCTYPE html>  
2. <html lang="en">  
3. <head>  
4.     <meta charset="UTF-8">  
5.     <title>js使用方式1:行内js</title>  
6. </head>  
7. <body>  
8. <input type="button" value="点击有惊喜" onclick="javascript:alert('哈哈哈哈')">  
9. <!--onclick:点击触发一个事件,alert:弹出一个对话框-->  
10. </body>  
11. </html>

2、内部js:script里的程序整个页面都可以用

1. <!DOCTYPE html>  
2. <html lang="en">  
3. <head>  
4.     <meta charset="UTF-8">  
5.     <title>js使用方式2:内部js</title>  
6.     <script type="text/javascript">  
7.         //声明一个函数(整个文档都可以使用)  
8.         function surprise() {  
9.             alert('恭喜你中了一百万') /*弹出框*/  
10.         }  
11.     </script>  
12. </head>  
13. <body>  
14. <input type="button" value="点击有惊喜" onclick="surprise()"><!--调用函数-->  
15. <input type="button" value="点击" onclick="surprise()">  
16. </body>  
17. </html> 

3、外部js:很多html页面都可以调用设定的js页面

1. <!DOCTYPE html>  
2. <html lang="en">  
3. <head>  
4.     <meta charset="UTF-8">  
5.     <title>js使用方式3:外部js</title>  
6.     <!--很多html页面都可以调用js4.js页面-->  
7.     <script src="../../js/js4.js" type="text/javascript" charset="utf-8">  
8.     </script>  
9. </head>  
10. <body>  
11. <input type="button" value="点击" onclick="test()">  
12. </body>  
13. </html> 

关于HTML文件、JS文件、CSS文件的更多相关文章

  1. js或css文件后面的参数是什么意思?

    经常看到不少导航网站测样式或js文件后面加了一些参数,主要是一你为一些并不经常更新的页面重新加载新修改的文件. 经常遇到页面里加载的js与css文件带有参数,比如: <script type=& ...

  2. MVC学习随笔----如何在页面中添加JS和CSS文件

    http://blog.csdn.net/xxjoy_777/article/details/39050011 1.如何在页面中添加Js和CSS文件. 我们只需要在模板页中添加JS和CSS文件,然后子 ...

  3. grunt 单独压缩多个js和css文件【转】

    原文地址:http://xiaomiya.iteye.com/blog/2177877 使用grunt来压缩前端js,css文件 因为最近做的客户端本地项目有用到十几个js,js提交之前都需要压缩.用 ...

  4. gulp-rev同时将js和css文件写在一个rev-manifest.json文件里面的方式探讨

    参考: https://segmentfault.com/q/1010000002876613 https://github.com/sindresorhus/gulp-rev 测试发现,在官网上最主 ...

  5. 使用Maven构建Java Web项目时,关于jsp中引入js、css文件路径问题。

    今天有点闲,自己动手搭建一个Java Web项目,遇到jsp中引入js.css文件时路径不正确的问题,于是在网上查阅了很多资料,最终都无法解决问题,于是,上stackoverflow找到了解决方法,这 ...

  6. [转][前端优化]使用Combres合并对js、css文件的请求

    本文转自:http://www.cnblogs.com/parry/archive/2011/01/28/Reduce_Http_Request_Using_Combres_For_Js_Css.ht ...

  7. 常用js,css文件统一加载方法,并在加载之后调用回调函数

    原创内容,转载请注明出处! 为了方便资源管理和提升工作效率,常用的js和css文件的加载应该放在一个统一文件里面完成,也方便后续的资源维护.所以我用js写了以下方法,存放在“sourceControl ...

  8. 为js和css文件自动添加版本号

    web应用必然要面对缓存问题,无论前台后台都会涉足缓存.特别是对于前端而言,缓存利用的是否得当直接关系到应用的性能. 通常情况下,我们会倾向于使用缓存,因为缓存一方面可以减少网络开销,一方面可以减轻服 ...

  9. jquery,js引入css文件,js引入头尾

    jquery,js引入css文件,js引入头尾 今天在项目中,需要把20多个页面加上头和尾部,头和尾是我写的,所以小师傅把这个工作交给我了. 我开始往里面加,先引入common.css,在body开始 ...

  10. 【半原创】将js和css文件装入localStorage加速程序执行

    首先感谢某某作者写的文章:http://www.jb51.net/article/12793.htm 直接上代码,注意文件名为env.js 原理如下: 一次批量加要加载的文件存入数组,采用Ajax方式 ...

随机推荐

  1. Android Gradle与Gradle插件的对应关系

    查看链接 https://blog.csdn.net/dazhong2012/article/details/80585834

  2. Spotlight安装

    刚才技术群的一个朋友在安装Spotligh出现了一些问题,所以本人临时写个简单的教程 1.下载安装包(安装包地址:https://pan.baidu.com/s/1c2tmqyc),解压,然后傻瓜式安 ...

  3. 在uwp仿IOS的页面切换效果

    有时候我们需要编写一些迎合IOS用户使用习惯的uwp应用,我在这里整理一下仿IOS页面切换效果的代码. 先分析IOS的页面切换.用户使用左右滑动方式进行前进和后退,播放类似于FlipView的切换动画 ...

  4. MySQL中外键删除、更新

      MySQL支持外键的存储引擎只有InnoDB..在创建外键的时候,可以指定在删除.更新父表时,对子表进行的相应操作,包括RESTRICT.NO ACTION.SET NULL和CASCADE. 其 ...

  5. Web前端技术体系大全搜索

    一.前端技术框架 1.Vue.js 官网:https://cn.vuejs.org/ Vue CLI:https://cli.vuejs.org/ 菜鸟教程:http://www.runoob.com ...

  6. 面试奇遇 -- 原生JS

    最近几日去参加一些面试,多多少少有一些收获. 现将遇到的一些面试题,做一下分析和总结. 1.使用原生JS,不能使用递归,查找dom中所有以“<com-”开头的自定义标签tagName. < ...

  7. 2012 noip提高 Vigenère 密码

    P1079 Vigenère 密码 题目描述 16 世纪法国外交家 Blaise de VigenèreBlaisedeVigene`re 设计了一种多表密码加密算法―― VigenèreVigene ...

  8. ZooKeeper运行原理和基本编程接口

    什么是ZooKeeper  ZooKeeper作为一个分布式的服务框架(与Google Chubby类似),主要用于解决分布式集群中应用系统的一致性问题,它能提供基于类似于文件系统的目录节点树方式的数 ...

  9. linux php安装ODBC扩展

    进入php源码安装目录的ext/pdo_odbc $ sudo /data/apps/php/bin/phpize $ ./configure --with-php-config=/data/apps ...

  10. 【Java IO流】浅谈io,bio,nio,aio

    本文转载自:http://www.cnblogs.com/doit8791/p/4951591.html 1.同步异步.阻塞非阻塞概念        同步和异步是针对应用程序和内核的交互而言的. 阻塞 ...