前端面试题(基础篇十二)

发布于:2024-06-29 ⋅ 阅读:(137) ⋅ 点赞:(0)

一、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 ,还有说 是基于火狐内核。

详细参考:《浏览器内核的解析和对比》icon-default.png?t=N7T8http://www.cnblogs.com/fullhouse/archive/2011/12/19/2293455.html

《五大主流浏览器内核的源起以及国内各大浏览器内核总结》icon-default.png?t=N7T8https://blog.csdn.net/Summer_15/article/details/71249203

五、渲染过程中遇到 JS 文件怎么处理?(浏览器解析过程)

 JavaScript 的加载、解析与执行会阻塞文档的解析,也就是说,在构建 DOM 时,HTML 解析器若遇到了 JavaScript,那么它会暂停文档的解析,将控制权移交给 JavaScript 引擎,等 JavaScript 引擎运行完毕,浏览器再从中断的地方恢复继续解析文档。

也就是说,如果你想首屏渲染的越快,就越不应该在首屏就加载 JS 文件,这也是都建议将 script 标签放在 body 标签底部的原因。当然在当下,并不是说 script 标签必须放在底部,因为你可以script 标签添加 defer 或者 async 属性。


网站公告

今日签到

点亮在社区的每一天
去签到