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

一、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.mfbz.cn/a/760822.html

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

相关文章

解析桥式整流电路

下面这个桥式整流电路出场率很高&#xff0c;看着一定眼熟。 事实证明&#xff0c;强行灌输的东西总是难以下咽。记得读书那会&#xff0c;第一次看到这个电路时被吓到了&#xff0c;以至于直到这门课结束了也没搞清楚。 本文就来分析一下此电路中电流的走向&#xff0c;进而理…

【初阶数据结构】深入解析队列:探索底层逻辑

&#x1f525;引言 本篇将深入解析队列:探索底层逻辑&#xff0c;理解底层是如何实现并了解该接口实现的优缺点&#xff0c;以便于我们在编写程序灵活地使用该数据结构。 &#x1f308;个人主页&#xff1a;是店小二呀 &#x1f308;C语言笔记专栏&#xff1a;C语言笔记 &#…

Android经典面试题之Glide的缓存大揭秘

本文首发于公众号“AntDream”&#xff0c;欢迎微信搜索“AntDream”或扫描文章底部二维码关注&#xff0c;和我一起每天进步一点点 Glide缓存 关联类&#xff1a;Engine、LruResourceCache、LruCache、ActiveResources ActiveResources&#xff1a;弱引用缓存池 VisibleForTe…

Chapter8 透明效果——Shader入门精要学习笔记

一、基本概念 在Unity中通常使用两种方法来实现透明效果 透明度测试&#xff08;无法达到真正的半透明效果&#xff09;透明度混合&#xff08;关闭了深度写入&#xff09; 透明度测试 基本原理&#xff1a;设置一个阈值&#xff0c;只要片元的透明度小于阈值&#xff0c;就…

VMware--创建Ubuntu虚拟机

原文网址&#xff1a;VMware--创建Ubuntu虚拟机-CSDN博客 简介 本文介绍VMware创建Ubuntu虚拟机的方法。 VMware是最好用的虚拟机软件&#xff0c;安装方法见&#xff1a; 本文安装当前最新的Ubuntu的LTS镜像&#xff1a;ubuntu2022.04.4LTS。 1.下载Ubuntu镜像 下载地址…

电脑技巧:告别卡顿,迎接流畅——Wintune系统优化软件功能详解

目录 一、Wintune介绍 二、Wintune核心功能介绍 2.1 系统优化 2.2 隐私功能 2.3 文件管理模块 2.4 可选选项 2.5 UWP app服务 2.6 startup Manager 2.7、主机编辑 三、总结 电脑是大家目前日常办公娱乐必不可小的工具&#xff0c;软件市场上的系统优化软件层出不穷&a…

一二三应用开发平台应用开发示例(5)——列表视图、树视图、树表视图、树参照视图配置

列表视图 接下来进入列表视图配置&#xff0c;创建的操作方式跟前面相同&#xff0c;如下图所示&#xff1a; 保存后回到列表&#xff0c;点击行记录的配置按钮&#xff0c;进入如下配置页面 可以看到该配置界面相比新增、修改、查看那三个视图要复杂得多&#xff0c;配置项…

帕金森患者的福音,这些食物竟有神奇疗效!

在忙碌的现代生活中&#xff0c;健康问题越来越受到大家的关注。而帕金森病作为一种常见的老年神经系统疾病&#xff0c;更是让许多患者和家庭倍感压力。但是&#xff0c;你知道吗&#xff1f;除了药物治疗和手术干预&#xff0c;日常饮食也能对帕金森病产生积极的影响。今天&a…

开源分享:一套完整的直播购物系统源码

直播购物已经成为一种炙手可热的电商模式&#xff0c;吸引了无数商家和消费者的目光。对于开发者来说&#xff0c;构建一个功能齐全、用户体验优良的直播购物系统是一项复杂的任务。本文将分享一套完整的直播购物系统源码&#xff0c;帮助开发者快速搭建自己的直播购物平台。 …

基于springboot+vue+uniapp的语言课学习系统小程序

开发语言&#xff1a;Java框架&#xff1a;springbootuniappJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#…

在Centos上安装Lua不要用什么curl指令,这样获取到的压缩包不是gzip格式的

Lua 环境安装 | 菜鸟教程 (runoob.com) 在这一篇里&#xff0c;把这一行 换成 wget http://www.lua.org/ftp/lua-5.3.0.tar.gz 再去解压编译安装就对了。

ue5导航网格设置

AI使用导航网格进行移动&#xff0c;所以&#xff0c;先设置导航网格边界体积 2&#xff0c;使导航网格边界体积覆盖AI所需要的场景&#xff08;绿色区域&#xff09;&#xff0c;x,y&#xff0c;z在这里都扩大到原来的10倍 3&#xff0c;打开actor的“启用tick并开始” 4&…

No module named ‘MySQLdb‘

python 运行代码的时候遇到No module named ‘MySQLdb’报错如何解决&#xff1f; 解决办法 如果没有安装可以先安装以下依赖库 pip install PyMySQL如果已经安装了PyMySQL&#xff0c;仍然报MySQLdb模块找不到&#xff0c;可以尝试安装以下依赖库。 pip install mysqlclient

二轴机器人装箱机:重塑物流效率,精准灵活,引领未来装箱新潮流

在现代化物流领域&#xff0c;高效、精准与灵活性无疑是各大企业追求的核心目标。而在这个日益追求自动化的时代&#xff0c;二轴机器人装箱机凭借其较佳的性能和出色的表现&#xff0c;正逐渐成为装箱作业的得力助手&#xff0c;引领着未来装箱新潮流。 一、高效&#xff1a;重…

【12】交易-“未花费交易输出”

1. 未花费交易输出 1.1 概念 未花费交易输出(unspent transactions output, UTXO)。未花费(unspent)指的是这个输出还没有被包含在任何交易的输入中,或者说没有被任何输入引用。 在交易结构示意图中,未花费的输出是:tx1, output 1;tx3, output 0;tx4, output 0。 1…

JavaScript原型对象和对象原型、原型继承、原型链

目录 1. 原型对象和对象原型2. 原型继承3. 原型链 1. 原型对象和对象原型 作用: 以前通过构造函数实例化的对象&#xff0c;每个实例化的对象的属性和方法都是独立的&#xff0c;会造成内存浪费。通过prototype对象原型能实现不同实例化对象共享公用的属性和方法&#xff0c;减…

Android 10.0 关于定制自适应AdaptiveIconDrawable类型的动态日历图标的功能实现系列一

1.前言 在10.0的系统rom定制化开发中,在关于定制动态时钟图标中,原系统是不支持动态日历图标的功能,所以就需要从新 定制动态时钟图标关于自适应AdaptiveIconDrawable类型的样式,就是可以支持当改变系统图标样式变化时,动态日历 图标的背景图形也跟着改变,所以接下来就来…

国产分布式数据库灾备高可用实现

最近在进行核心业务系统的切换演练测试&#xff0c;就在想一个最佳的分布式数据库高可用部署方案是如何保证数据不丢、系统可用的&#xff0c;做到故障时候可切换、可回切&#xff0c;并且业务数据的一致性。本文简要介绍了OceanBase数据库和GoldenDB数据库在灾备高可用的部署方…

Springboot ResourceLoader获取指定package目录下所有的类(get class in jar on Linux)

get class in jar on Linux Springboot ResourceLoader获取指定package目录下所有的类 PathMatchingResourcePatternResolver resolver new PathMatchingResourcePatternResolver();String pattern ResourcePatternResolver.CLASSPATH_ALL_URL_PREFIX ClassUtils.convertClas…

《概率论与数理统计》期末复习笔记_下

目录 第4章 随机变量的数字特征 4.1 数学期望 4.2 方差 4.3 常见分布的期望与方差 4.4 协方差与相关系教 第5章 大数定律和中心极限定理 5.1 大数定律 5.2 中心极限定理 第6章 样本与抽样分布 6.1 数理统汁的基本概念 6.2 抽样分布 6.2.1 卡方分布 6.2.2 t分布 6.…