一、link标签定义、与@import的区别
link 标签定义文档与外部资源的关系。
link 元素是空元素,它仅包含属性。 此元素只能存在于 head 部分,不过它可出现任意数。
link 标签中的 rel 属性定义了当前文档与被链接文档之间的关系。常见的 stylesheet 指的是定义一个外部加载的样式表。
区别:
(1)从属关系区别。 @import 是 CSS 提供的语法规则,只有导入样式表的作用;link 是 HTML 提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性、引入网站图标等。
(2)加载顺序区别。加载页面时,link 标签引入的 CSS 被同时加载;@import 引入的 CSS 将在页面加载完毕后被加载。
(3)兼容性区别。@import 是 CSS2.1 才有的语法,故只可在 IE5+ 才能识别;link 标签作为 HTML 元素,不存在兼容性问题。
(4)DOM 可控性区别。可以通过 JS 操作 DOM ,插入 link 标签来改变样式;由于 DOM 方法是基于文档的,无法使用 @import 的方式插入样式。
二、对浏览器的理解
浏览器的主要功能是将用户选择的web资源呈现出来,它需要从服务器中请求资源,将其显示在浏览器窗口中,请求资源的格式通常为HTML,也可以是PDF、image及其他格式。用户通过URI(Uniform Resource Identifier 统一资源标识符)来指定资源的位置。
在HTML和CSS中规定了浏览器解析html文档的方式,由W3C组织对这些规范进行维护,W3C是指定web标准的组织。
由于浏览器厂商大多自己开发扩展,对W3C制定的规范并不完全遵守,这对web开发者带来许多兼容性问题。
简单来说,浏览器分为两个部分,shell和浏览器内核。shell的种类比较多,内核比较少;shell指的是浏览器的外壳,例如菜单,工具栏等,主要是提供给用户界面操作,参数设置等,它可以调用内核来实现各种功能;内核时浏览器的核心,基于标记语言显示内容的模块或程序,当然,也有一些浏览器不区分外壳和内核。
三、介绍一下你对浏览器内核的理解
主要分为两个部分:渲染引擎和 JS 引擎
渲染引擎的主要职责就是渲染,将请求的资源在浏览器窗口中渲染出来。默认情况下,渲染引擎可以显示HTML、XML文档及图片,它可以借助插件(扩展)显示其他类型的数据。例如PDF
JS 引擎: 用来解析和执行JavaScript代码来实现网页动态效果
最初渲染引擎和js引擎并没有明显的区分,后来js引擎越来越独立(例如常见的V8引擎),内核就倾向于指渲染引擎。
四、常见的浏览器内核
(1) IE 浏览器内核:Trident 内核,也是俗称的 IE 内核;
(2) Chrome 浏览器内核:统称为 Chromium 内核或 Chrome 内核,以前是 Webkit 内核,现在是 Blink内核;
(3) Firefox 浏览器内核:Gecko 内核,俗称 Firefox 内核;
(4) Safari 浏览器内核:Webkit 内核;
(5) Opera 浏览器内核:最初是自己的 Presto 内核,后来加入谷歌大军,从 Webkit 又到了 Blink 内核;
(6) 360浏览器、猎豹浏览器内核:IE + Chrome 双内核;
(7) 搜狗、遨游、QQ 浏览器内核:Trident(兼容模式)+ Webkit(高速模式);
(8) 百度浏览器、世界之窗内核:IE 内核;
(9) 2345浏览器内核:好像以前是 IE 内核,现在也是 IE + Chrome 双内核了;
(10)UC 浏览器内核:这个众口不一,UC 说是他们自己研发的 U3 内核,但好像还是基于 Webkit 和 Trident ,还有说 是基于火狐内核。
详细参考:《浏览器内核的解析和对比》http://www.cnblogs.com/fullhouse/archive/2011/12/19/2293455.html
《五大主流浏览器内核的源起以及国内各大浏览器内核总结》https://blog.csdn.net/Summer_15/article/details/71249203
五、渲染过程中遇到 JS 文件怎么处理?(浏览器解析过程)
JavaScript 的加载、解析与执行会阻塞文档的解析,也就是说,在构建 DOM 时,HTML 解析器若遇到了 JavaScript,那么它会暂停文档的解析,将控制权移交给 JavaScript 引擎,等 JavaScript 引擎运行完毕,浏览器再从中断的地方恢复继续解析文档。
也就是说,如果你想首屏渲染的越快,就越不应该在首屏就加载 JS 文件,这也是都建议将 script 标签放在 body 标签底部的原因。当然在当下,并不是说 script 标签必须放在底部,因为你可以script 标签添加 defer 或者 async 属性。