html5的简单问题

1.html5结构语义化

用正确的标签做正确的事情。

便于团队的开发和维护，在没有加载css的情况下也能呈现较好的内容与结构代码，易于阅读。

有利于seo，提高可访问性。

2.html5新特性

增加：用于媒介回访的video和autio元素；本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失；sessiontorage的数据在浏览器关闭后自动删除；语义化更好的内容元素；表单控件；新的技术webworker,websocket,geolocation

移除纯表现的元素和对可用性产生负面影响的元素

支持html5新标签

3.描述cookies,sessionStroage和locaStorage的区别

cookies是网站为了标示用户身份而存储在用户本地终端上的数据，cookies数据始终在同源的http请求中携带，在浏览器和服务器间来回传递

sessionStroage和locaStorage不会把数据发送给服务器，仅在本地保存。

存储大小：

cookies数据大小不超过4k,sessionStroage和locaStora也有存储大小限制，但比cookies大得多，5M或更大

有效时间：

locaStorage存储持久数据，浏览器关闭后数据不丢失，除非主动删除

sessionStroage数据在当前浏览器窗口关闭后自动删除

cookies数据在过期时间之前一直有效，即使窗口或浏览器关闭。

javascript 复制代码

<template>
  <button @click="setCookie('username','zs',1)">设置cookies</button>
  <button @click="getCookie('username')">获取cookies</button>
  <button @click="delCookie('username')">删除cookies</button>
</template>
<script setup>
function getCookie(key) {
  var cookie = document.cookie;
  var arr = cookie.split("; ");// ["username=zs","password=123456","sex=男"]
  for (var i = 0; i < arr.length; i++) {
      var newarr = arr[i].split('=');// ["username","zs"]
      if (newarr[0] == key) {
        console.log('key,value',key,newarr[1]);
          return newarr[1]
      }
  }
  return ''
}
function setCookie(key, value, day) {
  var date = new Date();
  date.setDate(date.getDate() + day)
  document.cookie = key + '=' + value + ';expires=' + date
  console.log('key, value, day',key, value, day);
}
function delCookie(key) {
  setCookie(key, "", -1)
}
</script>

4.浏览器渲染机制（网页渲染到浏览器端）分为几个步骤

a.处理html并构建dom树

b.处理css并构建cssom树

c.将domh与cssom合并成一个渲染树

d.根据渲染树来布局，计算每个节点的位置

e.调度gpu绘制，合成图层，显示在屏幕上

在构建cssom树时，会阻塞渲染，直到cssom树构建完成。所以尽量保证层级扁平，减少过渡层叠。

当html解析到script标签时，会暂停构建dom，完成后才会从暂停的地方重新开始。所以，如果想要首屏渲染的越快，就不要在首屏就加载js文件。

5.重绘和回流

重绘是当前节点需要更改外观而不会影响布局

回流是布局或几何属性需要发生改变。

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

导致回流现象的操作：添加或删除可见dom元素，元素的位置发生变化，元素尺寸发生变化，内容发生变化，定位或浮动，浏览器窗口尺寸变化

减少重绘和回流：批量修改dom，对于复杂动画效果使用绝对定位使其脱离文档流，css硬件加速

6.`data-*` 属性的用法

在 HTML 中，data-* 属性用于存储自定义数据。可以在任何元素上使用这些属性，而 div 标签是最常见的应用之一。data-* 属性允许你在元素上存储与其相关的信息，而不会影响页面的结构或样式。