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

一、DOMContentLoaded 事件和 Load 事件的区别?

当初始的 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表、图像和子框架的加载完成。

Load 事件是当所有资源加载完成后触发的。

二、简述一下你对 HTML 语义化的理解?

相关知识点

(1) 用正确的标签做正确的事情。
(2) html 语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析;
(3) 即使在没有样式 CSS 情况下也以一种文档格式显示,并且是容易阅读的;
(4) 搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重,利于 SEO ;
(5) 使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。

回答:

 html 语义化主要指的是我们应该使用合适的标签来划分网页内容的结构。html 的本质作用其实就是定义网页文档的结构,
 一个语义化的文档,能够使页面的结构更加清晰,易于理解。这样不仅有利于开发者的维护和理解,同时也能够使机器对文档内容进行正确的解读。比如说我们常用的 b 标签和 strong 标签,它们在样式上都是文字的加粗,但是 strong 标签拥有强调的语义。
 对于一般显示来说,可能我们看上去没有差异,但是对于机器来说,就会有很大的不同。如果用户使用的是屏幕阅读器来访问网页的话,使用 strong 标签就会有明显的语调上的变化,而 b 标签则没有。如果是搜索引擎的爬虫对我们网页进行分析的话,那么它会依赖于 html 标签来确定上下文和各个关键字的权重,一个语义化的文档对爬虫来说是友好的,是有利于爬虫对文档内容解读的, 从而有利于我们网站的 SEO 。从 html5 我们可以看出,标准是倾向于以语义化的方式来构建网页的,比如新增了 header 、footer 这些语义标签,删除了 big 、font 这些没有语义的标签

三、b 与 strong 的区别和 i 与 em 的区别?

从页面显示效果来看,被 <b> 和 <strong> 包围的文字将会被加粗,而被 <i> 和 <em> 包围的文字将以斜体的形式呈现。

 但是 <b> <i> 是自然样式标签,分别表示无意义的加粗,无意义的斜体,表现样式为 { font-weight: bolder},仅仅表示「这里应该用粗体显示」或者「这里应该用斜体显示」,此两个标签HTML4.01 中并不被推荐使用。而 <em> 和 <strong> 是语义样式标签。 <em> 表示一般的强调文本,而 <strong> 表示比 <em> 语义更强的强调文本。
    
使用阅读设备阅读网页时:<strong> 会重读,而 <b> 是展示强调内容。

四、常见的浏览器端的存储技术有哪些?

 浏览器常见的存储技术有 cookie、localStorage 和 sessionStorage。

还有两种存储技术用于大规模数据存储,webSQL(已被废除)和 indexDB。

IE 支持 userData 存储数据,但是基本很少使用到,除非有很强的浏览器兼容需求。

《很全很全的前端本地存储讲解》icon-default.png?t=N7T8https://segmentfault.com/a/1190000012578794#articleHeader0

 五、请描述一下 cookies,sessionStorage 和 localStorage 的区别?

相关资料:

 SessionStorage, LocalStorage, Cookie 这三者都可以被用来在浏览器端存储数据,而且都是字符串类型的键值对。区别在于前两者属于 HTML5 WebStorage,创建它们的目的便于客户端存储数据。而 cookie 是网站为了标示用户身份而储存在用户本地终端上的数据(通常经过加密)。cookie 数据始终在同源(协议、主机、端口相同)的 http 请求中携带(即使不需要),会在浏览器和服务器间来回传递。
    
    
    存储大小:
          cookie 数据大小不能超过4 k 。
          sessionStorage 和 localStorage 虽然也有存储大小的限制,但比 cookie 大得多,可以达到 5M 或更大。

    有期时间:
          localStorage    存储持久数据,浏览器关闭后数据不丢失除非主动删除数据。
          sessionStorage  数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持,并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面时会在顶级浏览上下文中初始化一个新的会话。
          cookie 设置的 cookie 过期时间之前一直有效,即使窗口或浏览器关闭。
     
    作用域:
        sessionStorage  只在同源的同窗口(或标签页)中共享数据,也就是只在当前会话中共享。
        localStorage 在所有同源窗口中都是共享的。
        cookie 在所有同源窗口中都是共享的。

回答:

浏览器端常用的存储技术是 cookie 、localStorage 和 sessionStorage。

cookie 其实最开始是服务器端用于记录用户状态的一种方式,由服务器设置,在客户端存储,然后每次发起同源请求时,发送给服务器端。cookie 最多能存储 4 k 数据,它的生存时间由 expires 属性指定,并且 cookie 只能被同源的页面访问共享。

sessionStorage 是 html5 提供的一种浏览器本地存储的方法,它借鉴了服务器端 session 的概念,代表的是一次会话中所保存的数据。它一般能够存储 5M 或者更大的数据,它在当前窗口关闭后就失效了,并且 sessionStorage 只能被同一个窗口的同源页面所访问共享。

    localStorage 也是 html5 提供的一种浏览器本地存储的方法,它一般也能够存储 5M 或者更大的数据。它和 sessionStorage 不同的是,除非手动删除它,否则它不会失效,并且 localStorage 也只能被同源页面所访问共享。

 上面几种方式都是存储少量数据的时候的存储方式,当我们需要在本地存储大量数据的时候,我们可以使用浏览器的 indexDB 这是浏览器提供的一种本地的数据库存储机制。它不是关系型数据库,它内部采用对象仓库的形式存储数据,它更接近 NoSQL 数据库。

资料参考:

《请描述一下 cookies,sessionStorage 和 localStorage 的区别?》icon-default.png?t=N7T8https://segmentfault.com/a/1190000017423117

《浏览器数据库 IndexedDB 入门教程》icon-default.png?t=N7T8http://www.ruanyifeng.com/blog/2018/07/indexeddb.html

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

机器学习 中数据是如何处理的?

数据处理是将数据从给定形式转换为更可用和更理想的形式的任务&#xff0c;即使其更有意义、信息更丰富。使用机器学习算法、数学建模和统计知识&#xff0c;整个过程可以自动化。这个完整过程的输出可以是任何所需的形式&#xff0c;如图形、视频、图表、表格、图像等等&#…

理想汽车提出3DRealCar:首个大规模3D真实汽车数据集

理想提出3DRealCar&#xff0c;这是第一个大规模 3D 实车数据集&#xff0c;包含 2500 辆在真实场景中拍摄的汽车。我们希望 3DRealCar 可以成为促进汽车相关任务的宝贵资源。 理想汽车提出3DRealCar&#xff1a;首个大规模3D真实汽车数据集! 我们精心策划的高质量3DRealCar数…

全球点赞第一起名大师颜廷利:是金子总会“花光”的

在物质世界的繁华背后&#xff0c;隐藏着一个深刻的真理&#xff1a;有形之物的分享会逐渐减少&#xff0c;而无形之物的传递却能不断增值。金钱、货币、银两这些商业领域的实体&#xff0c;往往激发出人类对更多财富的渴望和对资源枯竭的恐惧。这种恐惧源于资源的有限性&#…

【数据结构】(C语言):二叉搜索树

二叉搜索树&#xff1a; 树不是线性的&#xff0c;是层级结构。基本单位是节点&#xff0c;每个节点最多2个子节点。有序。每个节点&#xff0c;其左子节点都比它小&#xff0c;其右子节点都比它大。每个子树都是一个二叉搜索树。每个节点及其所有子节点形成子树。可以是空树。…

PointNet++论文导读

PointNet论文导读 主要改进网络结构&#xff1a;非均匀采样下的特征学习的鲁棒性利用点特征传播处理数据集分割 论文链接:https://arxiv.org/abs/1612.00593 主要改进 PointNet的基本思想是学习每个点的空间编码&#xff0c;然后将所有单个点的特征聚合成一个全局点云标签&am…

Apache Ranger 2.4.0 集成hadoop 3.X(Kerbos)

1、安装Ranger 参照上一个文章 2、修改配置 把各种plugin转到统一目录&#xff08;源码编译的target目录下拷贝过来&#xff09;&#xff0c;比如 tar zxvf ranger-2.4.0-hdfs-plugin.tar.gz tar zxvf ranger-2.4.0-hdfs-plugin.tar.gz vim install.properties POLICY_MG…

论文阅读:Simple and Efficient Heterogeneous Graph Neural Network

Yang, Xiaocheng, Mingyu Yan, Shirui Pan, Xiaochun Ye and Dongrui Fan. “Simple and Efficient Heterogeneous Graph Neural Network.” AAAI Conference on Artificial Intelligence (2022). 论文地址&#xff1a;[PDF] Simple and Efficient Heterogeneous Graph Neural…

Bytebase 2.20.0 - 支持为工单事件配置飞书个人通知

&#x1f680; 新功能 支持 Databricks。支持 SQL Server 的 TLS/SSL 连接。支持为工单事件配置飞书个人通知。支持限制用户注册的邮箱域名。 &#x1f514; 重大变更 将分类分级同步设置从数据库配置移至工作空间的全局配置。 SQL 编辑器只读模式下只允许执行 Redis 的只读…

着色器预热?为什么 Flutter 需要?为什么原生 App 不需要?那 Compose 呢?Impeller 呢?

依旧是来自网友的问题&#xff0c;这个问题在一定程度上还是很意思的&#xff0c;因为大家可能会想&#xff0c;Flutter 使用 skia&#xff0c;原生 App 是用 skia &#xff0c;那为什么在 Flutter 上会有着色器预热&#xff08;Shader Warmup&#xff09;这样的说法&#xff1…

论文1--ViT

Vision Transformer (ViT) 论文&#xff1a;https://arxiv.org/abs/2010.11929代码&#xff1a;GitHub - google-research/vision_transformer 1.背景 &#xff08;1&#xff09;transformer在NLP很强&#xff0c;但在CV的应用还非常有限&#xff0c;在此之前只有目标检测中…

【轻量化】YOLOv8 更换骨干网络之 MobileNetv4 | 《号称最强轻量化网络》

论文地址:https://arxiv.org/pdf/2404.10518 代码地址:https://github.com/tensorflow/models/blob/master/official/vision/modeling/backbones/mobilenet.py 文章速览 文章摘要 MobileNetV4引入了一个名为Universal Inverted Bottleneck (UIB) 的新搜索模块,这个模块融合…

民用无人机企业招标投标需要资质证书详解

一、基础资质 在民用无人机企业的招标投标过程中&#xff0c;基础资质是首要考虑的因素。这些资质通常包括企业注册资质、税务登记证、组织机构代码证等。 1.1 企业注册资质 企业应具备合法的注册资质&#xff0c;即营业执照。该执照应包含企业名称、注册地址、法定代表人、…

idea集成uglifycss压缩混淆css

Uglifycss介绍 https://www.npmjs.com/package/uglifycss 命令行 $ uglifycss [options] [filename] [...] > output 选项&#xff1a; --max-line-len n每个字符添加一个换行符&#xff08;大约&#xff09;; 表示无换行符&#xff0c;并且是默认值n0 --expand-vars扩…

考研数学|《660》一刷的错题,二刷还错,怎么能做对?

660这本习题册的难度不小&#xff0c;它不仅考察你对知识点的掌握程度&#xff0c;还考察你的解题思路和方法。很多题目会同时涉及多个知识点&#xff0c;而且对概念的挖掘非常深入&#xff0c;甚至在一些容易出错的地方还设置了陷阱&#xff0c;这对于基础不扎实的同学来说&am…

商城积分系统的代码实现(下)-- 积分订单的退款与结算

一、接着上文 用户在消耗积分的时候&#xff0c;需要根据一定的逻辑&#xff0c;除了扣减账户的当前余额&#xff0c;还需要依次消费积分订单的余额。 private void updatePointsOrderByUse(Integer schoolId, Long userId, String pointsType, int usingPoints) {List<Po…

Web攻防基础篇-文件上传漏洞

文件解析安全问题上&#xff0c;格式解析是一对一的&#xff08;不能jpg解析php&#xff09;&#xff0c;换句话来说有解析错误配置或后缀解析漏洞时才能实现格式差异解析。 文件上传漏洞 程序或系统未对上传文件作全面的限制&#xff0c;导致用户可以上传某些非法文件&#…

Jetson系列机载电脑创建热点模式配置方法

Jetson nano为例—— 创建热点模式配置方法 1.1、新建一个 WiFi 在屏幕右上角找到网络图标&#xff0c;点击后选择“Edit Connections”选项&#xff0c;进入选择网络连接页面&#xff0c;然后点击左下角加号&#xff0c;新建一个连接&#xff0c;类型选择 WiFi 后点击 “cre…

在TkinterGUI界面显示WIFI网络(ESP32s3)摄像头画面

本实验结合了之前写过的两篇文章Python调用摄像头&#xff0c;实时显示视频在Tkinter界面以及ESP32 S3搭载OV2640摄像头释放热点&#xff08;AP&#xff09;工作模式–Arduino程序&#xff0c;当然如果手头有其他可以获得网络摄像头的URL即用于访问摄像头视频流的网络地址&…

【笔记】从零开始做一个精灵龙女-拆uv阶段

目录 先回顾一下拆uv的基础流程吧 肩部盔甲分UV示例 手环UV部分 腰带UV部分 其它也差不多&#xff0c;需要删掉一半的就先提前删掉一半&#xff0c;然后把不需要的被遮挡的面也删掉 龙角UV 胸甲UV 侧边碎发UV 马尾UV 脸部/耳朵UV 特殊情况&#xff1a;如果要删一半再…

MacOS 安装 Maven 并配置环境变量

一、简介 Maven 是一款基于 Java 平台的项目管理和整合工具&#xff0c;用来构建项目的。也就是清理、编译、测试、运行、打包、安装整个过程都交给 Maven 管理&#xff0c;整个过程就是构建。 二、安装 Java JDK Maven 依赖 Java JDK&#xff0c;如果本机没有安装过 Java 的…