一、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 存储数据,但是基本很少使用到,除非有很强的浏览器兼容需求。
《很全很全的前端本地存储讲解》https://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 的区别?》https://segmentfault.com/a/1190000017423117
《浏览器数据库 IndexedDB 入门教程》http://www.ruanyifeng.com/blog/2018/07/indexeddb.html