鸭题-01-HTML

HTML

---

简述一下你对HTML语义化的理解？

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

行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

• 行内元素有：a b span img input select strong（强调的语气）
• 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
• 常见的空元素:<br> <hr> <img> <input> <link> <meta>

页面导入样式时，使用link和@import有什么区别？

• link属于XHTML标签，除了加载CSS外，还能用于定义RSS,定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS
• 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载
• import是CSS2.1 提出的，只在IE5以上才能被识别==，而link是XHTML标签，无兼容问题==

介绍一下你对浏览器内核的理解？

• 主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎

• 渲染引擎（浏览器部分：什么谷歌内核，火狐内核都属于渲染引擎）：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核

• JS引擎（二阶段学的东西考的都是引擎来解析）：解析和执行javascript来实现网页的动态效果

• 最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎

常见的浏览器内核有哪些？

• Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
• Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
• Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
• Webkit内核：Safari,Chrome等。 [ Chrome的Blink（WebKit的分支）]

html5有哪些新特性（记）、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

• HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加

  • 用于媒介回放的 video 和 audio 元素
  • 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失
  • sessionStorage 的数据在浏览器关闭后自动删除
  • 语意化更好的内容元素，比如 article、footer、header、nav、section
  • 表单控件，calendar、date、time、email、url、search
  • 新的技术webworker, websocket, Geolocation

• 移除的元素：

  • 纯表现的元素：basefont，big，center，font, s，strike，tt，u
  • 对可用性产生负面影响的元素：frame，frameset，noframes

• 支持HTML5新标签：

  • IE8/IE7/IE6支持通过document.createElement方法产生的标签
  • 可以利用这一特性让这些浏览器支持HTML5新标签
  • 浏览器支持新标签后，还需要添加标签默认的样式

• 当然也可以直接使用成熟的框架、比如html5shim

<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com
/svn/trunk/html5.js"</script><![endif]-->

• 如何区分HTML5： DOCTYPE声明\新增的结构元素\功能元素

请描述一下 cookies，sessionStorage 和 localStorage 的区别？

• cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据==（通常经过加密）==

• cookie数据始终在同源的http请求中携带（即使不需要），即会在浏览器和服务器间来回传递

• sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

• 存储大小：

  • cookie数据大小不能超过4k
  • sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大

• 有期时间：

  • localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
  • sessionStorage 数据在当前浏览器窗口关闭后自动删除
  • cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

• localStorage 应用场景：

  • 登录 token
  • 搜索历史记录（搜过的记录被存在localStorage ）

Label的作用是什么？是怎么用的？

• label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件

如何实现浏览器内多个标签页之间的通信? (阿里)

• WebSocket
• 也可以调用localstorge、cookies等本地存储方式

前端需要注意哪些SEO

• 合理的==title、description、keywords==（公司官网）：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可
• 语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
• 重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
• 重要内容不要用js输出：爬虫不会执行js获取内容（一旦前后端分离了，爬虫是爬不到任何数据的）
• 如果不想让爬虫爬到可以加上 Robot (机器人标签)，可以禁用爬虫
• 少用iframe：搜索引擎不会抓取iframe中的内容
• 非装饰性图片必须加alt

浏览器的渲染机制一般分为以下几个步骤（ 一个网页是怎么渲染到浏览器的）

• 首先浏览器会先处理 HTML 并构建 DOM 树（上树是只有dom 渲染完成。 componentDidMount和DidUpdate只能到这一部分）。
• 然后处理 CSS 构建 CSSOM 树。
• 将 DOM 与 CSSOM 合并成一个渲染树。
• 真正的页面中是根据渲染树来布局，计算每个节点的位置。
• 调用 GPU 绘制，合成图层，显示在屏幕上

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OKdwaUxv-1624432239340)(https://user-gold-cdn.xitu.io/2018/4/11/162b2ab2ec70ac5b?w=900&h=352&f=png&s=49983)]

• 在构建 CSSOM 树时，会阻塞渲染，直至 CSSOM 树构建完成。并且构建 CSSOM 树是一个十分消耗性能的过程，所以应该尽量保证层级扁平，减少过度层叠，越是具体的 CSS 选择器，执行速度越慢
• 当 HTML 解析到 script 标签时，会暂停构建 DOM，完成后才会从暂停的地方重新开始。也就是说，如果你想首屏渲染的越快，就越不应该在首屏就加载 JS 文件。

重绘（Repaint 重新绘制）和回流（Reflow 也叫重排，重新创建）

回流会重新计算每一个节点的位置，就算只是修改1px 也会引发所有的节点进行重新计算。回流一定会引发重绘，重绘不一定会回流。所有回流的成本更高。

• 重绘是当节点需要更改外观而不会影响布局的，比如改变 color 就叫称为重绘
• 回流是布局或者几何属性需要改变就称为回流（需要计算它们在设备视口(viewport)内的确切位置和大小）

回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变深层次的节点很可能导致父节点的一系列回流

所以以下几个动作可能会导致性能问题：

• 添加或删除可见的DOM元素
• 元素的位置发生变化
• 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
• 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代。
• 定位或者浮动
• 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）

减少重绘和回流

• 批量修改DOM

• 对于复杂动画效果,使用绝对定位让其脱离文档流

• css3硬件加速（GPU加速）transform、opacity、filters这些动画不会引起回流重绘

举个例子🌰：

改变字体颜色，改变背景颜色等等都会引发重绘而已，

而改变padding，margin，left ,top,border …等等这些值引发的是回流，而回流会导致性能问题，所以工作中要减少回流，而减少回流有以下这些方法：批量修改DOM、对于复杂动画效果,使用绝对定位让其脱离文档流