項目優(yōu)化

1.打包體積過大怎么優(yōu)化的蜻韭？

要優(yōu)化前端打包體積過大的問題，可以考慮以下幾個方面的優(yōu)化措施：
代碼拆分（Code Splitting）：使用工具如Webpack或Rollup等腥椒，將代碼拆分成多個較小的模塊姻几，只加載當前頁面所需的模塊。這樣可以減少首次加載的體積屠列，提高頁面加載速度庵楷。
按需加載（Lazy Loading）：將不常用或首屏不必要的模塊延遲加載罢艾，只在需要時再進行加載。這樣可以減少首屏加載的體積尽纽，提高頁面的響應速度咐蚯。
第三方庫優(yōu)化：如果項目中使用了大量的第三方庫，可以考慮按需引入弄贿，只引入需要的模塊或剔除不必要的功能春锋。也可以使用替代庫或自行實現(xiàn)一些功能，以減少第三方庫的依賴差凹。
圖片優(yōu)化：對圖片進行壓縮和合理的格式選擇期奔，可以減小圖片的體積。使用圖片壓縮工具直奋、選擇適當?shù)膲嚎s算法、使用WebP或AVIF等更高效的圖片格式施禾，都可以有效減少圖片的大小脚线。
代碼優(yōu)化：優(yōu)化代碼的寫法和結(jié)構(gòu)，去除冗余的代碼弥搞、無用的依賴邮绿，減少重復的代碼。使用工具如Tree Shaking攀例、Minification等來簡化和精簡代碼船逮。
資源壓縮：對CSS、JavaScript等靜態(tài)資源進行壓縮粤铭，去除空格挖胃、注釋和不必要的字符，減小資源的體積梆惯。
懶加載和分片預加載：對于長頁面或包含大量圖片的頁面酱鸭，可以使用懶加載和分片預加載技術(shù)，延遲加載頁面的其他部分垛吗，提高初始加載速度凹髓。
緩存策略：合理利用瀏覽器的緩存機制，對經(jīng)常不變的靜態(tài)資源進行緩存怯屉，減少重復的下載請求蔚舀。
服務端渲染（Server-Side Rendering）：對于大型應用或?qū)EO友好性要求較高的應用饵沧，考慮使用服務端渲染技術(shù)，減少客戶端的初始加載體積赌躺。
以上是一些常見的前端打包體積優(yōu)化的方法狼牺，可以根據(jù)具體項目需求和情況選擇合適的優(yōu)化策略。同時寿谴，定期進行代碼審查和性能分析锁右，可以幫助發(fā)現(xiàn)和解決潛在的性能問題。

2.首屏渲染減少白屏時間怎么優(yōu)化的讶泰？

要減少前端首屏渲染的白屏時間咏瑟，可以考慮以下幾個優(yōu)化方案：
代碼拆分和按需加載：將頁面所需的關(guān)鍵代碼拆分成多個較小的模塊，并將非關(guān)鍵代碼延遲加載痪署。這樣可以首先加載頁面渲染所需的關(guān)鍵代碼码泞，減少白屏時間。
資源預加載：使用預加載技術(shù)狼犯，提前加載頁面所需的關(guān)鍵資源余寥，如CSS、JavaScript悯森、字體文件宋舷、圖片等∑耙觯可以使用 <link rel="preload">祝蝠，<link rel="prefetch">，或者使用<script>標簽的async或defer屬性來進行資源預加載幻碱。
骨架屏（Skeleton Screen）：在頁面加載過程中绎狭，可以使用骨架屏填充頁面的主要結(jié)構(gòu)，給用戶一種頁面正在加載的反饋褥傍。這樣可以減少白屏時間的感知儡嘶。
服務端渲染（Server-Side Rendering）：使用服務端渲染技術(shù)，將部分或全部頁面內(nèi)容在服務端完成渲染恍风，然后再將渲染好的HTML返回給客戶端蹦狂。這樣可以在客戶端加載過程中，提供一個有內(nèi)容的頁面朋贬，減少白屏時間鸥咖。
資源優(yōu)化：對CSS進行內(nèi)聯(lián)，避免阻塞渲染兄世。將JavaScript放在頁面底部或使用async或defer屬性啼辣，以避免阻塞頁面渲染。對圖片進行壓縮和懶加載御滩，減小頁面的加載體積鸥拧。
HTTP/2和CDN加速：使用HTTP/2協(xié)議來提高資源加載的效率党远。同時使用CDN加速，將靜態(tài)資源部署到離用戶較近的服務器上富弦，減少網(wǎng)絡延遲沟娱。
壓縮代碼和資源：對CSS、JavaScript等靜態(tài)資源進行壓縮腕柜，去除空格济似、注釋和不必要的字符，減小資源的大小盏缤，提高加載速度砰蠢。
緩存策略：合理設置緩存策略，使用HTTP緩存機制唉铜，將靜態(tài)資源緩存在客戶端台舱，減少重復的請求。
通過采取上述優(yōu)化方案潭流，可以減少前端首屏渲染的白屏時間竞惋，提高用戶的頁面加載體驗。同時灰嫉，還可以使用性能分析工具和瀏覽器開發(fā)者工具來檢測和定位性能瓶頸拆宛，進一步優(yōu)化頁面加載速度。

3.Vue

1.請說一下vue2和vue3的區(qū)別讼撒？哪些不同浑厚？

Vue 3 相對于 Vue 2，有以下幾個主要的區(qū)別和不同之處：
性能提升：Vue 3 進行了重寫和優(yōu)化椿肩，性能相較于 Vue 2 有所提升瞻颂。Vue 3 使用了 Proxy 對象作為數(shù)據(jù)劫持的實現(xiàn)方式豺谈，相比 Vue 2 的 Object.defineProperty郑象，有更好的性能表現(xiàn)。
Composition API：Vue 3 引入了 Composition API茬末，這是一種基于函數(shù)的 API厂榛，提供了更靈活和組合性的方式來組織和復用組件邏輯。相比于 Vue 2 的 Options API丽惭，Composition API 更加直觀击奶、可讀性更高，并且更好地支持 TypeScript责掏。
更好的 TypeScript 支持：Vue 3 對 TypeScript 的支持有所增強柜砾，包括更好的類型推斷和類型定義，使得在開發(fā)過程中能夠更早地捕獲錯誤和提供更好的 IDE 支持换衬。
Teleport：Vue 3 引入了 Teleport 組件痰驱，用于更靈活地移動組件的渲染位置证芭。它可以將組件的內(nèi)容渲染到任意的 DOM 節(jié)點中，而不僅僅是當前組件所在的位置担映。
Fragment 和 Portals：Vue 3 支持使用 Fragment（占位符）來包裹多個子元素废士，并且引入了 Portals，可以將組件的內(nèi)容渲染到任意的 DOM 層級中蝇完，提供了更多的靈活性官硝。
縮小包體積：Vue 3 在代碼方面進行了優(yōu)化，使用了更高效的編譯器和更小的運行時短蜕，使得打包體積相對較小氢架。
需要注意的是，雖然 Vue 3 帶來了許多改進和新特性忿危，但在遷移現(xiàn)有項目時需要進行一定的工作达箍，因為 Vue 3 在一些語法和 API 上與 Vue 2 存在一些不兼容的變化。因此铺厨，在選擇使用 Vue 2 還是 Vue 3 時缎玫，需要權(quán)衡項目需求、遷移成本和生態(tài)支持等因素解滓。

2. 自定義指令做過嗎赃磨，有哪些場景？

作為AI助手洼裤，我沒有實際經(jīng)驗邻辉，但是我可以提供關(guān)于自定義指令的一些信息。
在Vue中腮鞍，自定義指令是一種特殊的指令值骇，允許你在DOM元素上添加自定義行為。自定義指令可以用于處理DOM事件移国、操作DOM元素吱瘩、修改元素樣式等。
下面是一些常見的自定義指令的應用場景：
表單驗證：自定義指令可以用于表單驗證迹缀，監(jiān)聽輸入框的輸入使碾，檢查輸入的內(nèi)容是否符合特定的規(guī)則，并給出相應的提示祝懂。
權(quán)限控制：自定義指令可以用于根據(jù)用戶的權(quán)限動態(tài)顯示或隱藏某些DOM元素票摇。通過自定義指令，可以根據(jù)用戶角色或權(quán)限設置元素的可見性砚蓬。
Lazy Load：自定義指令可以用于圖片的延遲加載矢门。當圖片進入可視區(qū)域時，通過自定義指令動態(tài)加載圖片，提高頁面的加載速度祟剔。
拖拽排序：自定義指令可以用于實現(xiàn)拖拽排序的功能傅事。通過自定義指令，可以監(jiān)聽元素的拖拽事件峡扩，獲取拖拽的位置信息皮假，并實現(xiàn)元素的位置變換撮抓。
動畫效果：自定義指令可以用于實現(xiàn)動畫效果员凝。通過自定義指令依啰，可以監(jiān)聽元素的進入或離開動畫事件，并添加相應的CSS類或樣式案训，實現(xiàn)動畫效果买置。
以上只是一些常見的應用場景，實際上强霎，自定義指令的應用是非常靈活的忿项，可以根據(jù)項目的需求進行擴展和定制。
使用自定義指令可以提高代碼的可維護性和可復用性城舞，將一些常見的交互行為或樣式封裝成指令轩触，方便在多個組件之間共享和復用。

3.插槽用過嗎家夺，怎么用的脱柱？

是的，我了解Vue中的插槽拉馋。在Vue中榨为，插槽（Slot）是一種組件間的內(nèi)容分發(fā)機制，用于將父組件中的內(nèi)容傳遞給子組件進行渲染煌茴。
插槽的使用方式如下：
單個插槽：
在父組件中随闺，通過在組件標簽內(nèi)部插入內(nèi)容，可以將這些內(nèi)容作為子組件的插槽內(nèi)容進行渲染蔓腐。
在子組件中矩乐，使用<slot>標簽作為插槽的占位符，這樣父組件傳遞的內(nèi)容就會被插入到對應的插槽位置合住。
具名插槽：
可以給插槽定義一個名稱绰精，在父組件中通過<template v-slot:name>或<template #name>來傳遞內(nèi)容到具名插槽撒璧。
在子組件中透葛，使用<slot name="name">來指定插槽的名稱，這樣對應名稱的插槽內(nèi)容就會被渲染卿樱。
作用域插槽：
可以將數(shù)據(jù)從父組件傳遞到子組件的插槽中僚害，子組件可以通過插槽的作用域來使用這些數(shù)據(jù)。
在父組件中，使用<template v-slot:name="slotProps">或<template #name="slotProps">將數(shù)據(jù)傳遞給插槽萨蚕。
在子組件中靶草，使用<slot name="name" :data="slotProps.data">來接收傳遞的數(shù)據(jù)，并在插槽中使用岳遥。
使用插槽可以增強組件的靈活性和復用性奕翔。父組件可以將不同的內(nèi)容傳遞給子組件，子組件可以根據(jù)插槽的內(nèi)容進行渲染浩蓉。插槽的使用方式可以根據(jù)具體需求和場景進行靈活組合派继。
需要注意的是，Vue 3 中的插槽語法有所變化捻艳，具體使用方式可以參考Vue官方文檔中對應版本的文檔進行了解驾窟。

4.webpack和vite的區(qū)別？

Webpack和Vite都是前端構(gòu)建工具认轨，但它們在設計和使用上有一些區(qū)別绅络。下面是關(guān)于Webpack和Vite的區(qū)別以及如何回答相關(guān)問題的建議：

1. 構(gòu)建速度：Vite相對于Webpack具有更快的冷啟動和熱更新速度。Vite利用了ES模塊的特性嘁字，以原生ES模塊的方式加載代碼恩急，避免了繁瑣的構(gòu)建和打包過程，從而提供了更快的開發(fā)體驗纪蜒。
2. 開發(fā)模式和生產(chǎn)模式：Webpack在開發(fā)和生產(chǎn)模式之間有明顯的區(qū)分假栓，需要在配置中進行不同的設置。而Vite在開發(fā)模式下使用本地服務實時構(gòu)建霍掺，并且不需要將所有代碼打包成一個或多個bundle匾荆，而是通過原生ES模塊的方式直接加載。
3. 配置復雜性：Webpack的配置相對復雜杆烁，需要通過配置文件進行詳細的配置牙丽。Vite的配置相對簡單，采用基于約定的配置方式兔魂，減少了配置的繁瑣性烤芦。
4. 插件生態(tài)系統(tǒng)：Webpack擁有龐大的插件生態(tài)系統(tǒng)，可以通過各種插件來擴展其功能析校。Vite在更早的階段构罗，插件生態(tài)系統(tǒng)相對較小，但隨著其逐漸流行智玻，插件生態(tài)也在不斷增長遂唧。
   面試時，你可以根據(jù)上述區(qū)別提供如下回答：
   "Webpack和Vite都是前端構(gòu)建工具吊奢，但它們在設計和使用上有一些區(qū)別盖彭。Vite相對于Webpack具有更快的冷啟動和熱更新速度，這得益于Vite利用了ES模塊的特性以及原生ES模塊的加載方式。另外召边，Vite的配置相對簡單铺呵，采用了基于約定的配置方式，相比Webpack的復雜配置更加友好隧熙。然而片挂，Webpack擁有更為龐大的插件生態(tài)系統(tǒng)，可以通過各種插件來進行功能擴展贞盯。根據(jù)具體項目需求和開發(fā)場景宴卖，我們可以選擇Webpack或Vite來滿足項目的構(gòu)建和開發(fā)需求。"
   除了以上的區(qū)別邻悬，你還可以進一步擴展回答症昏，比如談到Webpack具有更廣泛的應用和更豐富的功能，而Vite則更適合在小型項目或原型開發(fā)中使用父丰，或者提及到Vite的支持Vue 3中的新特性肝谭，等等。根據(jù)個人的經(jīng)驗和實際項目使用情況蛾扇，可以更加具體地回答問題攘烛。

5.從無到有怎么構(gòu)建一個前端項目？需要考慮哪些镀首？

構(gòu)建一個前端項目需要考慮以下幾個方面：

1. 項目需求和目標：明確項目的需求和目標坟漱，包括功能、設計更哄、技術(shù)要求等芋齿。這有助于確定項目的規(guī)模和范圍，并為后續(xù)的決策提供指導成翩。
2. 技術(shù)選型：選擇適合項目需求的技術(shù)棧觅捆，包括前端框架、UI庫麻敌、構(gòu)建工具等栅炒。考慮團隊的經(jīng)驗和技術(shù)棧的生態(tài)术羔，綜合評估選擇最合適的技術(shù)赢赊。
3. 項目結(jié)構(gòu)和組織：設計良好的項目結(jié)構(gòu)，根據(jù)功能模塊劃分目錄和文件级历，遵循一致的代碼風格和命名規(guī)范释移。可考慮使用一些腳手架工具來快速生成項目結(jié)構(gòu)鱼喉。
4. 構(gòu)建工具和環(huán)境搭建：選擇合適的構(gòu)建工具如Webpack或Vite秀鞭，并進行相應的配置。搭建開發(fā)環(huán)境扛禽、測試環(huán)境和生產(chǎn)環(huán)境锋边，確保項目的可持續(xù)開發(fā)和交付。
5. 版本控制和團隊協(xié)作：使用版本控制系統(tǒng)（如Git）管理代碼编曼，建立團隊協(xié)作流程豆巨，確保團隊成員可以高效地協(xié)同開發(fā)。
6. 頁面設計和交互：設計頁面結(jié)構(gòu)掐场、UI元素和交互效果往扔，考慮用戶體驗和響應式設計，制定設計規(guī)范和樣式庫熊户。
7. 數(shù)據(jù)管理和接口對接：考慮如何管理項目中的數(shù)據(jù)萍膛，選擇合適的狀態(tài)管理庫如Vuex或Redux。與后端開發(fā)人員對接嚷堡，定義接口規(guī)范和數(shù)據(jù)格式蝗罗。
8. 性能優(yōu)化和安全性：優(yōu)化頁面加載速度、減少資源體積蝌戒，考慮緩存策略和壓縮技術(shù)串塑。確保項目的安全性，防止常見的安全漏洞北苟。
9. 測試和調(diào)試：編寫單元測試和集成測試桩匪，使用調(diào)試工具和日志記錄來提高代碼質(zhì)量和排查問題的效率。
10. 部署和維護：配置持續(xù)集成和持續(xù)部署流程友鼻，確保項目能夠高效地部署上線傻昙。監(jiān)控項目的運行狀態(tài)，及時修復bug和進行功能擴展彩扔。
    以上是構(gòu)建一個前端項目時需要考慮的一些方面屋匕。具體的流程和步驟可能因項目的規(guī)模、技術(shù)需求和團隊的實際情況而有所差異借杰。在實施過程中过吻，可以根據(jù)項目的具體需求進行調(diào)整和優(yōu)化。

6.v-if和v-for優(yōu)先級蔗衡？

在Vue中纤虽，v-for指令的優(yōu)先級比v-if指令的優(yōu)先級更高。這意味著绞惦，如果同時在同一個元素上使用了v-if和v-for指令逼纸，v-for指令會先執(zhí)行，然后v-if指令會基于v-for的結(jié)果進行條件判斷济蝉。
這個優(yōu)先級順序是由Vue的編譯器決定的杰刽。在編譯過程中菠发，Vue首先會對v-for指令進行處理，生成對應的虛擬節(jié)點贺嫂。然后滓鸠，在處理到v-if指令時，Vue會對v-if指令關(guān)聯(lián)的虛擬節(jié)點進行條件判斷第喳。
以下是一個示例糜俗，展示了v-if和v-for指令的優(yōu)先級順序：

<div>
  <div v-for="item in items" v-if="item.isActive">{{ item.name }}</div>
</div>

在上述示例中，v-for指令會先遍歷items數(shù)組生成對應的虛擬節(jié)點曲饱，然后v-if指令會基于v-for的結(jié)果對虛擬節(jié)點進行條件判斷悠抹，并決定是否渲染。
需要注意的是扩淀，如果在同一個元素上同時使用了v-if和v-for楔敌，并且v-if的條件為false，那么該元素將不會被渲染驻谆，即使存在v-for指令梁丘。因此，在某些情況下旺韭，可能需要使用計算屬性或者在數(shù)據(jù)源中進行條件過濾氛谜，以實現(xiàn)預期的效果。
總結(jié)起來区端，v-for指令的優(yōu)先級高于v-if指令值漫，v-for會先執(zhí)行，然后v-if會基于v-for的結(jié)果進行條件判斷织盼。

7.前端的權(quán)限你是怎么做的杨何？給頁面按鈕加權(quán)限？
在前端實現(xiàn)權(quán)限控制沥邻，可以通過多種方式來限制用戶的操作和訪問權(quán)限危虱。以下是一些常見的權(quán)限控制方法之一：

1. 角色/權(quán)限管理：在后端定義用戶角色和相應的權(quán)限，前端通過與后端的交互獲取用戶的角色信息唐全。
2. 菜單和路由權(quán)限：在前端根據(jù)用戶的角色信息動態(tài)生成菜單和路由配置埃跷，只顯示用戶有權(quán)限訪問的菜單項和頁面。
3. 頁面級別的權(quán)限控制：在前端根據(jù)用戶的角色信息邮利，在渲染頁面時判斷用戶是否有訪問當前頁面的權(quán)限弥雹，如果沒有，可以顯示錯誤提示或者重定向到其他頁面延届。
4. 組件/按鈕級別的權(quán)限控制：在前端的組件或按鈕上添加權(quán)限判斷邏輯剪勿，只有具備相應權(quán)限的用戶才能看到或操作對應的組件或按鈕。
   例如方庭，可以在前端代碼中通過以下方式實現(xiàn)按鈕級別的權(quán)限控制：

<template>
  <button v-if="hasPermission('edit')">編輯</button>
  <button v-if="hasPermission('delete')">刪除</button>
</template>

<script>
export default {
  methods: {
    hasPermission(permission) {
      // 根據(jù)用戶的角色信息或權(quán)限列表判斷是否具備某項權(quán)限
      // 返回 true 或 false
    }
  }
}
</script>

在上述示例中厕吉，通過hasPermission方法來判斷用戶是否具備某項權(quán)限酱固，然后根據(jù)判斷結(jié)果決定是否渲染對應的按鈕。
需要注意的是头朱，前端的權(quán)限控制是輔助控制手段运悲，真正的權(quán)限驗證應該在后端進行。前端的權(quán)限控制主要是為了提供更好的用戶體驗和界面控制髓窜，防止用戶直接操作無權(quán)限的頁面和功能扇苞。同時欺殿，前端的權(quán)限控制應該和后端的權(quán)限驗證配合使用寄纵，確保數(shù)據(jù)和業(yè)務邏輯的安全性。

8.vue3中的ref怎么用脖苏，它與reactive 區(qū)別程拭？
在Vue 3中，ref是一個函數(shù)棍潘，用于創(chuàng)建一個響應式的數(shù)據(jù)引用恃鞋。ref函數(shù)接收一個初始值作為參數(shù)，并返回一個包含響應式數(shù)據(jù)的引用對象亦歉。
下面是使用ref的示例：

import { ref } from 'vue';

const count = ref(0);
console.log(count.value); // 輸出初始值 0

count.value++; // 修改值
console.log(count.value); // 輸出修改后的值

需要注意的是恤浪，通過ref創(chuàng)建的引用對象，需要通過.value訪問和修改其值肴楷。這是因為Vue 3的設計目標是對響應式數(shù)據(jù)進行了細粒度的追蹤水由，使其可以在盡可能低的性能開銷下進行觀察和更新。
而reactive則是用于創(chuàng)建一個響應式的數(shù)據(jù)對象赛蔫。與ref不同砂客，reactive接收一個普通對象作為參數(shù)，并返回一個響應式的代理對象呵恢。
下面是使用reactive的示例：

import { reactive } from 'vue';

const state = reactive({
  message: 'Hello',
  count: 0
});

console.log(state.message); // 輸出 'Hello'
console.log(state.count); // 輸出 0

state.count++; // 修改值
console.log(state.count); // 輸出修改后的值

可以看到鞠值，通過reactive創(chuàng)建的代理對象，可以直接訪問和修改其屬性渗钉，無需像ref那樣使用.value彤恶。
總結(jié)區(qū)別：

•   ref用于創(chuàng)建一個單一的響應式數(shù)據(jù)引用，需要通過.value訪問和修改值鳄橘。
  

•   reactive用于創(chuàng)建一個整個對象的響應式代理粤剧，可以直接訪問和修改屬性。
  

•   ref適用于簡單的值類型挥唠，如數(shù)字抵恋、字符串等。reactive適用于復雜的對象或嵌套結(jié)構(gòu)宝磨。
  

•   ref在模板中使用時需要解構(gòu)為響應式數(shù)據(jù)弧关。reactive的代理對象可直接在模板中使用盅安。
  

在使用時，根據(jù)具體的場景和需求選擇適合的響應式創(chuàng)建方式世囊。

Html css

1. 說一些常用的標簽和h5新屬性

常用的HTML標簽包括：

1. <div>：用于定義文檔中的一個分隔區(qū)塊或一個容器别瞭。
2. <p>：用于定義段落。
3. <a>：用于定義超鏈接株憾。
4. <img>：用于插入圖像蝙寨。
5. <ul>和<li>：分別用于定義無序列表和列表項。
6. <table>嗤瞎、<tr>和<td>：分別用于定義表格墙歪、表格行和表格單元格。
7. <form>贝奇、<input>和<button>：分別用于定義表單虹菲、輸入框和按鈕。
8. <h1>到<h6>：用于定義標題掉瞳，按重要性遞減毕源。

HTML5引入了許多新的標簽和屬性，以提供更多的語義化和功能：

1. 結(jié)構(gòu)標簽：<header>陕习、<nav>霎褐、<main>、<article>该镣、<section>冻璃、<aside>和<footer>等，用于更好地組織頁面結(jié)構(gòu)拌牲。
2. 多媒體標簽：<video>俱饿、<audio>、<canvas>和<svg>等塌忽，用于嵌入視頻拍埠、音頻、繪圖和矢量圖形土居。
3. 表單增強：新增了一些輸入類型和屬性枣购，如<input type="date">、<input type="email">擦耀、<input type="range">等棉圈；還有<datalist>、<output>和<progress>等標簽眷蜓，用于增強表單的功能和用戶體驗分瘾。
4. 語義化標簽：引入了一些用于語義化的標簽，如<time>吁系、<mark>德召、<figure>白魂、<figcaption>等，可以更準確地描述內(nèi)容上岗。
5. 地理位置和地圖：<geo-location>和<map>標簽福荸，用于獲取和展示地理位置信息。
6. 新的API和特性：HTML5還引入了許多新的JavaScript API和特性肴掷，如地理定位API敬锐、Web存儲API、拖放API呆瞻、Web Workers台夺、Web Socket等。
   這只是HTML標簽和HTML5新屬性的一小部分栋烤，HTML和HTML5提供了豐富的標簽和功能谒养，可以根據(jù)具體的項目需求和開發(fā)場景進行選擇和使用挺狰。

2.水平居中明郭，垂直居中？

實現(xiàn)水平居中和垂直居中的方法有多種丰泊，下面分別介紹一些常用的方式：
水平居中：
使用text-align: center;將元素內(nèi)容水平居中薯定，適用于塊級元素。
使用margin: 0 auto;將元素的左右外邊距設置為自動瞳购，適用于塊級元素话侄。
使用Flexbox布局，將容器設置為display: flex;学赛，并使用justify-content: center;將內(nèi)容水平居中年堆。
垂直居中：
使用line-height和height來控制行高和元素高度，使文本在行內(nèi)垂直居中盏浇，適用于單行文本变丧。
使用display: table-cell;和vertical-align: middle;將元素設置為表格單元格，適用于多行文本和塊級元素绢掰。
使用Flexbox布局痒蓬，將容器設置為display: flex;，并使用align-items: center;將內(nèi)容垂直居中滴劲。
需要根據(jù)具體的情況選擇適合的方法攻晒，考慮元素的類型、上下文和瀏覽器兼容性班挖。同時鲁捏，還可以結(jié)合使用這些方法來實現(xiàn)水平居中和垂直居中的效果。
另外萧芙，對于絕對定位元素给梅，可以使用以下方式實現(xiàn)居中：
水平居中：設置left: 50%;和transform: translateX(-50%);乙嘀。
垂直居中：設置top: 50%;和transform: translateY(-50%);。
值得注意的是破喻，以上方式適用于大多數(shù)情況虎谢，但在特定的布局和需求下，可能需要結(jié)合其他CSS屬性或JavaScript來實現(xiàn)更復雜的居中效果曹质。

3.怎么做一個三角形婴噩？

要創(chuàng)建一個三角形，可以使用CSS的邊框和尺寸屬性來實現(xiàn)羽德。下面有幾種常見的方法：

1. 使用border屬性：

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

在上面的示例中几莽，設置了一個寬度為0和高度為0的容器，并通過border屬性設置了三個邊框宅静，其中左右邊框設置為透明章蚣，底邊框設置為指定的顏色，這樣就形成了一個等腰直角三角形姨夹。

2. 使用偽元素：

.triangle {
  width: 0;
  height: 0;
  position: relative;
}
.triangle::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

在這個示例中纤垂，我們使用一個空的偽元素來創(chuàng)建三角形形狀，并通過絕對定位將其放置在容器的頂部左側(cè)磷账。

3. 使用transform屬性：

.triangle {
  width: 0;
  height: 0;
  border-bottom: 100px solid red;
  transform: rotate(45deg);
}

這個示例中峭沦，我們先創(chuàng)建一個寬度和高度為0的容器，然后通過border-bottom屬性設置了一個底邊框逃糟，并使用transform屬性將其旋轉(zhuǎn)45度吼鱼，從而形成一個等邊直角三角形。
這些是創(chuàng)建三角形的幾種常見方法绰咽，可以根據(jù)具體的需求和場景選擇適合的方法來實現(xiàn)所需的三角形形狀菇肃。

4.頁面怎么同時兼容pc端和移動端？

為了同時兼容PC端和移動端取募，可以采用以下方法：

1. 響應式布局：使用CSS媒體查詢（Media Queries）來適配不同的屏幕尺寸和設備琐谤。通過設置不同的CSS樣式，可以根據(jù)屏幕大小和設備類型來調(diào)整布局矛辕、字體大小笑跛、元素位置等。
2. 彈性布局：使用CSS Flexbox 或 Grid布局等彈性布局技術(shù)聊品，可以自適應不同屏幕尺寸和設備的布局需求飞蹂。
3. 圖片和媒體適配：使用響應式圖片或CSS max-width 屬性來確保圖片和媒體元素在不同屏幕尺寸下適當縮放和調(diào)整大小。
4. 觸摸和鼠標事件：針對移動設備和PC設備翻屈，使用適當?shù)氖录幚矸绞匠卵疲缡褂胻ouchstart和touchend事件來處理移動設備的觸摸事件，使用click事件來處理PC設備的鼠標點擊事件。
5. 使用合適的字體和字體大芯选：選擇適合不同屏幕尺寸和設備的字體刽宪，并使用相對單位（如em或rem）來設置字體大小，以便在不同屏幕下實現(xiàn)一致的顯示效果界酒。
6. 瀏覽器兼容性：在開發(fā)前圣拄，了解目標瀏覽器的兼容性要求，并使用瀏覽器兼容性工具毁欣，如Autoprefixer等庇谆，來自動添加瀏覽器前綴以確保兼容性。
7. 移動端特有的交互元素：對于移動端凭疮，可以考慮使用觸摸手勢饭耳、滑動導航、下拉刷新等移動端特有的交互元素执解，以提升用戶體驗寞肖。
8. 使用適配框架：使用一些移動優(yōu)先的前端框架，如Bootstrap衰腌、Ant Design Mobile等新蟆，這些框架已經(jīng)對響應式和移動端兼容性進行了很好的處理。
   綜合使用以上方法桶唐，可以實現(xiàn)一個同時兼容PC端和移動端的網(wǎng)頁栅葡。需要根據(jù)具體項目需求和設備特性來選擇合適的方法和技術(shù)茉兰。同時尤泽，建議在開發(fā)過程中進行跨設備的測試和調(diào)試，以確保頁面在各種設備上都能正常顯示和交互规脸。

Js

1. Es6中有哪些新增的內(nèi)容坯约？

ES6（也稱為ES2015）是JavaScript的第六個主要版本，引入了許多新的語言特性和功能莫鸭。下面是ES6中一些常見的新增內(nèi)容：

1. 塊級作用域與常量聲明：通過let和const關(guān)鍵字引入了塊級作用域變量和常量的聲明方式闹丐，解決了變量提升和作用域混亂的問題。
2. 箭頭函數(shù)：使用箭頭函數(shù)表達式 () => {} 來簡化函數(shù)的聲明和寫法被因，同時綁定了父級作用域的 this 值卿拴。
3. 模板字符串：使用反引號（）包裹字符串，并使用${}`語法可以在字符串中插入變量和表達式梨与，提供了更方便的字符串拼接和多行字符串的寫法堕花。
4. 解構(gòu)賦值：可以從數(shù)組或?qū)ο笾刑崛≈挡①x給變量，簡化了變量賦值和屬性訪問的操作粥鞋。
5. 默認參數(shù)：在函數(shù)聲明中可以設置參數(shù)的默認值缘挽，簡化了函數(shù)調(diào)用時的參數(shù)傳遞。
6. 展開運算符：使用...語法可以將數(shù)組或?qū)ο笳归_為獨立的元素或?qū)傩裕奖氵M行數(shù)組合并壕曼、復制和對象擴展等操作苏研。
7. 類與模塊：引入了class關(guān)鍵字和面向?qū)ο缶幊痰恼Z法糖，使得定義和使用類更加簡潔和清晰腮郊。同時摹蘑，ES6還引入了模塊化的概念，可以使用import和export關(guān)鍵字來導入和導出模塊轧飞。
8. Promise：使用Promise對象可以更好地處理異步操作纹蝴，避免了回調(diào)地獄的問題，提供了更清晰和可讀性更高的異步編程方式踪少。
9. 迭代器和生成器：引入了迭代器（Iterator）和生成器（Generator）的概念塘安，使得迭代操作更加容易實現(xiàn)和使用。
10. 模塊化的Math和Number對象：引入了一些新的數(shù)學方法和操作符援奢，如Math.sign兼犯、Math.trunc、Number.isNaN等集漾，提供了更方便和準確的數(shù)學計算和數(shù)值操作切黔。
    這只是ES6中的一些新增內(nèi)容，ES6還包括了許多其他的語言特性和功能具篇。這些新增的內(nèi)容大大提升了JavaScript的表達能力和開發(fā)效率纬霞，使得代碼更加簡潔、可讀性更強驱显，并且提供了更多的編程模式和工具诗芜。

2.防抖節(jié)流

防抖（Debounce）和節(jié)流（Throttle）是常用的優(yōu)化技術(shù)，用于限制事件觸發(fā)的頻率埃疫，提升性能和用戶體驗伏恐。
防抖（Debounce）：
防抖的原理是，在事件觸發(fā)后栓霜，等待一段時間（如200ms）翠桦，如果在這段時間內(nèi)沒有再次觸發(fā)該事件，則執(zhí)行對應的操作胳蛮；如果在等待時間內(nèi)再次觸發(fā)了該事件销凑，則重新開始計時〗龃叮可以理解為斗幼，如果一個人在一段時間內(nèi)不再說話，我們才認定他講完了茂洒。
應用場景：

•   輸入框搜索：在用戶輸入時等待一段時間孟岛，等用戶停止輸入后再進行搜索請求瓶竭，避免頻繁發(fā)送請求。
  

•   窗口調(diào)整：當窗口大小調(diào)整時渠羞，延遲執(zhí)行調(diào)整大小的操作斤贰，只在用戶停止調(diào)整窗口大小后執(zhí)行。
  

節(jié)流（Throttle）：
節(jié)流的原理是次询，在一段時間內(nèi)只允許事件觸發(fā)一次荧恍，不論觸發(fā)頻率多高，都會在固定時間間隔內(nèi)執(zhí)行對應的操作屯吊∷脱玻可以理解為，保證在一段時間內(nèi)只有一個人能夠說話盒卸。
應用場景：

•   滾動事件：當用戶滾動頁面時骗爆，在一定的時間間隔內(nèi)只執(zhí)行一次滾動事件的處理邏輯。
  

•   鼠標移動事件：當鼠標移動時蔽介，限制事件處理函數(shù)的觸發(fā)頻率摘投，避免頻繁更新界面。
  

實現(xiàn)防抖和節(jié)流的方式有多種虹蓄，可以使用JavaScript中的定時器函數(shù)（setTimeout和clearTimeout）來實現(xiàn)犀呼。下面是兩種常用的實現(xiàn)方式：
防抖（Debounce）的實現(xiàn)：

function debounce(func, delay) {
  let timeoutId;
  
  return function(...args) {
    clearTimeout(timeoutId);
    
    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  }
}

節(jié)流（Throttle）的實現(xiàn)：

function throttle(func, delay) {
  let canRun = true;
  
  return function(...args) {
    if (!canRun) {
      return;
    }
    
    canRun = false;
    setTimeout(() => {
      func.apply(this, args);
      canRun = true;
    }, delay);
  }
}

以上代碼示例是基本的防抖和節(jié)流實現(xiàn)茫经，可以根據(jù)具體的需求和場景進行調(diào)整和擴展砰盐。
需要根據(jù)實際情況選擇使用防抖還是節(jié)流，以便更好地優(yōu)化事件的觸發(fā)頻率和減少不必要的計算或請求犀斋。

3.深淺拷貝

在JavaScript中律胀，深拷貝（Deep Copy）和淺拷貝（Shallow Copy）是用來復制對象或數(shù)組的概念宋光。
淺拷貝（Shallow Copy）是指創(chuàng)建一個新的對象或數(shù)組，新對象或數(shù)組中的元素是原始對象或數(shù)組的引用累铅。如果修改新對象或數(shù)組中的元素跃须，原始對象或數(shù)組的對應元素也會被修改。
深拷貝（Deep Copy）是指創(chuàng)建一個新的對象或數(shù)組娃兽，并遞歸地復制原始對象或數(shù)組中的所有元素和子元素。修改新對象或數(shù)組中的元素不會影響原始對象或數(shù)組尽楔。

下面是一些常見的深拷貝和淺拷貝的實現(xiàn)方法：
淺拷貝的實現(xiàn)方式：
使用Object.assign()方法進行淺拷貝：

const shallowCopy = Object.assign({}, originalObject);

使用擴展運算符（...）進行淺拷貝：

const shallowCopy = { ...originalObject };

使用數(shù)組的slice()方法進行淺拷貝：

深拷貝的實現(xiàn)方式：
使用JSON.parse()和JSON.stringify()進行深拷貝投储，但該方法無法復制函數(shù)和特殊對象（如Date對象）：```1const deepCopy = JSON.parse(JSON.stringify(originalObject));

使用遞歸函數(shù)進行深拷貝：

function deepClone(obj) {
if (typeof obj !== 'object' || obj === null) {
return obj;
}

let clone = Array.isArray(obj) ? [] : {};

for (let key in obj) {
if (obj.hasOwnProperty(key)) {
clone[key] = deepClone(obj[key]);
}
}

return clone;
}

const deepCopy = deepClone(originalObject);

需要注意的是，使用JSON.parse()和JSON.stringify()進行深拷貝時阔馋，會忽略函數(shù)和特殊對象（如Date對象）玛荞，并且會丟失原始對象的原型鏈信息。
對于復雜的數(shù)據(jù)結(jié)構(gòu)和嵌套對象呕寝，建議使用遞歸函數(shù)進行深拷貝勋眯，以確保所有的元素和子元素都被正確復制。
需要根據(jù)具體的情況選擇適合的拷貝方式，并注意對引用類型的處理客蹋，以便實現(xiàn)預期的復制效果塞蹭。


##4.請說一下eventloop 
Event Loop（事件循環(huán)）是 JavaScript 運行時的一種執(zhí)行模型，用于處理異步代碼和事件處理讶坯。
在回答關(guān)于 Event Loop 的面試問題時番电，可以按照以下步驟來回答：
1. 首先，簡要介紹什么是 Event Loop：Event Loop 是 JavaScript 運行時的一種機制辆琅，用于處理異步任務和事件處理漱办。它是 JavaScript 運行時的一部分，負責管理調(diào)度任務的執(zhí)行婉烟。
2. 接下來娩井，解釋 Event Loop 的基本概念：
    *       JavaScript是單線程運行的，意味著在一個給定的時間點似袁，只能執(zhí)行一個代碼塊撞牢。
    *       但是，JavaScript 也支持異步編程叔营，例如通過定時器屋彪、網(wǎng)絡請求、事件處理等绒尊，這些異步任務會在后臺執(zhí)行畜挥。
    *       Event Loop 的作用是監(jiān)控調(diào)用棧和任務隊列，當調(diào)用棧為空時婴谱，它從任務隊列中取出待執(zhí)行的任務蟹但，并將其推入調(diào)用棧中執(zhí)行。
3. 描述 Event Loop 的執(zhí)行過程：
    *       首先谭羔，JavaScript 代碼從上到下同步執(zhí)行华糖，遇到異步任務時，將其放入任務隊列中瘟裸，繼續(xù)執(zhí)行后續(xù)的代碼客叉。
    *       當調(diào)用棧中的代碼執(zhí)行完畢后，Event Loop 檢查任務隊列话告，如果隊列中有任務兼搏，則將任務推入調(diào)用棧中執(zhí)行。
    *       每次從任務隊列中取出一個任務執(zhí)行沙郭，這個過程稱為一個 tick佛呻。
    *       重復上述步驟，不斷地從任務隊列中取出任務并執(zhí)行病线，直到任務隊列中沒有任務為止吓著。
4. 強調(diào) Event Loop 的重要性和作用：
    *       Event Loop 是 JavaScript 異步編程的核心機制鲤嫡，它使得 JavaScript 可以處理大量的異步任務和事件處理。
    *       它保證了 JavaScript 的單線程特性绑莺，并使得異步任務可以在后臺執(zhí)行暖眼，不會阻塞主線程。
    *       Event Loop 的合理運行紊撕，可以使得 JavaScript 程序具備良好的響應性和性能罢荡。
5. 最后，可以舉例說明 Event Loop 的應用場景对扶，如定時器区赵、網(wǎng)絡請求、事件監(jiān)聽等浪南。
請注意笼才，Event Loop 是一個復雜的主題，面試官可能會進一步追問其細節(jié)和細微之處络凿。因此骡送，回答時要確保自己對 Event Loop 的原理和執(zhí)行過程有深入的理解，并根據(jù)具體問題進行適當?shù)恼归_和解釋絮记。

##5.＝＝和＝＝＝區(qū)別

==和===是JavaScript中用于比較相等性的運算符摔踱。
==（相等運算符）用于比較兩個值是否相等，但它會進行類型轉(zhuǎn)換：
*       如果兩個操作數(shù)的類型不同怨愤，會嘗試進行類型轉(zhuǎn)換派敷，然后再進行比較。
*       在類型轉(zhuǎn)換的過程中撰洗，會遵循一定的規(guī)則（類型轉(zhuǎn)換規(guī)則或抽象相等比較規(guī)則）篮愉。
===（嚴格相等運算符）用于比較兩個值是否嚴格相等（值和類型都相等）：
*       如果兩個操作數(shù)的類型不同，直接返回false差导。
*       只有當兩個操作數(shù)的類型相同且值相等時试躏，才返回true。
下面是==和===的一些區(qū)別：
1. 類型轉(zhuǎn)換：
*       ==會進行類型轉(zhuǎn)換设褐，而===不會進行類型轉(zhuǎn)換颠蕴。
*       例如，1 == '1'會返回true络断，因為在進行比較之前裁替，將字符串'1'轉(zhuǎn)換為了數(shù)字1。
*       而1 === '1'會返回false貌笨，因為類型不同。
2. 比較null和undefined：
*       在==中襟沮，null和undefined是相等的锥惋，但它們與其他值不相等昌腰。
*       而在===中，null和undefined只有在類型也相等時才相等膀跌。
3. 對象比較：
*       對象比較時遭商，==和===都是比較引用是否相等，即兩個對象是否指向同一個內(nèi)存地址捅伤。
*       兩個具有相同內(nèi)容的獨立對象劫流，在==和===比較時都會返回false。
總的來說丛忆，===比==更加嚴格和安全祠汇，因為它不會進行類型轉(zhuǎn)換，避免了一些潛在的類型轉(zhuǎn)換錯誤熄诡。在實際開發(fā)中可很，建議優(yōu)先使用===進行比較，除非明確需要進行類型轉(zhuǎn)換的情況下才使用==凰浮。