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

文档类型声明，doctype，说明这个页面是用什么来写的

h5 html5 有一个比较宽松的语法，基本上完全向后兼容。

h4.0.1

【资料图】

<b></b>，<p font='5'></p>

strict 结构中不能有出现格式或表现的内容

tansitional

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

根据结构化内容选择合适标签

利于SEO

代码可读性更好

标签可以加上 alt、title

accessibility， 方便一些其他社保解析

标签：metaheadnav

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

canvasvideoaudio

本地缓存支持localStorageWorker

article，footer，header

esm —— es module，scrip是不是不在需要type属性了

检查特定属性和方法：

！！navigator.geolocation，window.localStorage，window.Worker

创建一个元素，看特定元素，是否由属性和方法：

document.createElement('canvas').getContext（）

document.createElement('video').canPlayType;

HTML中meta的作用？

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

meta标签的 name，description，keywords

标签：title，meta，header，nav

首先保证SSR的，服务端渲染    ··//单页面应用是 客户端渲染

meta标签中相关属性

语义化标签以结构化为主

DOM和BOM有什么区别？

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

ECMAScipt 核心，描述了JS语法和基本对象

DOM 文档对象模型，有一些API 可以操作文档，BOM的window子对象，document

BOM 浏览器对象模型，browser，有一些API：history(历史对象)、location(位置对象)、screen(显示器对象)，可以操作浏览器，BOM顶级对象是window(核心)，包含location、navigator、document

如何实现移动端适配？

响应式布局 媒体查询 @media实现一套HTML配合多套CSS 适配

rem布局    /    vw，vh布局 实现不同设备参照相同比例适配

1px问题：先放大 200%，然后 scale(0.5)

rem方案：基于html的font-size的倍数。在不同的设备上设置一个合适的初始值，当设备发生变化font-size就会自动等比适配大小，从而在不同的设备上表现统一。

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

// 右键 判断点击状态码，触发时返回false实现禁用效果 document.onmousedown = function(event) { if(event.button === 2) { return false; } } // 复制

href="javascript：void(0)"和href="#"区别是什么？

href="#"：锚点默认是 #top，会跳转到页面顶端

javascript：void(0)一个死链接

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

新页面能通过window。opener获取部分原页面的window对象，某些属性不能访问是被同源策略限制。打开的兴业与原窗口共用同一个一个进程，同时消耗系统资源，原页面也会受到影响。

尽量不使用target=”_blank"一定要用可以加上rel="nopenner"或者rel="noreferrer",这样新窗口的windo.opener就是null了，而且会让新窗口运行在独立进程中        rel="noopener noreferer"

// 使用window打开可以直接将 window.opener 赋值为 // 赋值window.open对象为一个变量，为变量的opener属性赋值为 var otherWindow = window.open('xxx'); otherWindow.opener = null;

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

cookie 每个cookie 不能超过 4kb； 会随着http请求头信息一起发送，增加网络流量

存取：document.cookie = "键=值"每个域 20个；可以控制过期时间，使其不会长期有效，可以加密

默认会话性cookie在浏览器关闭失效，持久性cookie会保存在硬盘中

设置过期时间：Response.Cookies(“LastView”).Expires = dateadd(“d”,N,date)

session依赖于cookie，默认两周过期，键值对形式存储

【key，value】

Web storage

localStorage、sessionStorage —— 5MB

indexDB 【webSQL】

application cache

pwa

service worker

HTML5的新特性，允许浏览器在本地存储页面所需要的资源，使得页面离线也可以访问

H5应用缓存程序：可以离线浏览、速度快、减少服务器负载

什么是canvas？什么时候需要使用canvas？

画布        CSS，DIV，普通网页

SVG，HTML处理矢量图的能力不足，一种基于XML的图像文件格式，可缩放矢量图，缩放不失真

canvas 2d：绘制几何图形    

canvas     WebGL，OpenGL 的ES 规范，在web 端实现，利用 GPU去渲染一些 3d/2d 的图形

什么是PWA？

渐进式网页应用。     核心技术：

app mainfest

service worker

web push

什么是Shadow DOM？

Web comment 真正的组件化

原生规范，无需框架

原生使用，无需编译

真正意义上的 CSS scope

customElements.define('shadow-test', class extends HTMLElemenet { connectedCallback() { const shadow = this.attachShadow({mode: 'open'}) shadow.innerHTML = "this is a shadow dom" } })

iframe有哪些应用？

最常见的一种微前端首单

ajax上传文件

广告

跨域

如处理iframe通信？

同域下

document.demain = "baidu.com"

iframe.contentWindow.postMessage('xxxxx', '*');

什么是web worker？为什么要使用web worker?

? 什么是SSO打通？怎么做前端沙盒模式？

Web Workers是一个JavaScript的脚本，从执行的HTML页面，独立脚本的可能也已经从同一HTML页面执行。作用是为JavaScript创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。

Web worker 通常能够更有效地利用多核 CPU。

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

浏览器收到HTML文档，产生渲染任务，在事件循环机制下，开启渲染流程

DOM 树构建，解析HTML，js

CSS 树构建，下载解析CSS

渲染树构建

页面布局

页面绘制

页面的重绘回流是什么？

**回流**在渲染树中的一部分（或者全部）因为元素的规模尺寸、布局 、显隐等改变而需要重新构建，这就称为回流。每次页面至少会发生一次回流，就是在页面第一次渲染的时候。导致节点位置发生变化，此时就会触发浏览器回流并重新生成渲染树。回流意味着渲染树的节点发生改变，需重新计算并生成渲染树，导致渲染树的全部或部分发生变化

可理解为将整个网页填白，对内容重新渲染一次。

添加或删除可见的DOM元素、元素位置发生变化、页面开始渲染的时候、浏览器窗口大小改变

**重绘**

在渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，不影响布局，就称为重绘。背景色、样式发生改变

回流对浏览器性能的消耗高于重绘且回流一定伴随重绘，重绘却不一定伴随回流。

为何回流一定伴随重绘？整个节点的位置都变了，肯定要重新渲染它的外观属性啊！

回流必定引发重绘，重绘不一定引发回流，可利用该法则解决一些因为回流重绘而引发的性能问题。在优化性能前，需了解什么情况可能产生性能问题，以下罗列一些常见情况。

改变窗口大小 修改盒模型 增删样式 重构布局 重设尺寸 改变字体 改动文字

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

首屏时间是指用户打开一个网站时，直到浏览器首页面内容渲染完成的时间。

FP     FCP    PerformanceObserver

一般认为解析完的时刻，或者开始渲染标签就是该页面白屏结束的时间。

new Date.getTime() - performance.timing.navigationStart

减少白屏事件：DNS预解析、减少http请求、使用Defer加载JS、图片优化，采用svg 图片或字体图标

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

visibility:hidden --> display:none

避免使用 table

避免层级过多

dom insert -- fragment

requestIdelCallback

使用CDN，避免使用iframe

图片压缩，js代码相关优化，减少递归

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请求，服务器返回数据