HTML DOCTYPE的含義？什么是HTML的標(biāo)準(zhǔn)模式與混雜模式？

• 文檔類型聲明，doctype，說(shuō)明這個(gè)頁(yè)面是用什么來(lái)寫的

• h5 html5 有一個(gè)比較寬松的語(yǔ)法，基本上完全向后兼容。

• h4.0.1

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

• strict 結(jié)構(gòu)中不能有出現(xiàn)格式或表現(xiàn)的內(nèi)容

• tansitional

HTML5有哪些語(yǔ)義化標(biāo)簽及其特性？HTML元素有哪些分類與特性？

根據(jù)結(jié)構(gòu)化內(nèi)容選擇合適標(biāo)簽

• 利于SEO

• 代碼可讀性更好

• 標(biāo)簽可以加上 alt、title

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

• 標(biāo)簽：meta?head?nav

如何檢測(cè)瀏覽器是否支持HTML5特性？

• canvas?video?audio

• 本地緩存支持localStorage?Worker

• article，footer，header

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

檢查特定屬性和方法：

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

創(chuàng)建一個(gè)元素，看特定元素，是否由屬性和方法：

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

document.createElement('video').canPlayType;

HTML中meta的作用？

HTML的標(biāo)簽有哪些可以優(yōu)化SEO？

meta標(biāo)簽的?name，description，keywords

標(biāo)簽：title，meta，header，nav

1. 首先保證SSR的，服務(wù)端渲染????··//單頁(yè)面應(yīng)用是 客戶端渲染

2. meta標(biāo)簽中相關(guān)屬性

3. 語(yǔ)義化標(biāo)簽以結(jié)構(gòu)化為主

DOM和BOM有什么區(qū)別？

JavaScript在瀏覽器環(huán)境下，一般由三部分組成

• ECMAScipt 核心，描述了JS語(yǔ)法和基本對(duì)象

• DOM 文檔對(duì)象模型，有一些API 可以操作文檔，BOM的window子對(duì)象，document

• BOM 瀏覽器對(duì)象模型，browser，有一些API：history(歷史對(duì)象)、location(位置對(duì)象)、screen(顯示器對(duì)象)，可以操作瀏覽器，BOM頂級(jí)對(duì)象是window(核心)，包含location、navigator、document

如何實(shí)現(xiàn)移動(dòng)端適配？

響應(yīng)式布局 媒體查詢 @media實(shí)現(xiàn)一套HTML配合多套CSS 適配

rem布局????/????vw，vh布局 實(shí)現(xiàn)不同設(shè)備參照相同比例適配

1px問(wèn)題：先放大 200%，然后 scale(0.5)

rem方案：基于html的font-size的倍數(shù)。在不同的設(shè)備上設(shè)置一個(gè)合適的初始值，當(dāng)設(shè)備發(fā)生變化font-size就會(huì)自動(dòng)等比適配大小，從而在不同的設(shè)備上表現(xiàn)統(tǒng)一。

如何禁用頁(yè)面中的右鍵、打印、另存為、復(fù)制等功能？

// 右鍵 判斷點(diǎn)擊狀態(tài)碼，觸發(fā)時(shí)返回false實(shí)現(xiàn)禁用效果 document.onmousedown = function(event) { if(event.button === 2) { return false; } } // 復(fù)制

href="javascript:void(0)"和href="#"區(qū)別是什么？

href="#"：錨點(diǎn)默認(rèn)是 #top，會(huì)跳轉(zhuǎn)到頁(yè)面頂端

javascript:void(0)一個(gè)死鏈接

對(duì)target="_blank"的理解？有什么安全性問(wèn)題？如何防范？

新頁(yè)面能通過(guò)window。opener獲取部分原頁(yè)面的window對(duì)象，某些屬性不能訪問(wèn)是被同源策略限制。打開的興業(yè)與原窗口共用同一個(gè)一個(gè)進(jìn)程，同時(shí)消耗系統(tǒng)資源，原頁(yè)面也會(huì)受到影響。

盡量不使用target=”_blank"?一定要用可以加上rel="nopenner"或者rel="noreferrer",這樣新窗口的windo.opener就是null了，而且會(huì)讓新窗口運(yùn)行在獨(dú)立進(jìn)程中????????rel="noopener noreferer"

// 使用window打開可以直接將 window.opener 賦值為 // 賦值window.open對(duì)象為一個(gè)變量，為變量的opener屬性賦值為 var otherWindow = window.open('xxx'); otherWindow.opener = null;

簡(jiǎn)述頁(yè)面的存儲(chǔ)區(qū)別？什么是本地存儲(chǔ)？怎么做離線緩存？

1. cookie 每個(gè)cookie 不能超過(guò) 4kb； 會(huì)隨著http請(qǐng)求頭信息一起發(fā)送，增加網(wǎng)絡(luò)流量

   存?。?code>document.cookie = "鍵=值"每個(gè)域 20個(gè)；可以控制過(guò)期時(shí)間，使其不會(huì)長(zhǎng)期有效，可以加密

   默認(rèn)會(huì)話性cookie在瀏覽器關(guān)閉失效，持久性cookie會(huì)保存在硬盤中

   設(shè)置過(guò)期時(shí)間：Response.Cookies(“LastView”).Expires = dateadd(“d”,N,date)

   session依賴于cookie，默認(rèn)兩周過(guò)期，鍵值對(duì)形式存儲(chǔ)

   【key，value】

2. Web storage

   localStorage、sessionStorage —— 5MB

3. indexDB 【webSQL】

4. application cache

1. pwa

2. service worker

   HTML5的新特性，允許瀏覽器在本地存儲(chǔ)頁(yè)面所需要的資源，使得頁(yè)面離線也可以訪問(wèn)

H5應(yīng)用緩存程序：可以離線瀏覽、速度快、減少服務(wù)器負(fù)載

什么是canvas？什么時(shí)候需要使用canvas？

畫布????????CSS，DIV，普通網(wǎng)頁(yè)

SVG，HTML處理矢量圖的能力不足，一種基于XML的圖像文件格式，可縮放矢量圖，縮放不失真

canvas 2d：繪制幾何圖形????

canvas ????WebGL，OpenGL 的ES 規(guī)范，在web 端實(shí)現(xiàn)，利用 GPU去渲染一些 3d/2d 的圖形

什么是PWA？

漸進(jìn)式網(wǎng)頁(yè)應(yīng)用。 ????核心技術(shù)：

• app mainfest

• service worker

• web push

什么是Shadow DOM？

Web comment 真正的組件化

• 原生規(guī)范，無(wú)需框架

• 原生使用，無(wú)需編譯

• 真正意義上的 CSS scope

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

iframe有哪些應(yīng)用？

• 最常見的一種微前端首單

• ajax上傳文件

• 廣告

• 跨域

如處理iframe通信？

同域下

document.demain = "baidu.com"

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

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

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

Web Workers是一個(gè)JavaScript的腳本，從執(zhí)行的HTML頁(yè)面，獨(dú)立腳本的可能也已經(jīng)從同一HTML頁(yè)面執(zhí)行。作用是為JavaScript創(chuàng)造多線程環(huán)境，允許主線程創(chuàng)建 Worker 線程，將一些任務(wù)分配給后者運(yùn)行。

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

瀏覽器的渲染和布局邏輯是什么？

瀏覽器收到HTML文檔，產(chǎn)生渲染任務(wù)，在事件循環(huán)機(jī)制下，開啟渲染流程

• DOM 樹構(gòu)建，解析HTML，js

• CSS 樹構(gòu)建，下載解析CSS

• 渲染樹構(gòu)建

• 頁(yè)面布局

• 頁(yè)面繪制

頁(yè)面的重繪回流是什么？

**回流**在渲染樹中的一部分（或者全部）因?yàn)樵氐囊?guī)模尺寸、布局 、顯隱等改變而需要重新構(gòu)建，這就稱為回流。每次頁(yè)面至少會(huì)發(fā)生一次回流，就是在頁(yè)面第一次渲染的時(shí)候。導(dǎo)致節(jié)點(diǎn)位置發(fā)生變化，此時(shí)就會(huì)觸發(fā)瀏覽器回流并重新生成渲染樹。回流意味著渲染樹的節(jié)點(diǎn)發(fā)生改變，需重新計(jì)算并生成渲染樹，導(dǎo)致渲染樹的全部或部分發(fā)生變化

可理解為將整個(gè)網(wǎng)頁(yè)填白，對(duì)內(nèi)容重新渲染一次。

添加或刪除可見的DOM元素、元素位置發(fā)生變化、頁(yè)面開始渲染的時(shí)候、瀏覽器窗口大小改變

**重繪**

在渲染樹中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀、風(fēng)格，不影響布局，就稱為重繪。?背景色、樣式發(fā)生改變

回流對(duì)瀏覽器性能的消耗高于重繪且回流一定伴隨重繪，重繪卻不一定伴隨回流。

為何回流一定伴隨重繪？整個(gè)節(jié)點(diǎn)的位置都變了，肯定要重新渲染它的外觀屬性??！

回流必定引發(fā)重繪，重繪不一定引發(fā)回流，可利用該法則解決一些因?yàn)榛亓髦乩L而引發(fā)的性能問(wèn)題。在優(yōu)化性能前，需了解什么情況可能產(chǎn)生性能問(wèn)題，以下羅列一些常見情況。

改變窗口大小 修改盒模型 增刪樣式 重構(gòu)布局 重設(shè)尺寸 改變字體 改動(dòng)文字

怎樣計(jì)算首屏和白屏的時(shí)間？常統(tǒng)計(jì)的頁(yè)面性能數(shù)據(jù)指標(biāo)包括？

首屏?xí)r間是指用戶打開一個(gè)網(wǎng)站時(shí)，直到瀏覽器首頁(yè)面內(nèi)容渲染完成的時(shí)間。

FP ????FCP????PerformanceObserver

一般認(rèn)為解析完的時(shí)刻，或者開始渲染標(biāo)簽就是該頁(yè)面白屏結(jié)束的時(shí)間。

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

減少白屏事件：DNS預(yù)解析、減少http請(qǐng)求、使用Defer加載JS、圖片優(yōu)化，采用svg 圖片或字體圖標(biāo)

頁(yè)面上有哪些領(lǐng)域可以做進(jìn)一步的性能優(yōu)化？

• visibility:hidden --> display:none

• 避免使用 table

• 避免層級(jí)過(guò)多

• dom insert -- fragment

• requestIdelCallback

• 使用CDN，避免使用iframe

• 圖片壓縮，js代碼相關(guān)優(yōu)化，減少遞歸

FCP CLS FID

瀏覽器之間的線程調(diào)度是怎么做的？

● 最新的Chrome瀏覽器包括：1個(gè)瀏覽器主進(jìn)程，1個(gè)GPU進(jìn)程，1個(gè)網(wǎng)絡(luò)進(jìn)程，多個(gè)渲染進(jìn)程，和多個(gè)插件進(jìn)程； ○ 瀏覽器進(jìn)程： 負(fù)責(zé)控制瀏覽器除標(biāo)簽頁(yè)外的界面，包括地址欄、書簽、前進(jìn)后退按鈕等，以及負(fù)責(zé)與其他進(jìn)程的協(xié)調(diào)工作，同時(shí)提供存儲(chǔ)功能 ○ GPU進(jìn)程：負(fù)責(zé)整個(gè)瀏覽器界面的渲染。Chrome剛開始發(fā)布的時(shí)候是沒有GPU進(jìn)程的，而使用GPU的初衷是為了實(shí)現(xiàn)3D CSS效果，只是后面網(wǎng)頁(yè)、Chrome的UI界面都用GPU來(lái)繪制，這使GPU成為瀏覽器普遍的需求，最后Chrome在多進(jìn)程架構(gòu)上也引入了GPU進(jìn)程 ○ 網(wǎng)絡(luò)進(jìn)程：負(fù)責(zé)發(fā)起和接受網(wǎng)絡(luò)請(qǐng)求，以前是作為模塊運(yùn)行在瀏覽器進(jìn)程一時(shí)在面的，后面才獨(dú)立出來(lái)，成為一個(gè)單獨(dú)的進(jìn)程 ○ 插件進(jìn)程：主要是負(fù)責(zé)插件的運(yùn)行，因?yàn)椴寮赡鼙罎ⅲ孕枰ㄟ^(guò)插件進(jìn)程來(lái)隔離，以保證插件崩潰也不會(huì)對(duì)瀏覽器和頁(yè)面造成影響 ○ 渲染進(jìn)程：負(fù)責(zé)控制顯示tab標(biāo)簽頁(yè)內(nèi)的所有內(nèi)容，核心任務(wù)是將HTML、CSS、JS轉(zhuǎn)為用戶可以與之交互的網(wǎng)頁(yè)，排版引擎Blink和JS引擎V8都是運(yùn)行在該進(jìn)程中，默認(rèn)情況下Chrome會(huì)為每個(gè)Tab標(biāo)簽頁(yè)創(chuàng)建一個(gè)渲染進(jìn)程 ● 渲染進(jìn)程中的線程 ○ GUI渲染線程：負(fù)責(zé)渲染頁(yè)面，解析html和CSS、構(gòu)建DOM樹、CSSOM樹、渲染樹、和繪制頁(yè)面，重繪重排也是在該線程執(zhí)行 ○ JS引擎線程：一個(gè)tab頁(yè)中只有一個(gè)JS引擎線程(單線程)，負(fù)責(zé)解析和執(zhí)行JS。它GUI渲染進(jìn)程不能同時(shí)執(zhí)行，只能一個(gè)一個(gè)來(lái)，如果JS執(zhí)行過(guò)長(zhǎng)就會(huì)導(dǎo)致阻塞掉幀 ○ 計(jì)時(shí)器線程：指setInterval和setTimeout，因?yàn)镴S引擎是單線程的，所以如果處于阻塞狀態(tài)，那么計(jì)時(shí)器就會(huì)不準(zhǔn)了，所以需要單獨(dú)的線程來(lái)負(fù)責(zé)計(jì)時(shí)器工作 ○ 異步http請(qǐng)求線程： XMLHttpRequest連接后瀏覽器開的一個(gè)線程，比如請(qǐng)求有回調(diào)函數(shù)，異步線程就會(huì)將回調(diào)函數(shù)加入事件隊(duì)列，等待JS引擎空閑執(zhí)行 ○ 事件觸發(fā)線程：主要用來(lái)控制事件循環(huán)，比如JS執(zhí)行遇到計(jì)時(shí)器，AJAX異步請(qǐng)求等，就會(huì)將對(duì)應(yīng)任務(wù)添加到事件觸發(fā)線程中，在對(duì)應(yīng)事件符合觸發(fā)條件觸發(fā)時(shí)，就把事件添加到待處理隊(duì)列的隊(duì)尾，等JS引擎處理

Chrome為例，有四種進(jìn)程模型，分別是 ● Process-per-site-instance：默認(rèn)模式。訪問(wèn)不同站點(diǎn)創(chuàng)建新的進(jìn)程，在舊頁(yè)面中打開的新頁(yè)面，且新頁(yè)面與舊頁(yè)面屬于同一站點(diǎn)的話會(huì)共用一個(gè)進(jìn)程不會(huì)創(chuàng)建 ● Process-per-site：同一站點(diǎn)使用同一進(jìn)程 ● Process-per-tab：每一個(gè)標(biāo)簽頁(yè)都創(chuàng)建新的進(jìn)程 ● Single Process：?jiǎn)芜M(jìn)程模式 線程模型中的線程都是干嘛的呢？ ● MessagePumpForIO：處理進(jìn)程間通信的線程，在Chrome中，這類線程都叫做IO線程 ● MessagePumpForUI：處理UI的線程用的 ● MessagePumpDefault：一般的線程用到的 ● 典型進(jìn)程通信方式有： ● 管道通信：就是操作系統(tǒng)在內(nèi)核中開辟一段緩沖區(qū)，進(jìn)程1可以將需要交互的數(shù)據(jù)拷貝到這個(gè)緩沖區(qū)里，進(jìn)程2就可以讀取了 ● 消息隊(duì)列通信：消息隊(duì)列就是用戶可以添加和讀取消息的列表，消息隊(duì)列里提供了一種從一個(gè)進(jìn)程向另一個(gè)進(jìn)程發(fā)送數(shù)據(jù)塊的方法，不過(guò)和管道通信一樣每個(gè)數(shù)據(jù)塊有最大長(zhǎng)度限制 ● 共享內(nèi)存通信：就是映射一段能被其他進(jìn)程訪問(wèn)的內(nèi)存，由一個(gè)進(jìn)程創(chuàng)建，但多個(gè)進(jìn)程都可以訪問(wèn)，共享進(jìn)程最快的是IPC方式 ● 信號(hào)量通信：比如信號(hào)量初始值是1，進(jìn)程1來(lái)訪問(wèn)一塊內(nèi)存的時(shí)候，就把信號(hào)量設(shè)為0，然后進(jìn)程2也來(lái)訪問(wèn)的時(shí)候看到信號(hào)量為0，就知道有其他進(jìn)程在訪問(wèn)了，就不訪問(wèn)了 ● socket：其他的都是同一臺(tái)主機(jī)之間的進(jìn)程通信，而在不同主機(jī)的進(jìn)程通信就要用到socket的通信方式了，比如發(fā)起http請(qǐng)求，服務(wù)器返回?cái)?shù)據(jù)