技術(shù)要求，需要從技術(shù)棧擴(kuò)展講解
PC端、APP端、PC客戶端 electron等模式
vue和react的使用情況，你認(rèn)為有哪些區(qū)別？https://juejin.cn/post/6844904158093377549#heading-7 https://juejin.cn/post/7144648542472044558#heading-16
vue雙向綁定，響應(yīng)式原理概述？vue3：https://blog.csdn.net/qq_22182989/article/details/125781704
前端基礎(chǔ)問題？ https://juejin.cn/post/7016593221815910408#heading-85
composition API和options API區(qū)別？https://juejin.cn/post/7114653124131815432
從URL輸入到建立過程？https://juejin.cn/post/6935232082482298911#heading-39-
項(xiàng)目的亮點(diǎn)展示（具體實(shí)現(xiàn)以及實(shí)現(xiàn)中遇到的問題）
（1）虛擬滾動(dòng)組件優(yōu)化開發(fā)、vue-virtual-scroller https://juejin.cn/post/6965675310159233037#heading-6
組件封裝：https://juejin.cn/post/6952777507162554382
（2）webpack打包性能優(yōu)化、首屏優(yōu)化
https://juejin.cn/post/6936791056298016775
（3）Token、單點(diǎn)登錄實(shí)現(xiàn)方案、 https://mp.weixin.qq.com/s/vMhYK7-0ZIgBczWuSpBuuQ
4 種方案的使用場景：
Cookie + Session 歷史悠久，適合于簡單的后端架構(gòu)，需開發(fā)人員自己處理好安全問題。
Token 方案對后端壓力小，適合大型分布式的后端架構(gòu)，但已分發(fā)出去的 token ，如果想收回權(quán)限，就不是很方便了。
SSO 單點(diǎn)登錄，適用于中大型企業(yè)，想要統(tǒng)一內(nèi)部所有產(chǎn)品的登錄方式。
OAuth 第三方登錄，簡單易用，對用戶和開發(fā)者都友好，但第三方平臺(tái)很多，需要選擇合適自己的第三方登錄平臺(tái)。
（4）微前端方案
singleSpa和乾坤
父子路由機(jī)制如何解決配置？父應(yīng)用用hash，子應(yīng)用用history？
項(xiàng)目相關(guān)介紹？？？
項(xiàng)目準(zhǔn)備
star法則
Situation: 事情是在什么情況下發(fā)生
Target: 你是如何明確你的目標(biāo)的
Action: 針對這樣的情況分析，你采用了什么行動(dòng)方式
Result: 結(jié)果怎樣，在這樣的情況下你學(xué)習(xí)到了什么
關(guān)于客戶端對接難點(diǎn)推動(dòng)
S
- 本部門web和客戶端對接需求比較耗時(shí)；
1， 產(chǎn)品單獨(dú)對接都需要較長工作量，
ws庫文件各自產(chǎn)品業(yè)務(wù)維護(hù)，不便于管理和使用；
2， 相同功能接口不一致；（下載、路由菜單切換、跳轉(zhuǎn)等）
3， 網(wǎng)頁貼片視頻播放業(yè)務(wù)場景不滿足！
T
- 輕量化客戶端形成統(tǒng)一對接入口；
-
- 完成通用接口封裝（登錄，登出，?；睿?，以及內(nèi)嵌基礎(chǔ)功能（錄像、實(shí)時(shí)、畫面增強(qiáng)、下載等）
- websocket
- reconnect js庫（重連）
- 兼容bs和 cs（pc app）
A
和客戶端進(jìn)行websocket對接，確定我們的目標(biāo)功能，自己支持的瀏覽器版本以及場景！ 新增npm庫@psi/dss
收集各個(gè)產(chǎn)品的基礎(chǔ)功能，篩選出哪些進(jìn)行庫內(nèi)部支持
自動(dòng)裁剪
選擇器dom傳入處理，有默認(rèn)的！
計(jì)算剪切區(qū)域，碰撞交叉區(qū)域！ requestAnimationFrame更新
-
貼片計(jì)算位置？ requestAnimationFrame 處理
最大的優(yōu)勢是由瀏覽器來決定回調(diào)函數(shù)的執(zhí)行時(shí)機(jī)，即緊跟瀏覽器的刷新步調(diào)；能保證回調(diào)函數(shù)在屏幕每一次的刷新間隔中只被執(zhí)行一次，這樣就不會(huì)引起丟幀現(xiàn)象，自然不會(huì)導(dǎo)致動(dòng)畫的卡頓
-
CPU節(jié)能：使用setTimeout實(shí)現(xiàn)的動(dòng)畫，當(dāng)頁面被隱藏（隱藏的<iframe>）或最小化（后臺(tái)標(biāo)簽頁）時(shí)，setTimeout仍然在后臺(tái)執(zhí)行動(dòng)畫任務(wù)，由于此時(shí)頁面處于不可見或不可用狀態(tài)，刷新動(dòng)畫是沒有意義的，而且還浪費(fèi) CPU 資源和電池壽命。而
requestAnimationFrame則完全不同，當(dāng)頁面處于未激活的狀態(tài)下，該頁面的屏幕繪制任務(wù)也會(huì)被瀏覽器暫停，因此跟著瀏覽器步伐走的requestAnimationFrame也會(huì)停止渲染，當(dāng)頁面被激活時(shí)，動(dòng)畫就從上次停留的地方繼續(xù)執(zhí)行，有效節(jié)省了 CPU 開銷，提升性能和電池壽命。
-
setTimeout問題
- setTimeout仍然在后臺(tái)執(zhí)行動(dòng)畫任務(wù)，由于此時(shí)頁面處于不可見或不可用狀態(tài)，刷新動(dòng)畫是沒有意義的，而且還浪費(fèi) CPU 資源和電池壽命
- 針對屏幕刷新頻率不一致
交互性升級；針對客戶端進(jìn)行版本檢測、版本升級、安裝以及卸載檢測等等；
R
推廣公安產(chǎn)品使用，最終使得和客戶端對接工作量降低至1人天；
交互性得到質(zhì)的提升
-
問題：
后續(xù)還會(huì)針對iframe等內(nèi)嵌進(jìn)行兼容處理； 存在部分問題-
第三方嵌入還有哪些方案？
- 微前端
-
項(xiàng)目新技術(shù)執(zhí)行
lowcode
微前端singleSpa & 乾坤
-
關(guān)鍵問題1
1 子應(yīng)用如何定義和使用？
2 如何動(dòng)態(tài)加載？
-
3 如何隔離？
-
js
- Proxy沙箱 sandbox
- 快照沙箱
-
css
- shadow DOM
- 前綴約定式隔離BEM
- CSS module
- css in js
-
-
single-SPA
-
解決問題 1
兼容各種技術(shù)棧
-
更優(yōu)的性能
- 每個(gè)獨(dú)立模塊的代碼可做到按需加載,不浪費(fèi)額外資源
無需重構(gòu)現(xiàn)有代碼
每個(gè)獨(dú)立模塊可獨(dú)立運(yùn)行
-
-
qiankun
-
解決問題 1-2-3
- 根據(jù)約定，子應(yīng)用需要暴露聲明周期方法，Qiankun 會(huì)去加載資源然后根據(jù)約定拿到方法，這里官方的推薦是通過 webpack 的 umd 輸出格式來做
- 在執(zhí)行 js 資源時(shí)通過 eval，會(huì)將 window 綁定到一個(gè) Proxy 對象上，以防污染全局變量，并方便對腳本的 window 相關(guān)操作做劫持處理，達(dá)到子應(yīng)用之間的腳本隔離
-
-
鯨落
- 為啥選用自己鯨落？ qiankun不滿足嗎？
- 做了哪些定制需求？
nobundle，vite
- 本部門web和客戶端對接需求比較耗時(shí)；
## 流程推動(dòng)（項(xiàng)目）
### S
- 前端整個(gè)項(xiàng)目開發(fā)流程缺陷，
1. 在項(xiàng)目開發(fā)后，開發(fā)人員有部分功能造成丟失或者缺失，ui，開發(fā)認(rèn)為需求不一致；
2. 部分輕微樣式問題，屢次提到，產(chǎn)品中仍然不少
3. 默認(rèn)性行為系統(tǒng)不一致等
### T
- 1. 確保前端開發(fā)整個(gè)流程閉環(huán)，
保證/確保產(chǎn)品，ui，測試感知到的需求一致性；保障產(chǎn)品風(fēng)險(xiǎn)可控
2. 產(chǎn)品轉(zhuǎn)側(cè)前，進(jìn)行有效的代碼評審，有效降低bug量
### A
- 主動(dòng)推動(dòng)項(xiàng)目開發(fā)整體流程；完善流程；
1. 增加模塊前端設(shè)計(jì)文檔，文檔確保涉及的前端/地圖/后端/客戶端等相關(guān)開發(fā)功能無遺漏；該模塊組件拆分，以及難點(diǎn)方案解析，確保整體項(xiàng)目風(fēng)險(xiǎn)可控；
2. 需求開發(fā)完后，拉通測試/產(chǎn)品/開發(fā)進(jìn)行模塊需求反串講，確保需求一致性；
3. 產(chǎn)品確定修改需求，及時(shí)同步開發(fā)/ui
4. 轉(zhuǎn)側(cè)前必定保障模塊進(jìn)行組內(nèi)代碼評審，或者組長評審
### R
- 推廣公安線前端團(tuán)隊(duì)，各個(gè)產(chǎn)品開發(fā)中整體完成模塊設(shè)計(jì)和思想；最終確保模塊需求完善；
需求一致性提升，爭議點(diǎn)降低80%；
- 通過完善流程，推出整體流程文檔并進(jìn)行相關(guān)培訓(xùn)
## 代碼重構(gòu)經(jīng)歷
### S
- 1. 接手實(shí)戰(zhàn)項(xiàng)目，局點(diǎn)項(xiàng)目需求需要改動(dòng)局部邏輯點(diǎn)較多；會(huì)有很多問題，一一列舉
代碼中 ----> 單vue組件，js相關(guān)代碼，template相關(guān)代碼量過多，造成代碼維護(hù)性差，可閱讀性差；
2. 函數(shù)功能不單一，影響較大
3. 服務(wù)層未分離；多處維護(hù)可靠性不高
### T
- 目標(biāo)：
1. 首先對單個(gè)模塊進(jìn)行重構(gòu)，確定單模塊工作量（需求迭代風(fēng)險(xiǎn)）；
2. 后續(xù)推動(dòng)產(chǎn)品/項(xiàng)目確定重構(gòu)代碼優(yōu)先級，表明重構(gòu)后收益（主要包括：新成員維護(hù)成本，局點(diǎn)項(xiàng)目開發(fā)成本，降低代碼bug量）
### A
- 完成單模塊重構(gòu)，
緊隨其后 推動(dòng)完成整體產(chǎn)品重構(gòu)
- 如何重構(gòu)模塊
- 提取重復(fù)代碼，封裝成函數(shù)
- 拆分功能太多的函數(shù)
- 變量/函數(shù)改名 -- 可讀性
- 替換算法
- 以函數(shù)調(diào)用取代內(nèi)聯(lián)代碼
- 移動(dòng)語句
- 折分嵌套條件表達(dá)式
- 將查詢函數(shù)和修改函數(shù)分離
- 怎么拆分組件顆粒度
- 布局組件
- 結(jié)果view組件展示，自適應(yīng)
- 邏輯處理在哪里維護(hù)
- container.vue
- 拆分視圖組件
- service層抽離
### R
- 重構(gòu)后有明顯收益，依據(jù)工作量安排
新成員熟悉維護(hù)成本 ---> 降低33% （工作量從3d，到2d）
局點(diǎn)項(xiàng)目定制開發(fā)成本 ---> 局部功能開發(fā)工作量降低40%（5人天 --> 3人天）
降低代碼bug量 ---> 降低38%（46 -->28）
學(xué)習(xí)到哪些？
組件拆分顆粒度；
形成模塊開發(fā)規(guī)范；
公安行業(yè)公共組件推出；
### 項(xiàng)目優(yōu)化相關(guān)
優(yōu)化工程： https://juejin.cn/post/6949896020788690958
- 首屏優(yōu)化
- 提升30%（500ms）
- 懶加載
- 長頁面加載過程時(shí)，先加載關(guān)鍵內(nèi)容，延遲加載非關(guān)鍵內(nèi)容
- 圖片懶加載
- 路由懶加載
- 滾動(dòng)加載
- 緩存
- 資源緩存
- 離線化
- 并行化
- 預(yù)先加載 prefetch
- dns-prefetch
- Preconnect
- TCP握手和TLS
- prefetch
- webpack開啟gzip壓縮，文件小速度快
- CDN
- webpack打包優(yōu)化
- 開發(fā)環(huán)境
- DLLPlugin 動(dòng)態(tài)鏈接庫
- 減少執(zhí)行構(gòu)建的模塊
- 按需引入類庫模塊
- lodash-es.js
- IgnorePlugin
- Externals
- 提升單個(gè)模塊構(gòu)建的速度
- 配置babel-loader中的 include/exclude,
- Resolve
- 置制定的是在構(gòu)建時(shí)指定查找模塊文件的規(guī)則
- noParse
- 省略了使用默認(rèn) js 模塊編譯器進(jìn)行編譯的時(shí)間
- Source Map
- 并行構(gòu)建以提升總體效率
- HappyPack 與 thread-loader
- 生產(chǎn)環(huán)境
- 面向 JS 的壓縮工具
- Terser 和 UglifyJS 插件中的效率優(yōu)化
- 面向 CSS 的壓縮工具
- CSSMinimizerWebpackPlugin
- 支持緩存和多進(jìn)程
- Split Chunks
- 路由懶加載，分包
- 多入口
- 抽取公共代碼，也會(huì)提取出一個(gè)chunk
- Tree Shaking
- 提取公共組件
- svg/國際化/tree優(yōu)化
- canvas
- echarts
- 細(xì)化介紹下
## 學(xué)習(xí)的途徑
### github、掘金、簡書等
### vue、vuex、axios、vue-virtual-scorller閱讀源碼
- 前端軟知識(shí)，軟能力？遇到過哪些問題？
（1）前端負(fù)責(zé)人需要把握的能力？
基礎(chǔ)技能，html、css、js
項(xiàng)目技能，腳手架，APP端，PC端，小程序等
快速掌握和上手新技術(shù)的能力
每一個(gè)負(fù)責(zé)人都有可能面對某個(gè)系統(tǒng)需要用到其他的新技術(shù)，或者以前沒有接觸過的技術(shù)，這里需要負(fù)責(zé)人有著自己的學(xué)習(xí)方法和學(xué)習(xí)能力，可以在短時(shí)間內(nèi)掌握一門技術(shù)，快速進(jìn)入開發(fā)，并在開發(fā)的過程當(dāng)中繼續(xù)積累和提高新技術(shù)
指導(dǎo)和幫助初級同學(xué)解決問題
這個(gè)環(huán)節(jié)不能缺失，這里就要求技術(shù)全面和思想指導(dǎo)。當(dāng)在幫助初級同學(xué)解決問題的時(shí)候，不是僅僅只是在給他們解決問題，更重要的一點(diǎn)是雙方之間在進(jìn)行技術(shù)溝通和思路解決方案。對大家都有提升。
提升負(fù)責(zé)人的技術(shù)全面性，和溝通能力，問題解決能力
提升初級同學(xué)的知識(shí)面，了解其他人對于這個(gè)問題的思考
（2）工作中和前端、后端、測試如何溝通？
