1.html5新特性?

1. 語義化標簽：header footer nav section artical aside
2. 媒體標簽：qudio video （control ?autoplay loop ） source標簽
3. 表單新增屬性：輸入類型type:email url data month week color；新增屬性：placeholder required autofocus multiple
4. 本地存儲：sessionstorage頁面關閉自動清除 localstorage 沒有時間限制
5. Dom查詢 document.queryselector ?document.queryselectorall
6. 其他：canvas geolocation 拖拽draggable

2.Css3新特性：

1. 選擇器：屬性，結構偽類，偽類
2. 背景和邊框：background-size box-shadow
3. 文本控制：text-shadow text-decoraction
4. 布局：flexbox彈性盒子 grid網格布局
5. 轉換和動畫：transform animation

3.Js/ts區別

????????類型系統? ? ? ? ? ? ? ? 編譯? ? ? ? 類型檢查? ?代碼提示? ?泛型編程? 接口和抽象? ?修飾符

1. Js 動態類型語言 無需編譯 ?運行時 ?????弱 ????不支持 ?????不支持 ?????不支持訪問
2. Ts 靜態類型語言 編譯成js ??編譯時 ???強 ?????支持 ???????支持 ??????????支持訪問

4.Es6新特性

1. let const代替var let聲明的變量具有塊級作用域 暫時性死區 const常量 一次
2. 模板字符串 ?在字符串中插入變量和表達式，反引號~
3. 解構賦值 從數組和對象中提取值并賦給變量 數組解構、對象解構
4. 擴展運算符
5. Promise 異步問題，解決異步回調
6. 類 class關鍵字聲明類和創建對象
7. 模塊化加載 import export，在模塊中導入或導出變量函數對象

5.Async/await

（1）async 用于申明一個 function 是異步的，返回一個promise對象。

（2）而 await必須在函數內部使用， 用于等待一個異步方法執行完成。等待promise對象的resolved或者rejected狀態。

6.flex響應式（彈性）布局

父元素：display:flex開啟 ?flex-direction主軸方向 flex-wrap是否換行justify-content 項目在主軸對齊方式align-items項目在交叉軸對齊方式

子元素; order順序 flex-grow放大 flex-shrink 縮小 flex-basis占據空間

7.Vue3/2區別

Vue2 選項式api 支持單個根節點 響應式原理es5的defineproperty 響應式實現方式data中 指令優先級v-for>v-if

生命周期：beforcreate created beforemounte mounted beforeupdate updated beforedstory destoryed

Vue3 組合式api 支持多個根節點 proxy對象 響應式實現方式ref reactive ?v-if>V-for

生命周期：setup onbeforemounte onmounted onbeforeupdate onupdated

8.Element plus element ui

表單el-table 怎么取出當前行的數據：

1. v-slot插槽

9.Echarts

指定圖表的配置項和數據

var option = { title: { text: '示例圖表' }, tooltip: {}, xAxis: { data: ["類別1", "類別2", "類別3", "類別4", "類別5"] }, yAxis: {}, series: [{ name: '數據系列', type: 'bar', // 圖表類型，這里是柱狀圖 data: [5, 20, 36, 10, 10] // 數據源 }] };

10.webpack常用配置

Entry 指定打包入口文件

output輸出的目錄和文件名稱

Module 配置不同的loaders加載器處理不同的模塊

resolve解析

Plugins插件

11.vite配置

Root 項目根目錄

Base 公共基礎路徑

Publicdir公共資源文件夾的路徑

Outdir 輸出目錄默認dist

Assetsdir 靜態資源

Resolve

plugins

12.前端工程化 常見的loader和plugin

Loader函數:babel-loader es6轉換為es5 css-loader解析css style-loader css注入到html文檔中 sass-loader less-loader

Plugin插件；htmlwebpackplugin生成html將jscss引入到html defineplugin定義全局變量

13.git版本控制

Git init ??git push ??git add ?

14.瀏覽器工作原理

輸入地址，dns解析域名到ip地址，與服務器建立連接，服務器返回對應的靜態資源index.html，瀏覽器開始解析，遇到cssjs就請求下載，渲染頁面，執行js代碼。

15.輸入url到頁面展示發生了什么？

dns域名解析 將域名解析成ip地址

tcp連接 三次握手

發送HTTP請求

服務器處理請求返回報文

瀏覽器解析渲染頁面

斷開連接 tcp四次揮手

16.三次握手

客戶端向服務器發送一個syn（同步）報文，表示客戶端請求建立連接，并選擇一個初始序列號。

• 服務器收到syn報文之后，向客戶端發宋syn+ack（同步確認）報文，表示服務端接受連接請求，并確認客戶端的初始序列號，選擇自己的初始序列號。
• 客戶端收到之后，向服務器發宋ack（確認）報文，表示客戶端確認連接建立，并發宋自己的初始序列號。

為什么不是兩次四次。

如果是兩次：客戶端知道服務器能正常接收到自己發送的數據，但是服務器不知道客戶端能否接收到自己發送的數據。

如果是四次：沒必要。

四次揮手

• 客戶端發送（結束）fin報文給服務器,表示不再發送數據。
• 服務器收到，發生ack確認報文給客戶端，表示收到了關閉請求。
• 服務器發送fin結束報文給客戶端，表示服務器也準備關閉連接。
• 客戶端收到，給服務器發送一個ack確認報文，表示確認收到關閉請求。

為什么是四次？

關閉連接時，客戶端向服務器發送結束報文，僅僅表示客戶端不再發送數據，但是還能接收數據。

服務器收到，先回應一個已經收到了的ack應答報文，但是服務器還有數據需要處理和發宋，等到服務端不再發送數據，才發送fin結束報文給客戶端表示同意現在關閉連接。

所以，服務端的ack確認報文和fin結束報文都會分開發送，因此是四次揮手。

17.存儲機制

Cookies sessionstorage localstorage

都是瀏覽器存儲，都存儲在瀏覽器本地，都遵循同源原則

Cookie 生命周期是由服務器端在寫入時就設置好的 存儲空間小存儲登錄驗證信息

localstorage寫入時就存在 需要手動清除 存儲不一變動信息

sessionstorage頁面關閉時自動清除 檢測用戶是否刷新進入頁面

前端給后端發送請求時會自動攜帶cookie的數據

18.http協議

超文本傳輸協議 瀏覽器和萬維網服務器之間互相通信的規則

組成：請求報文：請求行（請求方法URL http版本協議） 請求首部字段 請求內容實體

響應報文：狀態行（http版本 狀態碼 狀態碼原因短語） 響應首部字段 響應內容實體

19.設計模式

創建型模式 ：工廠模式 單例模式 原型模式 建造者模式

結構型模式：適配器 裝飾圈 代理 橋接 組合 享元 外觀

行為型模式 ：策略 。。。。