千鋒教育web前端高頻面試題視頻教程,kerwin大話前端面試秘籍(附答案)

1.html5的新特性?
HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集,主要是關(guān)于圖像,位置,存儲,多任務(wù)等功能的增加
用于媒介回放的 video 和 audio 元素
本地離線存儲 localstorage 長期存儲數(shù)據(jù),瀏覽器關(guān)閉后數(shù)據(jù)不丟失
sessionstorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除
語意化更好的內(nèi)容元素,比如 article、footer、header、nav、section
表單控件,calendar、date、 time、email、url、searcho
新的技術(shù)webworker,websocket,Geolocation
2.localStorage,sessionStorage 和 cookie的區(qū)別
cookie:分為會話周期和長生命周期,大小為4kb,如果使用cookie保存過多數(shù)據(jù)會帶來性能問題。
需要程序員自己封裝,原生的cookie接口不友好.
localStorage:除非被清除,否則永遠保存,大小5MB,???????只在瀏覽器中保存,不參與和服務(wù)器的通信。原生接口可以接受,
sessionStorage:僅在當前頁面有效,關(guān)閉頁面就會被清除,?????sessionStorage同上
3.重繪(repaint)和回流(reflow)是與網(wǎng)頁渲染相關(guān)的概念。
重繪指的是當元素的樣式屬性發(fā)生變化時,瀏覽器會重新繪制這個元素,使其顯示出新的樣式效果,但并不影響其在文檔流中的位置和大小。比如改變元素的背景顏色、文字顏色等。
回流則是指當網(wǎng)頁布局發(fā)生變化,需要重新計算元素的布局和幾何屬性時,瀏覽器會重新執(zhí)行布局流程,計算新的位置和大小?;亓鲿绊懻麄€文檔中其他元素的布局,因此是一種比較耗費性能的操作。常見的會導(dǎo)致回流的操作包括改變元素的尺寸、位置、重排文檔結(jié)構(gòu)等。
- 在瀏覽器渲染過程中,首先進行回流操作來計算元素的布局,然后進行重繪操作來繪制元素的樣式,最終呈現(xiàn)在屏幕上。因此,在性能優(yōu)化方面,我們可以通過減少回流和重繪的次數(shù)來提高網(wǎng)頁的渲染性能。一些優(yōu)化的技巧包括:使用 CSS3 的 transform 屬性替代改變元素的位置和尺寸,因為 transform 不會引起回流。
- 使用 CSS3 的 opacity 屬性來改變元素透明度,而不是使用 display: none 或者 visibility: hidden,避免回流。
- 使用 DocumentFragment 對象在 DOM 樹中進行批量操作,減少回流次數(shù)。
- 使用離線文檔流(例如將要操作的元素脫離文檔流,完成后再放回)減少回流的影響范圍。
- 合并多次的樣式修改,利用樣式批處理減少回流次數(shù)。
通過避免不必要的回流和重繪,可以有效提高網(wǎng)頁的性能和用戶體驗。
3.介紹路由
? ? 路由模式,hash是 vue 路由的默認路由模式,url 帶#號 上線之后刷新不會丟失 瀏覽器兼容性好
? ? history,url 不帶#號 上線之后刷新會丟失(需要讓后端服務(wù)器人員給你配置服務(wù)器的重定向) 瀏覽器兼容性一般
? ? 路由守衛(wèi)就是在路由頁面跳轉(zhuǎn)的時候,自動觸發(fā)的函數(shù),可以用來對項目中的用戶權(quán)限進行設(shè)置
? ? ① 全局:所有頁面跳轉(zhuǎn)都會觸發(fā)
? ? 全局前置守衛(wèi)---beforeEach()
? ? 在所有路由跳轉(zhuǎn)之前 觸發(fā)的鉤子函數(shù)(此時路由還沒有跳轉(zhuǎn)完成)
? ? 全局后置守衛(wèi)--- afterEach()
? ? 所有路由跳轉(zhuǎn)之后 觸發(fā)的鉤子函數(shù) (此時已經(jīng)進入到了跳轉(zhuǎn)之后的新頁面)
? ? ② 路由獨享
? ? 指定頁面在跳轉(zhuǎn)的時候觸發(fā)
? ? 路由獨享---beforeEnter
? ? 只會對一個路由規(guī)則生效(路由獨享寫在哪個規(guī)則之上 就對哪一個生效)
? ? 路由是什么?一級和多級路由?路由懶加載?
? ? 路由是一個 SPA 單頁面應(yīng)用,傳統(tǒng)的頁面在跳轉(zhuǎn)的時候可能會造成白屏,影響用戶體驗,使用路由可以解決這個問題。
? ? <!-- 路由的本質(zhì)是根據(jù) url 的不同來渲染不同的組件頁面
? ? 路由分為一級路由和多級路由,一級路由在 views 文件中創(chuàng)建,然后在 router 下的 index.js 中進行相關(guān)的路由配置,首先把要使用的組件頁面通過懶加載的方式引用進來,然后通過 path 設(shè)置路由,name 設(shè)置路由規(guī)則的名字,最后在 app.vue 中設(shè)置路由出口 router-view。多級路由采用 children 關(guān)鍵字來進行配置,多級路由的路由出口寫在上一級路由的頁面中。 -->
? ? 路由懶加載:在需要用到某個模塊時才加載 因為路由頁面在第一次加載的時候會把所有的路由頁面全部加載完畢才顯示,有的用戶可能網(wǎng)絡(luò)不好,會導(dǎo)致渲染時間過長,出現(xiàn)白屏問題,為了解決這個問題,所以我們再配置的時候可以采用懶加載的方式
? ?
? ? 路由導(dǎo)航
? ? 路由導(dǎo)航分為聲明式導(dǎo)航和編程式導(dǎo)航
? ? 聲明式導(dǎo)航用 router-link 標簽完成頁面跳轉(zhuǎn),里面有個 to 屬性就是你要寫的路徑,使用 router-link 的話自動添加一個類名,我們可以給這個類名設(shè)置樣式。
? ? 編程式導(dǎo)航有三種方法,可以使用 this.$router.push到你要去的路徑,push跳轉(zhuǎn)的頁面可以來回跳轉(zhuǎn),還可以使用replace,replace跳轉(zhuǎn)之后不能回退,go正數(shù)前進,負數(shù)后退
? ? 路由重定向--redirect
? ? 當我們首次打開路由頁面的時候,沒有具體的路徑,頁面這個時候是空白的,為了避免這種情況的發(fā)生,我們可以設(shè)置一個重定向,當我們打開頁面的時候,會自動跳轉(zhuǎn)到我們重定向配置的路由頁面中,用戶體驗更好
? ? 404頁面
? ? 當用戶輸入網(wǎng)址不小心輸錯了,會導(dǎo)致無法進入到我們的項目頁面,這個時候我們可以設(shè)置一個404的頁面,給用戶一個提示,讓用戶清晰的知道問題和解決的方式,這樣用戶體驗比較好
? ? 路由傳參/動態(tài)路由匹配
? ? 路由傳參就是把數(shù)據(jù)從一個路由頁面?zhèn)鬟f到另一個路由頁面,有兩種方式,params和query
? ? parmas方式在傳遞參數(shù)的時候總共3步,首先在接收的路由頁面規(guī)則上配置接收參數(shù),然后使用name作為跳轉(zhuǎn)地址,params來設(shè)置發(fā)送參數(shù),最后使用this.$route.params 來進行接收
? ? query 方式傳遞數(shù)據(jù)總共兩步,發(fā)送和接收,除了發(fā)送數(shù)據(jù)的時候 query 可以使用 name 也可以使用 path,接收的時候用 query,其他的基本一樣
? ? $router和$route 的區(qū)別
? ? $router 代表的是路由對象涉及到的全部頁面
? ? $route 代表當前路由頁面
4.promise
? ? 前提:為了讓異步代碼,變?yōu)橥降膱?zhí)行方式
? ? 回調(diào)地獄,其實就是回調(diào)函數(shù)嵌套過多導(dǎo)致的
? ? 正是因為如此,我們希望改變可能這種寫法,將函數(shù)嵌套調(diào)用的寫法,
? ? 改成平級寫法
? ? 解決方案promise
? ? Promise的作用就是將回調(diào)地獄的寫法,改為平級寫法
? ? 怎么改?--->不要將回調(diào)函數(shù)寫在主函數(shù)的參數(shù)位置
? ? Promise的then方法就等價于外界傳遞的回調(diào)函數(shù)
? ? f1().then(成功的方法,[失敗的方法]);
? ?
? ? Promise對象可以通過其他的方式把回調(diào)函數(shù)f2傳進來
? ? 參數(shù):是一個回調(diào)函數(shù)--->因為promise的回調(diào)函數(shù)等價于一個容器,里面只放異步操作
? ? 回調(diào)函數(shù)的參數(shù):是兩個回調(diào)函數(shù)
? ? success(resText):請求響應(yīng)成功時執(zhí)行的方法,正常情況99%都是用來接收響應(yīng)的
? ? failed:請求響應(yīng)失敗時執(zhí)行的方法,第二個參數(shù)可以省略不寫
? ?
? ? 1.all 和 race
? ?
? ? 1.異步改成同步的寫法--->Promise
? ? 2.一個頁面的渲染,需要發(fā)n個請求,
? ? 當所有請求都完成響應(yīng)后,才能渲染頁面--->強調(diào)統(tǒng)一接收響應(yīng)
? ? 當首次遇到失敗的請求時,promise.all則結(jié)束運行
? ? Promise.all([Promise對象1,Promise對象2...]).then(fun);
? ? 3.一個頁面的渲染,有很多接口都可以請求,
? ? 同時發(fā)送多個請求,獲取相同的響應(yīng),誰快獲取誰
? ? Promise.race([Promise對象1,Promise對象2...]).then(fun);