騰訊web前端面試題及解答(vue)202006

2021-10-08 15:53:01 字數 3769 閱讀 5119

web前端三馬車的問題問的比較少,可能跟網上有點多有關。

網上有1) d3正如其名 data driven documents,其本質是將資料與 dom 繫結,並將資料對映至 dom 屬性上;

2) d3與echarts的區別:

d3通過svg繪製圖形,可以自定義事件。svg不依賴解析度,繼續xml繪製圖形,可以操作dom。支援事件處理器,複雜度高,會減慢頁面的渲染速度。

echarts通過canvas來繪製圖形,使用者通過配置 options 引數,就可很容易繪製指定圖表。canvas依賴解析度,基於js繪製圖形,不支援事件處理,能以png或者jpg的格式儲存。

語義化的html**,符合w3c規範:語義化**讓搜尋引擎容易理解網頁

重要內容html**放在最前:搜尋引擎抓取html順序是從上到下,有的搜尋引擎對抓取長度有限制,保證重要內容一定會被抓取 重要內容不要用js輸出:爬蟲不會執行js獲取內容

少用iframe:搜尋引擎不會抓取iframe中的內容

非裝飾性必須加alt

提高**速度:**速度是搜尋引擎排序的乙個重要指標

網上有,有幾種寫法。

vue資料雙向繫結是通過資料劫持結合發布者-訂閱者模式的方式來實現的

1.實現乙個***observer,用來劫持並監聽所有屬性,如果有變動的,就通知訂閱者;

2.實現乙個訂閱者watcher,每乙個watcher都繫結乙個更新函式,watcher可以收到屬性的變化通知並執行相應的函式,從而更新檢視;

3.實現乙個解析器compile,可以掃瞄和解析每個節點的相關指令(v-model,v-on等指令),如果節點存在v-model,v-on等指令,則解析器compile初始化這類節點的模板資料,使之可以顯示在檢視上,然後初始化相應的訂閱者(watcher);

a、observer實現對mvvm自身model資料劫持,監聽資料的屬性變更,並在變動時進行notify;

b、compile實現指令解析,初始化檢視,並訂閱資料變化,繫結好更新函式;

c、watcher一方面接收observer通過dep傳遞過來的資料變化,一方面通知compile進行view update;

先初始化乙個***observer,用於監聽該物件data屬性的值。

然後初始化乙個解析器compile,繫結這個節點,並解析其中的v-," } "指令,(每乙個指令對應乙個watcher)並初始化模板資料以及初始化相應的訂閱者,並把訂閱者新增到訂閱器中(dep)。這樣就實現雙向繫結了。

整合observer,compile和watcher三者,通過observer來監聽自己的model的資料變化,通過compile來解析編譯模板指令(vue中是用來解析 }),最終利用watcher搭起observer和compile之間的通訊橋梁

data如何更新view

使用observer(觀察者)實現資料劫持,繫結watcher(訂閱者)的更新函式,watcher通知compile(模板編譯)更新虛擬dom,最終掛載真實dom上

view如何更新data

使用事件監聽函式繫結事件,在事件中改變值觸發observer的set,再觸發watcher

父子組建通訊方式主要以下幾種:

具體例子:

1)父元件->子元件

(1)直接關係:

1. 屬性傳值(props)

2. $children(陣列)

3. $refs

(2)跨多層關係:

1. provide / inject

2)子元件->父元件

(1)直接關係:

1. 事件傳值

2. $parent

(2)跨多層關係:

1. 暫無

3)兄弟元件

(1)使用事件中心,例項化乙個空的 vue 例項(建議使用vuex)

自定義元件打包上傳到npm,網上有具體流程。

1)xss 其實就是所謂的 html 注入,攻擊者的輸入沒有經過後台的過濾直接進入到資料庫,最終顯示給來訪的使用者。如果攻擊者輸入一段 js 指令碼,就能竊取來訪者的敏感資訊(比如 cookie),實現偽裝成來訪者對**傳送危險請求。

2)避免 xss 的方法之一主要是對使用者輸入的內容進行過濾。

3)xss 是實現 csrf 的諸多途徑中的一條,但絕對不是唯一的一條。一般習慣上把通過 xss 來實現的 csrf 稱為 xsrf。

4)要完成一次csrf攻擊,受害者必須依次完成兩個步驟:

5)給每個表單加入隨機 token 進行驗證,這樣b頁面無法獲取a頁面的 token 導致請求驗證失敗,從而防止了 csrf。csrf攻擊是源於web的隱式身份驗證機制!web的身份驗證機制雖然可以保證乙個請求是來自於某個使用者的瀏覽器,但卻無法保證該請求是使用者批准傳送的!

影響白屏時間的因素:網路、服務端效能,前端頁面結構設計。

2)給個例子,通常認為瀏覽器開始渲染或者解析完

123

白屏時間 = firstpaint - pagestarttime

簡單說下幾方面方法:

1)將**實現改為其他元素標籤實現

2)僅渲染視窗可見的資料

3)進行函式節流,即控制scroll事件的處理,在規定的時間內僅觸發一次

4)減少駐留的vnode和vue元件,不使用顯示的子元件slot方式,改為手動建立虛擬dom來切斷物件引用

5)減少操作期間增加的物件,操作時元件必然會更新建立,可以減少元件中子元件的數量

1、你遇到的最大的困難?是如何克服困難的?

2、印象最深刻的乙個專案,為什麼,這個專案給你的最大的收穫是啥?

var quicksort = function(arr) else

}return str.split('').reverse().join('');

}

function.prototype.call2 = function (context) 

var result = eval('context.fn(' + args +')');

delete context.fn

return result;

}

var ans,res,len;

var dfs=function(index,sum,candidates,target))

ans.push(tmp);

// console.log(res,ans);

return ;

}for(var i=index;itarget)

continue;

res.push(candidates[i]);

dfs(i,sum+candidates[i],candidates,target);

res.pop();

}}var combinationsum = function(candidates, target) {

ans=;

len=candidates.length;

candidates.sort((a,b)=>a-b);

for(var i=0;i通過相碰變色,使得其中兩種變色龍的數量相差3,例如三種龍為:a,b,c,其中a-c的數量為,,a和c相碰變色為b,則a和c的數量就相等,之後a和c兩兩相碰,全部變色為b。

基於單鏈表反轉演算法(非遞迴),進行以k為步長的單鏈表反轉。

前端面試題及解答

box sizing 的屬性和區別,主要涉及 height 和 width 的區別。畫圖 寫出position的所有屬性和他們的作用 這裡有乙個 url寫乙個函式 獲取 query 的引數和值存放在乙個物件中。閉包和繼承,手寫繼承的幾種方式 手寫乙個倒計時功能 手寫乙個深淺 clone 有什麼優化的...

web前端面試題 http協議

1.http全稱 超文字協議傳輸 2.http工作流程 首先客戶機與伺服器需要建立連線。只要單擊某個超級鏈結,http的工作開始。1.收線客戶機與伺服器需要建立連線,只要單擊某個超級連線,http的工作開始 2.建立連線後,客戶機傳送乙個請求給伺服器,請求方式的格式為 統一資源識別符號 url 協議...

web前端面試題記錄

1.vue全家桶定義 2.路由怎麼定義使用的 路由的導航前衛有哪幾種 3.http請求get 與post的不同,post請求的引數放到 請求頭的訊息體中 4.vuex有哪個部分組成 action與mutataions有什麼不同 action是怎麼改變state中的值 commit 5.元件中怎麼傳值...