html知识点HTML DOCTYPE含义？什么是HTML的标准模式和混杂模式？ HTML5有哪些语义化标签及其特性？H

HTML DOCTYPE含义？什么是HTML的标准模式和混杂模式？

   <!-- HTML DOCTYPE是HTML文档的声明，用来告诉浏览器当前文档是什么类型的HTML文档。DOCTYPE的写法有两种，一种是标准模式，另一种是混杂模式。 -->
   <!-- 标准模式： -->
   <!DOCTYPE html>
   <!-- 混杂模式： -->
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML5有哪些语义化标签及其特性？HTML元素有哪些分类和特性？

HTML5 语义化标签：header、main、footer、nav、canvas、video、select等；

有利于 seo 优化
代码可读性、可维护性更好
减少页面加载时间
减少浏览器兼容性问题
accessibility (无障碍) 方便其他设备进行解析

HTML5 元素分类：1、块级元素特性：宽度、高度、背景、边框、浮动、定位等 2、行内元素特性：字体、颜色、背景、边框、文本对齐、文本修饰、文本缩进等 3、表单

如何检测浏览器是否支持HTML5特性？

HTML5新特性

canvas：画布
video：视频；audio：音频
localStorage：本地存储; Worker: 多线程；
article、aside、footer、header、nav、section：语义化标签
form：表单; calender, date
esm：es module, 1、检查特定的属性和方法

   !!navigator.geolocation // 检查浏览器是否支持geolocation
   !!window.localStorage // 检查浏览器是否支持localStorage
   !!window.Worker // 检查浏览器是否支持Worker

2、创建一个元素，看看特定元素，有没有属性和方法

   document.createElement('canvas').getContext('2d') // 检查浏览器是否支持canvas
   document.createElement('video').canPlayType('video/mp4') // 检查浏览器是否支持video

3、第三方库 http: // modernizr.cn/

jump HTML中meta的作用？

1、设置页面编码 2、设置页面的viewport，让页面自适应屏幕 3、设置页面的作者 4、设置页面的描述 5、设置页面的关键词 6、设置页面的刷新时间及重定向链接

HTML的标签有哪些可以优化SEO

1、meta 标签中的相关属性 <meta name="keywords" content=""> <meta name="description" content=""> <meta name="author" content=""> 2、标签：title meta header nav article footer aside

前提: 1、首先保证是SSR 2、meta 中相关属性 3、语意化标签，以结构化为主。费效比：浏览器对页面渲染的效率，而不是指页面的体积。

DOM和BOM有什么区别

JavaScript 在浏览器环境下，一般由三部分组成

ECMAScript ：描述了JS的语法和基本对象
DOM 文档对象模型，document. API
BOM 浏览器对象模型，browser. API

如何实现移动端适配

媒体查询 @media (min-width: 320px) and (max-width: 480px) {}
rem @font-face { font-family: "iconfont"; src: url('../fonts/iconfont.eot'); }
flex布局 .flex-container { display: flex; flex-direction: row; justify-content: center; align-items: center; }
媒体查询 + rem @media (min-width: 320px) and (max-width: 480px) { .flex-container { font-size: 0.5rem; } }

1px 问题如何解决

伪元素 .border-bottom::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #ccc; transform: scaleY(0.5); transform-origin: center; z-index: 1; }
viewport + rem 实现(常用) <meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
使用border-image实现 .border-bottom-1px { border-width: 0 0 1px 0; -webkit-border-image: url(linenew.png) 0 0 2 0 stretch; border-image: url(linenew.png) 0 0 2 0 stretch; }
box-shadow模拟边框 .box-shadow-1px { box-shadow: inset 0px -1px 1px -1px #c8c7cc; }

如何禁用页面中的右键、打印、另存为、复制等功能

   // 禁止右键
   document.oncontextmenu = function () {
      return false;
   }
   document.onkeydown = function (e) {
      if (e.ctrlKey && (e.keyCode == 83 || e.keyCode == 85)) {
         return false;
      }
   }
   document.onmousedown = function (e) {
      if(e.button === 2) {
         return false;
      }
   }
   // 禁止打印
   window.print = function () {
      return false;
   }
   // 禁止选择
   document.onselectstart = function () {
      return false;
   }
   // 禁止复制
   document.oncopy = function () {
      return false;
   }
   // 禁止f12
   document.onkeydown = function () {
      if (event.keyCode === 123) {
         return false;
      }
   }

href="javascript:viod(0);"和href="#"区别

href="#"：跳转到页面的锚点，即跳转到页面顶部。 href="javascript:void(0);"：不跳转，但是可以阻止默认事件，比如阻止a标签的点击事件。

对target="_blank"的理解？有什么安全问题？如何防范

target="_blank"：表示在新窗口中打开链接。类似于 window.open ，当前子页面会拿到父页面的句柄。 window.opener : 父页面的 window 对象。

if(window.opener) window.opener.location.href = 'https://www.baidu.com';

<a href="https://www.baidu.com" target="_blank" rel="noopener noreferer">baidu</a>

let pathWindow = window.open('https://www.baidu.com');
pathWindow.opener = null; // 关闭父页面的引用

安全性问题：

浏览器默认不允许在新窗口中打开链接，除非用户允许。
默认情况下，新窗口中的内容可能与当前窗口不同源，从而导致安全漏洞。

如何防范：

在网站中，使用target="_blank"时，应该添加rel="noopener noreferrer"，以明确表示新窗口与当前窗口不在同一个源中。
或者使用JavaScript的window.open()方法，并指定target="_blank"，这样可以明确指定新窗口与当前窗口不在同一个源中。

简述页面的存储区别？什么是本地存储？怎么做离线缓存？

浏览器存储：浏览器存储分为本地存储和会话存储。

本地存储：浏览器关闭后数据保留，下次打开页面数据还在。
会话存储：浏览器关闭后数据丢失，下次打开页面数据丢失。

本地存储：

本地存储分为localStorage和sessionStorage。
localStorage：浏览器关闭后数据保留，下次打开页面数据还在。
sessionStorage：浏览器关闭后数据丢失，下次打开页面数据丢失。

离线缓存：
- indexedDB // webSQL ---> IndexedDB是一种在浏览器端存储数据的方式;是一个key-value型的数据库
- application cache // APPCache 是基于HTML5 的一种使WEB 浏览器可以缓存应用程序资源
  - pwa ---> Progressive Web Apps // 渐进式Web应用
  - service worker // Service Worker 是一个运行在浏览器后台的 JavaScript 线程，它拦截网络请求，并做出相应的处理，从而实现离线缓存、推送消息、后台同步等功能。

什么是canvas，什么时候用canvas

canvas 画布
画布的用途：绘图：比如画图，画线，画圆，画矩形，画文字，画图片等。

####　什么是PWA

PWA：Progressive Web Apps，渐进式网页应用，是一种新的网页应用形式，它将网页应用与原生应用进行比较，以获得更好的用户体验。
核心技术：Service Worker、Web App Manifest、App Shell模式
PWA的特点：

离线可用：PWA 可以离线运行，即使没有网络连接，用户也可以访问应用。
快速加载：PWA 的加载速度比原生应用更快，用户可以更快地访问应用。
更好的用户体验：PWA 提供了更好的用户体验，如快速加载、离线可用等。

什么是shadow DOM

Shadow DOM 是一种为 HTML 元素创建私有文档片段的技术。它允许为元素创建一个私有的 DOM 树，该树与元素的 DOM 树分离，并具有自己的 CSS 命名空间。 web component 做到真正的组件化
原生规范，无需框架
原生使用，无需编译
真正意义上的 css scope

   const shadowRoot = document.querySelector('#my-element').attachShadow({mode: 'open'});
   shadowRoot.innerHTML = '<style>h1 { color: red; }</style><h1>Hello Shadow DOM!</h1>';
   customElements.define('my-element', class extends HTMLElement {
      // 构造函数
      connectedCallback() {
         // 插入到 DOM 后执行
         const showRoot = this.attachShadow({mode: 'open'});
         showRoot.innerHTML = `showRoot`;
      }
   })

iframe 有哪些应用

微前端
嵌套页面
ajax 上传文件
跨域
广告

如何处理 iframe 通信

window.postMessage // 浏览器同源之间可以通信
父窗口和子窗口通过 window.name、 localStorage、 sessionStorage、 cookie进行通信
父窗口和子窗口通过DOM跨域进行通信：
1. window.open(url, target, features)
2. window.open(url, target, features, replace)
3. window.opener.postMessage、window.parent.postMessage、window.top.postMessage、window.frameElement.postMessage

浏览器的渲染和布局逻辑是什么

DOM 树构建 -> CSS 树构建 -> 渲染树构建 -> 布局 -> 渲染

页面的重绘和重排（回流）是什么

重绘：样式的修改、元素的大小、位置的修改、元素的显示隐藏、元素的内容修改但不会影响页面的尺寸和布局时都会引起重绘
回流：样式的修改、元素的大小、位置的修改、元素的显示隐藏、元素的内容修改会影响页面的尺寸和布局时都会引起回流
回流一定会触发重绘，重绘不一定会触发回流

怎样计算首屏和白屏的时间？常统计的页面性能数据指标包括那些

首屏和白屏时间：
1. 首屏渲染完成时间 = 首屏渲染完成时间 - 首次请求时间 - 首次 paint时间；
2. 白屏时间 = 首次 paint时间 - 首次请求时间；
页面性能数据指标包括：
1. FP First Paint：首屏绘制；
2. FCP First Contentful Paint：首屏内容绘制；
PerformanceObserver // 性能监控

页面上有哪些领域可以做进一步的性能优化

visibility: hidden --> display: none
减少图片数量
避免使用 table
减少 DOM 层级
dom insert -- fragment // 减少 DOM 操作
requestIdelCallback // 减少任务队列
FCP CLS FID

浏览器之间的线程调度是怎么做的?

● 最新的Chrome浏览器包括：1个浏览器主进程，1个GPU进程，1个网络进程，多个渲染进程，和多个插件进程；

  ○ 浏览器进程： 负责控制浏览器除标签页外的界面，包括地址栏、书签、前进后退按钮等，以及负责与其他进程的协调工作，同时提供存储功能

  ○ GPU进程：负责整个浏览器界面的渲染。Chrome刚开始发布的时候是没有GPU进程的，而使用GPU的初衷是为了实现3D CSS效果，只是后面网页、Chrome的UI界面都用GPU来绘制，这使GPU成为浏览器普遍的需求，最后Chrome在多进程架构上也引入了GPU进程

  ○ 网络进程：负责发起和接受网络请求，以前是作为模块运行在浏览器进程一时在面的，后面才独立出来，成为一个单独的进程

  ○ 插件进程：主要是负责插件的运行，因为插件可能崩溃，所以需要通过插件进程来隔离，以保证插件崩溃也不会对浏览器和页面造成影响

  ○ 渲染进程：负责控制显示tab标签页内的所有内容，核心任务是将HTML、CSS、JS转为用户可以与之交互的网页，排版引擎Blink和JS引擎V8都是运行在该进程中，默认情况下Chrome会为每个Tab标签页创建一个渲染进程

● 渲染进程中的线程

  ○ GUI渲染线程：负责渲染页面，解析html和CSS、构建DOM树、CSSOM树、渲染树、和绘制页面，重绘重排也是在该线程执行

  ○ JS引擎线程：一个tab页中只有一个JS引擎线程(单线程)，负责解析和执行JS。它GUI渲染进程不能同时执行，只能一个一个来，如果JS执行过长就会导致阻塞掉帧

  ○ 计时器线程：指setInterval和setTimeout，因为JS引擎是单线程的，所以如果处于阻塞状态，那么计时器就会不准了，所以需要单独的线程来负责计时器工作

  ○ 异步http请求线程： XMLHttpRequest连接后浏览器开的一个线程，比如请求有回调函数，异步线程就会将回调函数加入事件队列，等待JS引擎空闲执行

  ○ 事件触发线程：主要用来控制事件循环，比如JS执行遇到计时器，AJAX异步请求等，就会将对应任务添加到事件触发线程中，在对应事件符合触发条件触发时，就把事件添加到待处理队列的队尾，等JS引擎处理

Chrome为例，有四种进程模型，分别是

● Process-per-site-instance：默认模式。访问不同站点创建新的进程，在旧页面中打开的新页面，且新页面与旧页面属于同一站点的话会共用一个进程不会创建

● Process-per-site：同一站点使用同一进程

● Process-per-tab：每一个标签页都创建新的进程

● Single Process：单进程模式

线程模型中的线程都是干嘛的呢？

● MessagePumpForIO：处理进程间通信的线程，在Chrome中，这类线程都叫做IO线程

● MessagePumpForUI：处理UI的线程用的

● MessagePumpDefault：一般的线程用到的

● 典型进程通信方式有：

    ● 管道通信：就是操作系统在内核中开辟一段缓冲区，进程1可以将需要交互的数据拷贝到这个缓冲区里，进程2就可以读取了

    ● 消息队列通信：消息队列就是用户可以添加和读取消息的列表，消息队列里提供了一种从一个进程向另一个进程发送数据块的方法，不过和管道通信一样每个数据块有最大长度限制

    ● 共享内存通信：就是映射一段能被其他进程访问的内存，由一个进程创建，但多个进程都可以访问，共享进程最快的是IPC方式

    ● 信号量通信：比如信号量初始值是1，进程1来访问一块内存的时候，就把信号量设为0，然后进程2也来访问的时候看到信号量为0，就知道有其他进程在访问了，就不访问了

    ● socket：其他的都是同一台主机之间的进程通信，而在不同主机的进程通信就要用到socket的通信方式了，比如发起http请求，服务器返回数据