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

一、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 属性。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/754797.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

ServletConfig与ServletContext详解

文章目录 概要web.xmlServletConfig介绍ServletConfig实例ServletConfig细节ServletContext介绍ServletContext实例ServletContext细节ServletContext获得服务访问次数&#xff08;可拓展&#xff09;总结 概要 web.xml <?xml version"1.0" encoding"UTF-…

使用uniapp编写微信小程序

使用uniapp编写微信小程序 文章目录 使用uniapp编写微信小程序前言一、项目搭建1.1 创建项目方式1.1.1 HBuilderX工具创建1.1.2 命令行下载1.1.3 直接Gitee下载 1.2 项目文件解构1.2.1 安装依赖1.2.2 项目启动1.2.3 文件结构释义 1.2 引入uni-ui介绍 二、拓展2.1 uni-app使用uc…

谷粒商城实战(045集群学习-elasticsearch(ES)集群)

Java项目《谷粒商城》架构师级Java项目实战&#xff0c;对标阿里P6-P7&#xff0c;全网最强 总时长 104:45:00 共408P 此文章包含第368p-第p369的内容 文章目录 简介集群健康分片新增节点水平扩容问题和解决集群结构测试集群信息 简介 不管用户发给哪个节点&#xff0c;都可以…

Adobe Acrobat Pro或者Adobe Acrobat Reader取消多标签页显示,设置打开一个pdf文件对应一个窗口。

Windows系统&#xff1a;Adobe Acrobat Pro或者Adobe Acrobat Reader首选项-一般-取消在同一窗口的新标签中打开文档&#xff08;需要重启&#xff09;的对勾&#xff0c;点击确定&#xff0c;彻底关闭后重启&#xff0c;这样打开的每一个PDF文件对应的是一个窗口&#xff0c;并…

vue3+ el-upload封装上传组件

组件功能介绍 上传格式限制上传大小限制上传文件数量限制自定义上传区上传成功回调禁用上传开关与点击上传自定义事件暴露所以上传文件列表&#xff08;uploadList&#xff09;与当前文件数据&#xff08;uploadLatestFile&#xff09; 组件代码Upload.vue <template>&l…

玩具租赁系统(安装+讲解+源码)

技术栈: 后端: SpringBoot Mysql MybatisPlus 前端: Vue Element 分为 管理员端 用户端 功能: 用户端 管理员端 观看地址: B站搜&#xff1a; 【毕设者】玩具租赁系统(安装讲解源码)

智慧园区综合平台解决方案PPT(75页)

## 智慧园区的理解 ### 从园区1.0到园区4.0的演进 1. 园区1.0&#xff1a;以土地经营为主&#xff0c;成本驱动&#xff0c;提供基本服务。 2. 园区2.0&#xff1a;服务驱动&#xff0c;关注企业成长&#xff0c;提供增值服务。 3. 园区3.0&#xff1a;智慧型园区&#xff…

WordPress免费模板:惊艳动态效果,打造视觉盛宴

WordPress免费模板&#xff1a;惊艳动态效果&#xff0c;打造视觉盛宴 我们为您带来了一款独具特色的WordPress免费模板&#xff0c;这款模板以其独特的动态效果设计&#xff0c;特别是引人注目的动态banner图片效果&#xff0c;为您的网站注入活力&#xff0c;打造一场视觉盛…

[渗透测试] 任意文件读取漏洞

任意文件读取漏洞 概述 漏洞成因 存在读取文件的功能&#xff08;Web应用开放了文件读取功能&#xff09;读取文件的路径客户端可控&#xff08;完全控制或者影响文件路径&#xff09;没有对文件路径进行校验或者校验不严格导致被绕过输出文件内容 漏洞危害 下载服务器中的…

spring boot (shiro)+ websocket测试连接不上的简单检测处理

1、用前端连接测试的demo一切正常&#xff0c;但是到了项目中连接不上了 一开始以为是地址错&#xff0c;但是换了apifox测试也是不可以。 2、考虑是shiro进行了拦截了&#xff0c;所以就访问不到了地址&#xff0c;那么就放行。 3、再次用apifox测试&#xff0c;成功了。 当然…

【CSS in Depth 2 精译】2.2 em 和 rem + 2.2.1 使用 em 定义字号

当前内容所在位置 第一章 层叠、优先级与继承第二章 相对单位 2.1 相对单位的威力 2.1.1 响应式设计的兴起 2.2 em 与 rem ✔️ 2.2.1 使用 em 定义字号 ✔️2.2.2 使用 rem 设置字号 2.3 告别像素思维2.4 视口的相对单位2.5 无单位的数值与行高2.6 自定义属性2.7 本章小结 2.…

复分析——第9章——椭圆函数导论(E.M. Stein R. Shakarchi)

第 9 章 椭圆函数导论 (An Introduction to Elliptic Functions) The form that Jacobi had given to the theory of elliptic functions was far from perfection; its flaws are obvious. At the base we find three fundamental functions sn, cn and dn. These functio…

一文解决图论中有向图、无向图、非负加权图的单源最短路径问题【超详细】【通用模板程序】【深入分析】【无需基础】【c++】

本文致力于提供一种解决图论中所有&#xff08;或绝大部分&#xff09;有向图、无向图、非负加权图的单源最短路径问题的通用程序模板&#xff0c;本文提供的模板并不是简单的可行模板&#xff0c;而是经过深入分析解释的一个较高质量和性能的通用程序模版。在每个关键变量存储…

JavaSE期末复习速成笔记

面向对象 1. 面向对象的概念 面向对象编程&#xff08;OOP&#xff09;是一种编程范式&#xff0c;它将现实世界的事物抽象为对象&#xff0c;通过类和对象来创建各种功能模块&#xff0c;以此来设计和开发软件。 2. 类与对象 类&#xff1a;是对象的模板&#xff0c;定义了…

Ros2学习中的话题通信-自定义接口消息:在VScode中不能补全的问题

在学习ros2的过程中&#xff0c;当学习到话题通信-自定义接口消息时&#xff0c;当消息的具体类型并未指定时&#xff0c;常见的操作是在base_interfaces_demo下创建msg文件夹及文件。同理&#xff0c;在动作通信等其他类型的通信中也需要这么做&#xff0c;只是创建的文件夹的…

KV260视觉AI套件--开箱报告

目录 1. 简介 2. 与 Zynq 的渊源 3. 官方的入门步骤 4. 总结 1. 简介 传统的ARMFPGA或DSPFPGA控制方案在软件、逻辑、硬件以及系统工程的协同调试中&#xff0c;往往需要团队成员之间严格按照预定计划和接口规范进行分工合作&#xff0c;这不仅增加了测试过程的复杂性&…

【ElementPlus源码】Container 布局容器

文章目录 index.tsContainerheaderutilswithInstallwithNoopInstall hooksuseNamespace 单元测试 看源码时候做的笔记。如有错误请指出&#xff01; 关于路径的省略&#xff0c;详见button&#xff1a;【ElementPlus源码】Button按钮-CSDN博客 index.ts 导入一堆组件&#xff…

Centos7配置支持ftp文件传输功能

报错信息 适用于不支持ftp协议的centos7的系统。 报错信息&#xff1a;An error occurred while executing the action Connect. Details: No connection could be made because the target machine actively refused it. 解决办法 安装及启动等命令 # 安装vsftpd sudo yum…

Spark SQL 的总体工作流程

Spark SQL 是 Apache Spark 的一个模块,它提供了处理结构化和半结构化数据的能力。通过 Spark SQL,用户可以使用 SQL 语言或 DataFrame API 来执行数据查询和分析。这个模块允许开发者将 SQL 查询与 Spark 的数据处理能力结合起来,实现高效、优化的数据处理。下面是 Spark S…

高级运维工程师讲述银河麒麟V10SP1服务器加固收回权限/tmp命令引起生产mysql数据库事故实战

高级运维工程师讲述银河麒麟V10SP1服务器加固收回权限/tmp命令引起生产MySql数据库事故实战 一、前言 作为运维工程师经常会对生产服务器进行安全漏洞加固&#xff0c;一般服务厂商、或者甲方信息安全中心提供一些安全的shell脚本&#xff0c;一般这种shell脚本都是收回权限&…