前端面試題

2022-08-23 04:36:13 字數 1877 閱讀 4822

一.div+css 的布局較 table 布局有什麼優點?

改版的時候更方便 只要改 css 檔案。

頁面載入速度更快、結構化清晰、頁面顯示簡潔。

表現與結構相分離。

易於優化(seo)搜尋引擎更友好,排名更容易靠前。

a> div+css布局的好處:

1.符合w3c標準,**結構清晰明了,結構、樣式和行為分離,帶來足夠好的可維護性。

2.布局精準,**版面布局修改簡單。

3.加快了頁面的載入速度(最重要的)。

4.節約站點所佔的空間和站點的流量。

5.用只包含結構化內容的html代替巢狀的標籤,提高另外搜尋引擎對網頁的搜尋效率。

b> table布局的好處(table布局也不是一點用的沒有,這點是毋庸置疑的)

1.容易上手。

2.可以形成複雜的變化,簡單快速。

3.表現上更加「嚴謹」,在不同瀏覽器中都能得到很好的相容。

二.vue路由懶載入方式;

方法一 resolve

這一種方法較常見。它主要是使用了resolve的非同步機制,用require代替了import,實現按需載入

方法二 官網方法

vue-router在官網提供了一種方法,可以理解也是為通過promise的resolve機制。因為promise函式返回的promise為resolve元件本身,而我們又可以使用import來匯入元件。

方法三 require.ensure

這種模式可以通過引數中的webpackchunkname將js分開打包。

component: resolve => require.ensure(, () => resolve(require('@/components/'+componentname)), 'webpackchunkname')

結合 vue 的非同步元件和 webpack 的**分割功能,把不同路由對應的元件分割成不同的**塊,然後當路由被訪問的時候才載入對應元件

三.redux工作流程;

首先,使用者發出 action。然後,store 自動呼叫 reducer,並且傳入兩個引數:當前 state 和收到的 action。 reducer 會返回新的 state 。state 一旦有變化,store 就會呼叫監聽函式。listener可以通過store.getstate()得到當前狀態。如果使用的是 react,這時可以觸發重新渲染 view。

四.es6 module和commonjs的區別;

commonjs和es6 module是目前使用較為廣泛的模組標準。它們的主要區別在於

1.前者建立模組依賴關係是在執行時,後者是在編譯時;

2.在模組匯入方面,commonjs匯入的是值拷貝,es6 module匯入的是唯讀的變數對映;

3.es6 module通過其靜態特性可以進行編譯過程中的優化,並且具備處理迴圈依賴的能力。

五.hash、chunkhash、contenthash三者區別

一、hash(所有檔案雜湊值相同,只要改變內容跟之前的不一致,所有雜湊值都改變,沒有做到快取意義)

二、chunkhash(同乙個模組,就算將js和css分離,其雜湊值也是相同的,修改一處,js和css雜湊值都會變,同hash,沒有做到快取意義)

三、contenthash(只要檔案內容不一樣,產生的雜湊值就不一樣)

六.react 中 keys 的作用是什麼?

keys 是 react 用於追蹤哪些列表中元素被修改、被新增或者被移除的輔助標識。

在開發過程中,我們需要保證某個元素的 key 在其同級元素中具有唯一性。在 react diff 演算法中 react 會借助元素的 key 值來判斷該元素是新近建立的還是被移動而來的元素,從而減少不必要的元素重渲染。此外,react 還需要借助 key 值來判斷元素與本地狀態的關聯關係,因此我們絕不可忽視轉換函式中 key 的重要性。

前端面試題

sprites是什麼和為什麼要使用他們?css 精靈 把一堆小的整合到一張大的上,減輕伺服器對的請求數量 有可能替代sprites的方法是什麼?svg圖示,字型圖示,字元編碼等等。1 在div排版的時候,假設現在是100px的寬,我在盒子左側用padding left留個10px的白,div就撐開了...

前端面試題

行內元素有哪些?塊級元素有哪些?空 void 元素有哪些?link和 import的區別是?常見相容性問題?含移動端 html5的離線儲存?描寫一段語義化的html 吧 html5的form如何關閉自動完成功能?什麼是閉包 closure 為什麼要用?localstorage和sessionstor...

前端面試題

朋友碰到的筆試題,在此記錄一下,並且記下碰到的有難點但是自己沒注意的到的面試題!function isnumber x else sum 2,3 5 sum 2 3 5 請寫出sum函式的具體實現。function sum a,c return a c 該題考查的是乙個以前沒接觸過的東西,叫做柯里化...