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

一、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;如图形、视频、图表、表格、图像等等&#…

HarmonyOS开发实战:JSON组件使用方式-API

JSON类组件 模块介绍JSONValue提供eftool中的JSON相关对象的类型定义JSONObject提供类Java的JSON对象的系列方法以及相互转换JSONArray提供类Java的JSON数组的系列方法以及相互转换JSONArrayList提供类Java的JSON数组的系列方法以及相互转换JSONUtil提供JSON转换一系列判断方法…

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

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

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

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

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

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

VRRP和IPVS

1.VRRP VRRP(Virtual Router Redundancy Protocol,简称VRRP,虚拟路由冗余协议)是一种选择协议,它可以把一个虚拟路由器的责任动态分配到局域网上的VRRP路由器中的一台。控制虚拟路由器IP地址的VRRP路由器称为主路由器,它负责转发数据包到这些虚拟IP地址。 VRRP一旦主路由…

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…

防火墙防御体系结构类型

防火墙防御体系结构类型 防火墙是网络安全的核心组件&#xff0c;用于保护网络和系统免受未经授权的访问和各种网络攻击。防火墙防御体系结构类型多样化&#xff0c;每种类型都针对不同的安全需求和应用场景&#xff0c;提供不同层次的保护。以下是几种常见的防火墙防御体系结…

【车载开发系列】NXP开发环境介绍

【车载开发系列】NXP开发环境介绍 【车载开发系列】NXP开发环境介绍 【车载开发系列】NXP开发环境介绍一. 开发环境1、S32 Design Studio for S32 Platform2、S32 Design Studio for ARM3、S32 Design Studio IDE 二. NXP开发环境支持的单片机1&#xff09;Kinetis系列2&#x…

力扣3152.特殊数组 II

力扣3152.特殊数组 II 满足条件为0 &#xff0c; 不满足为1 最终如果区间和为0 则为特殊数组 class Solution {public:vector<bool> isArraySpecial(vector<int>& nums, vector<vector<int>>& queries) {int n nums.size();vector<int&…

论文阅读: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…

Java集合框架性能优化与选择指南

Java集合框架性能优化与选择指南 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 引言 Java集合框架是每位Java开发者日常工作中不可或缺的一部分。正确选择和…

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…

【PYG】pyg里dataloader和torch中dataloader有什么不一样

torch.utils.data.DataLoader 和 torch_geometric.loader.DataLoader 是两个不同的加载器&#xff0c;它们分别用于处理不同类型的数据。以下是它们之间的主要区别&#xff1a; torch.utils.data.DataLoader torch.utils.data.DataLoader 是 PyTorch 中的通用数据加载器&…

论文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) 的新搜索模块,这个模块融合…

2024年网络安全技术全景扫描:新趋势与新挑战

**# 2024年网络安全技术全景扫描&#xff1a;新趋势与新挑战 随着技术的飞速发展&#xff0c;网络安全领域在2024年迎来了新的变革。从人工智能的深入应用到零信任模型的广泛采纳&#xff0c;再到云环境、太空网络以及量子信息技术的兴起&#xff0c;这些新兴技术正在重塑网络…

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

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