html/css基础篇——link和@inport详解以及脚本执行顺序探讨
先说一说两者之间的异同
两者都可以引用外部CSS的方式,现在主流浏览器两者都支持(ps:@import是CSS2.1提出的),但是存在一定的区别:
1.link是XHTML标签,除了加载CSS外,还可以定义其他事务;@import属于CSS范畴,只能下载CSS也只能在css代码里面使用。
link标签定义文档与外部资源的关系,最常见的用途是链接样式表以及浏览器标签图标。
他主要有一下几个可用的属性
href: 连接的外部文档的位置url
media: 规定被链接文档将被显示在什么设备上,主流浏览器支持的值有 "screen"、"print" 以及 "all"
rel: 规定当前文档与被链接文档之间的关系,目前只有stylesheet和icon支持的比较好,其中icon指的外部链接文档为浏览器标签图标。
sizes: html5新特性,规定被链接资源的尺寸,该属性可接受多个值,值由空格分隔。仅适用于 rel="icon"。值为any(规定图标是可伸缩的)和heightxwidth。比如下面的例子定义标签图标
<link rel="icon" href="http://www.w3school.com.cn/i/demo_icon.ico" type="image/gif" sizes="16x16">
type: 规定规定被链接文档的 MIME 类型。最常见的 MIME 类型是 "text/css"。MIME类型参考
@import在css代码中引用外部文档,而且只能放在代码的最开头。比如下面的例子就不行
<style type="text/css">
.panel{
width:1000px;
}
@import url(extra.css);
</style>
需要改成
<style type="text/css">
@import url(extra.css);
.panel{
width:1000px;
}
</style>
2:link引用CSS时,在页面载入时同时下载(按请求顺序下载);@import需要页面网页完全载入以后下载。
这里面涉及一个概念,标准里面代码中引用文件都是按顺序解析下载的。但是现代浏览器都做了优化:浏览器的预解析。如下面的例子
<style type="text/css">
@import url(extra.css);
</style>
<script type="text/javascript">
document.write("<script src='extra.js'><\/script>");
</script>
<script src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="test.css">
<script type="text/javascript" src='test.js'></script>
下载的顺序是jquery.js->test.css->test.js->extra.css->extra.js。其中extra.css和extra.js就是代码中引用文件的典型。在执行@import和script脚本的时候,浏览器预解析需要下载的后面三个外部文件先去下载下来。
注意:虽然extra.css在下载顺序上是在test.css后面,但是浏览器认为extr.css样式表的定义在test.css的前面,所以样式上浏览器会用test.css中的样式覆盖extra.css的样式。js脚本也是同理。
这里有一个原则,脚本(无论是html中内嵌的还是外部脚本)的优先级顺序是其引用的顺序,而非下载的顺序,并且其中的执行代码执行的必要条件是其引用顺序在其前列的脚本已经下载完毕(实际上脚本中代码的执行都是在所有脚本下载完成之后才执行的,只是不同脚本中的代码执行的上下文环境是不同的,下面会详细分析)。
举例
<script type="text/javascript">
document.write("<script src='extra.js'><\/script>");
</script>
<script type="text/javascript" src='test.js'></script>
<script type="text/javascript">
a();
</script>
<script src="new.js"></script>
//extra.js
function a(){
alert("extra")
}
alert("extra1") //test.js
function a(){
alert("test");
}
alert("test1");
setTimeout(a,1000); //new.js
function a(){
alert("new")
}
alert("new1")
引用顺序是
extra.js -> test.js -> new.js。
执行弹出弹出框的顺序是
alert("extra1") -> alert("test1") -> alert("test") -> alert("new1") -> alert("test")
解析,代码执行顺序及和引用顺序相同
浏览器执行函数的原理是根据顺序扫描脚本将所有要执行的处理放入处理队列中并带上执行的上下文环境依次执行。
比如执行到本地js的a()的时候上下文环境中函数a为function a(){alert("test")}。setTimeout(a,1000)执行后a函数携带上下文环境(a函数为function a(){alert("test")})被放置到另一个地方,等到时间间隔到期才被放入执行队列,这就是为什么最后弹出alert("test")的原因。
我们再次拓展,在extra.js中定义一个function b(){a();},然后在本地js调用a()之后执行b();结果应当是弹出alert("test"),因为这个时候的上下文环境a函数为function a(){alert("test")}。
css的请求顺序和覆盖也可以用上面的描述解释。覆盖顺序是谁先被引用谁就会被后引用的同样的样式覆盖(当然这里指的是除开内联样式以外的样式引用)
3:link支持使用Javascript控制DOM去改变样式;而@import不支持。
因为link也属于DOM元素,而@import是css样式表中支持的东东
4: 用法
@import
@import "style.css"
@import url(style.css)
@import url("style.css")
推荐使用@import url(style.css)
如果觉得本文不错,请点击右下方【推荐】!
html/css基础篇——link和@inport详解以及脚本执行顺序探讨的更多相关文章
- Java基础篇(JVM)——字节码详解
这是Java基础篇(JVM)的第一篇文章,本来想先说说Java类加载机制的,后来想想,JVM的作用是加载编译器编译好的字节码,并解释成机器码,那么首先应该了解字节码,然后再谈加载字节码的类加载机制似乎 ...
- PHP 基础篇 - PHP 错误级别详解
一.前言 最近经常看到工作 2 年左右的童鞋写的代码也会出现以静态方法的形式调用非静态方法,这是个 Deprecated 级别的语法错误,代码里不应该出现的.对方很郁闷,说:为什么我的环境可以正常运行 ...
- Vue.js 源码分析(十三) 基础篇 组件 props属性详解
父组件通过props属性向子组件传递数据,定义组件的时候可以定义一个props属性,值可以是一个字符串数组或一个对象. 例如: <!DOCTYPE html> <html lang= ...
- Vue.js 源码分析(十四) 基础篇 组件 自定义事件详解
我们在开发组件时有时需要和父组件沟通,此时可以用自定义事件来实现 组件的事件分为自定义事件和原生事件,前者用于子组件给父组件发送消息的,后者用于在组件的根元素上直接监听一个原生事件,区别就是绑定原生事 ...
- Vue.js 源码分析(十一) 基础篇 过滤器 filters属性详解
Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScrip ...
- Vue.js 源码分析(五) 基础篇 方法 methods属性详解
methods中定义了Vue实例的方法,官网是这样介绍的: 例如:: <!DOCTYPE html> <html lang="en"> <head&g ...
- 《手把手教你》系列基础篇(九十六)-java+ selenium自动化测试-框架之设计篇-跨浏览器(详解教程)
1.简介 从这一篇开始介绍和分享Java+Selenium+POM的简单自动化测试框架设计.第一个设计点,就是支持跨浏览器测试. 宏哥自己认为的支持跨浏览器测试就是:同一个测试用例,支持用不同浏览器去 ...
- JS魔法堂:LINK元素深入详解
一.前言 我们一般使用方式为 <link type="text/css" rel="stylesheet" href="text.css&quo ...
- Docker 基础技术之 Linux cgroups 详解
PS:欢迎大家关注我的公众号:aCloudDeveloper,专注技术分享,努力打造干货分享平台,二维码在文末可以扫,谢谢大家. 推荐大家到公众号阅读,那里阅读体验更好,也沉淀了很多篇干货. 前面两篇 ...
随机推荐
- FSM 浅谈
之前写过一篇关于状态机的,上一篇讲过的我也就不再罗嗦了,不知道欢迎去查看我的上一篇随笔,主要是感觉上次自己封装的还是不行,所以又进行修改了一番! 我本人是个菜鸟,最开始接触状态机的时候,状态机一个可厉 ...
- 重制AdvanceWars第一步 -- 搞定地图
首先来聊下高级战争吧Advance Wars,由任天堂旗下的Intelligent Systems开发的战棋游戏.初作诞生于GBA上,后来继续跟进了高战2黑洞崛,而后在下一代掌机DS上也出了三代续作高 ...
- java提高篇(一)-----理解java的三大特性之封装
从大二接触java开始,到现在也差不多三个年头了.从最基础的HTML.CSS到最后的SSH自己都是一步一个脚印走出来的,其中开心过.失落过.寂寞过.虽然是半道出家但是经过自己的努力也算是完成了“学业” ...
- Oracle建表脚本记录
--删除 drop table dianfei; --创建表 create table dianfei ( uon ) not null, mmonth ) not null, ddf ,) not ...
- WebApi系列~开放的CORS,跨域资源访问对所有人开放
回到目录 之前有客户问我,如何AJAX跨域post,这个问题挺有意思,在我们看来,我是不被允许的,因为它是不安全的,但随着web api的火热,这个东西也被人们一步步的接受了,确实,有时,我们的接口希 ...
- Java程序员的日常 —— 多进程开发
最近再弄进程管理相关的工作,因此必要的就涉及到各种系统下关于进程的管理. 这里简单的介绍下: 如何在Java中执行命令 在windows下肯定是dos命令了,而在linux则为shell命令.执行的方 ...
- Atitit.异步的实现模式attilax大总结
Atitit.异步的实现模式attilax大总结 1.1. 函数回调(包括的future模式)1 1.2. 事件机制( 包括定时器 listeners 1 1.3. 中断机制1 1.4. 订阅机制 发 ...
- ftp下载目录下所有文件及文件夹内(递归)
ftp下载目录下所有文件及文件夹内(递归) /// <summary> /// ftp文件上传.下载操作类 /// </summary> public class FTPH ...
- mysql修改密码
mysql修改password >mysqladmin -u root -p password newpassword 就这么简单
- java三大循环:for、while、do...while
1.while和do...while的区别: while 与 do...while之间的区别:如果布尔表达式第一次执行的结果就为false,那么while循环一次也不执行:do...while循环会执 ...