社招面試總結

時間 2019-11-30

標籤面試總結欄目快樂工作简体版

原文原文鏈接

JS

js繼承javascript

組合繼承：利用call繼承父類的屬性，用子類的原型等於父類實例去繼承父類的方法；css

function Parent(name) {html

this.name = name;前端

} java

Parent.prototype.say = function() { webpack

console.log(this.name); nginx

}; es6

function Child(name) { web

Parent.call(this, name)ajax

}

Child.prototype = new Parent;

let c = new Child("YaoChangTuiQueDuan"); c.say()

寄生組合繼承

利用call繼承父類的屬性，用一個乾淨的函數的原型去等於父類原型，再用子類的原型等於乾淨函數的實例；

function Parent(name) { this.name = name; }

Parent.prototype.say = function() { console.log(this.name); };

function ExtendMiddle() {}

function Child(name) { Parent.call(this, name) }

ExtendMiddle.prototype = Parent.prototype;

Child.prototype = new ExtendMiddle let c = new Child("YaoChangTuiQueDuan"); c.say()

經常使用的es6

let、const/模板字符串/解構賦值/Promise/Class/Set/Map/箭頭函數/模塊化

js基本數據規範

不要在同一行聲明多個變量

使用===/！==比較true/false或者數值

使用對象字面量替代new Array

不要使用全局函數

Switch必須帶有default分支

IF語句必須使用大括號

for in 循環中的變量應該使用var關鍵字明確限定做用域

this的指向

指向調用函數的那個對象，通常狀況下，是全局對象global,做爲方法調用，this指這個對象

做用域鏈

做用是保證執行環境裏有權訪問的變量和函數是有序的，做用域鏈的變量只能向上訪問，變量訪問到window對象即被種植，做用域鏈向下訪問變量是不容許的

簡單的說，做用域就是變量和函數的可訪問範圍，即做用域控制着變量與函數的可見性和生命週期

typeOf:檢測基本數據類型

instanceOf:引用數據類型

isPrototypeOf():

call,apply,bind

都會改變this指向；call和apply傳入參數列表形式不一樣,apply:最多兩個參數;

call和apply適用於在運行時改變this,bind會返回一個新的函數，新函數由bind傳入的參數決定

閉包：

可以讀取其餘函數內部變量的函數
優勢：讀取函數內部的變量讓局部變量保存在內存中，實現變量數據共享；
缺點：因爲閉包函數內部變量都被保存在內存中，內存消耗大。

CSS

三欄佈局

（兩側定寬，中間自適應）

flex;浮動佈局；絕對定位實現；表格佈局；

CSS3新特性

RGBA和透明度；
background-image;
word-wrap;
text-shadow;
font-face;
border-radius;
box-shadow;

水平垂直居中

flex+justify-content+align-items

transform:translate(-50%,-50%);

table-cell

div垂直水平居中
居中佈局：
行內：text-align:center
塊級：margin:0 auto
flex+justify-content:center
垂直居中：
line-height:height
flex+align-items:center
vertical-align:middle
table
水平垂直居中
flex+align-items+justify-content
浮動
引發的問題：
父元素高度沒法被撐開，影響與父元素同級的元素
與浮動元素同級的非浮動元素會緊隨其後
清除方式：
clear:both
父級設置高度
overflow:hidden
BFC

如何生成BFC：（即脫離文檔流）

一、根元素，即HTML元素（最大的一個BFC）
二、float的值不爲none
三、position的值爲absolute或fixed
四、overflow的值不爲visible（默認值。內容不會被修剪，會呈如今元素框以外）
五、display的值爲inline-block、table-cell、table-caption

BFC佈局規則：

1.內部的Box會在垂直方向，一個接一個地放置。
2.屬於同一個BFC的兩個相鄰的Box的margin會發生重疊
3.BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此, 文字環繞效果，設置float
4.BFC的區域不會與float box重疊。
5.計算BFC的高度，浮動元素也參與計算

BFC做用：

1.自適應兩欄佈局
2.能夠阻止元素被浮動元素覆蓋
3.能夠包含浮動元素---清除內部浮動原理：觸發父div的BFC屬性，使下面的子div都處在父div的同一個BFC區域以內
4.分屬於不一樣的BFC時，能夠阻止margin重疊

選擇器優先級
！important>行內樣式>#id>.class>tag>*>繼承>默認\

HTML

h5新特性：
canvas：繪畫
video和audio媒介回放
語義化更好的內容元素：artical footer header nav
表單控件 calendar date time email url

瀏覽器

call,apply,bind區別，怎麼實現call,apply方法

都是用來改變this指向

第一個參數都是this要指向的對象

均可以利用後續參數傳參

call（this,1,2,3)

apply(this,[1,2,3])

bind返回值爲一個新的函數

手動實現call方法：

Function.prototype.myCall=function(context=window,...rest){

context.fn=this;

let result=context.fn(...rest);

delete context.fn;

return result;

}

深拷貝和淺拷貝

淺拷貝：解構賦值，Object.assign({},obj)

深拷貝：Json.Parse && Json.stringfy

function deepClone(obj){

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

let toString=Object.prototype.toString;

for(key in obj){

if(obj.hasOwnProperty(key)){

if(toString.call(obj[key])==="[object object]"||toString.call()==="[object Array]"){
objClone[key]=deepClone[key]);
}else{

objClone[key]=obj[key];
}

}

return objClone;

}

插入幾萬個dom，如何實現頁面不卡頓

1：分頁，懶加載，每次接受必定的數據

2：setInterval,setTimeout,requestAnimationnFrame分批渲染，

3:virtual-scroll 虛擬滾動；指根據容器元素的高度以及列表項元素的高度來顯示長列表數據中的某一個部分，而不是去完整地渲染長列表，以提升無限滾動的性能

優化手段：

減小http請求，把圖標合併到一張圖片中，用background-position控制。

首次加載時使用懶加載（監聽瀏覽器的滾動事件，結合clientHeight,offfsetHeight,,計算圖片是否在可視區域，若是是的話就替換src。滾動事件主要是節流）。儘可能在須要的時候加載它，佔位符要指定寬度和高度，避免圖片加載完成以後替換圖片瀏覽器會進行迴流（影響了頁面的結構）；

使用iconfont字體圖標

減小DNS查詢

將css放在頭部，js放在頁面下面

壓縮js和css:減小文件體積，去除沒必要要的空白符，格式符，註釋，移除重複，無用的代碼，使用gzip

使用瀏覽器緩存

避免css選擇器嵌套太深

高頻觸發時間使用防抖節流

使用ajax緩存

使用cdn

前端路由

hash模式

onhashchange:能夠在window事件上監聽這個對象，在hash變化時，瀏覽器會記錄歷史，而且觸發回調，地址欄中會帶有#.並且只能改變#後面的url片斷.

history

VirtualDOM:

在以前，渲染數據時，會直接替換掉 DOM 裏的全部元素，換成新的數據，爲了渲染無用 DOM 所形成的性能浪費，因此出現了 Virtual DOM, Virtual DOM 是虛擬 DOM，是用 js 對象表示的樹結構，把 DOM 中的屬性映射到 js 的對象屬性中，它的核心定義無非就幾個關鍵屬性，標籤名、數據、子節點、鍵值等。當數據改變時，從新渲染這個 js 的對象結構，找出真正須要更新的 DOM 節點，再去渲染真實 DOM。 Virtual DOM 本質就是在 JS 和 DOM 之間作了一個緩存

爲何操做真實 dom 有性能問題

由於 DOM 是屬於渲染引擎中的東西，而 JS 又是 JS 引擎中的東西。當咱們經過 JS 操做 DOM 的時候，其實這個操做涉及到了兩個線程之間的通訊，那麼勢必會帶來一些性能上的損耗。操做 DOM 次數一多，也就等同於一直在進行線程之間的通訊，而且操做 DOM 可能還會帶來重繪迴流的狀況，因此也就致使了性能上的問題。

var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];

編寫一個程序將數組扁平化去併除其中重複部分數據，最終獲得一個升序且不重複的數組

方法一：

function handleArr(arr) {

let flatten = (arr) => arr.push ? arr.reduce((pre, current) => [...pre, ...flatten(current)], []) : [arr]; return [...new Set(flatten(arr))].sort((a, b) => a - b);

}

方法二： [...new Set(arr.toString().split(",").map(Number))].sort((a,b)=> a - b)

方法三： [...new Set(arr.flat(Infinity))].sort((a,b)=>{ return a - b})

重繪和迴流

重繪：節點須要更改外觀而不影響佈局的，改變color

迴流：佈局或者幾何屬性須要改變

瀏覽器解析url

解析 url 到 dns 服務器

dns 服務器返回 ip 地址到瀏覽器

跟隨協議將 ip 發送到網絡中

通過局域網到達服務器

進入服務器的 MVC 架構 Controller

通過邏輯處理，請求分發，調用 Model 層

Model 和數據進行交互，讀取數據庫，將最終結果經過 view 層返回到網絡回到瀏覽器

瀏覽器根據請求回來的 html 和關聯的 css, js 進行渲染

在渲染的過程當中，瀏覽器根據 html 生成 dom 樹，根據 css 生成 css 樹

將 dom 樹和 css 樹進行整合，最終知道 dom 節點的樣式，在頁面上進行樣式渲染

瀏覽器去執行 js 腳本

最終展示頁面

Web安全（juejin.im/post/59dc2b…）

XSS:經過注入非法的html標籤或javascript代碼，從而當用戶瀏覽該網頁時，控制用戶瀏覽器。

分爲DOM xss(瀏覽器的DOM解析);反射型 xss（url中）;存儲型xss(提交xss代碼被服務器端接收存儲)

影響：利用虛假表單騙取用戶我的信息；獲取用戶cookie值，被害者在不知情狀況下，幫助攻擊者發送惡意請求；顯示僞造的圖片和文章；

防護：避免使用eval,new Function,使用httpOnly；過濾（輸入檢查，HtmlEncode,javascriptEnCode)

CSRF:跨站點請求僞造，冒充用戶發起請求，完成一些違背用戶意願的事情。

防護：驗證碼；儘可能使用post;請求來源限制，token；避免登陸的session長時間存儲在客戶端中

點擊劫持：利用透明的按鈕或鏈接作成陷阱，覆蓋在web頁面之上，誘使用戶在不知情的狀況下，點擊。

防護：x-frame-options http響應頭是用來給瀏覽器指示容許一個頁面能否在<frame>中展示的標記。

跨域(juejin.im/post/5c2399…)

容許跨域訪問的標籤：<img> <link> <script>

解決方案

JSONP:<script>標籤：

cors:須要瀏覽器和後端的支持

postmessage

websocket

ngix反向代理：中轉nginx服務器，用於轉發請求。

iframe

ajax跨域

拷貝
淺拷貝：以賦值的形式拷貝對象，仍指向同一個地址，修改原對象也會受到影響
Object.assign
(..展開運算符)
深拷貝：徹底拷貝一個新對象，修改時原對象再也不受到任何影響
JSON.parse(JSON.stringfy(obj))：性能最快

瀏覽器兼容問題：

png24在ie上出現背景，解決方案是作成png8

不一樣瀏覽器的默認標籤margin和padding不同：*{margin:0;padding:0}

chrome中文界面會默認將小於12px的文本強制按照12px顯示，可加入：-webkit-text-size-adjust:none解決；

IE雙邊距bug;

透明性IE用filter 其餘瀏覽器用opacity 0.6;

websoket:

H5單個TCP鏈接上進行全雙工通信的協議。瀏覽器和服務器只須要作一個握手動做，而後瀏覽器和服務器之間就造成了一個快速通道

一次完整的http流程

域名解析，

發起TCP的三次握手，

創建TCP鏈接後發起http請求，

服務器端響應HTTP請求，瀏覽器獲得html代碼

瀏覽器解析html代碼，並請求html代碼中的資源

瀏覽器對頁面進行渲染呈現給用戶

cookie、sessionStorage和localStorage的區別

cookie數據始終在同源的HTTP請求中攜帶。

sessionStorage和localStorage不會自動把數據發送給服務器，僅在本地保存。cookie數據還有路徑(path)的概念，能夠限制cookie只屬於某個路徑下。

存儲大小限制不一樣

cookie數據不能超過4KB,同時由於每次HTTP請求都會攜帶cookie,因此cookie只適合保存很小的數據。

sessionStorage和localStorage也有存儲限制，可是要大的多

數據有效期不一樣:

sessionStorage:僅在當前瀏覽器窗口關閉前有效。

localStorage:始終有效，窗口或瀏覽器關閉也一直保存。

cookie:只要在設置的cookie過時時間以前一直有效

做用域不一樣：

sessionStorage不在不一樣的瀏覽器窗口中共享(咱們能夠不能夠經過使用sessionStorage實現跨域).localStorage在全部同源串口都是共享的。cookie在全部同源窗口都是共享

Seo優化

titel>description>keywords

語義化的HTML

重要內容HTML代碼放在最前

重要內容不要用js輸出：爬蟲不會執行js獲取內容

少用iframe：搜索引擎不會抓取iframe中的內容

非裝飾圖片必須加alt

seo

meta標籤優化

關鍵詞分析

付費給搜索引擎

合理的標籤使用

前端安全

XSS：跨站腳本攻擊
它容許用戶將惡意代碼植入到提供給其餘用戶使用的頁面中，能夠簡單的理解爲一種javascript代碼注入。
XSS的防護措施：過濾轉義輸入輸出
避免使用eval、new Function等執行字符串的方法，除非肯定字符串和用戶輸入無關
使用cookie的httpOnly屬性，加上了這個屬性的cookie字段，js是沒法進行讀寫的
使用innerHTML、document.write的時候，若是數據是用戶輸入的，那麼須要對象關鍵字符進行過濾與轉義

CSRF：跨站請求僞造
其實就是網站中的一些提交行爲，被黑客利用，在你訪問黑客的網站的時候進行操做，會被操做到其餘網站上
CSRF防護措施：
檢測http referer是不是同域名
避免登陸的session長時間存儲在客戶端中
關鍵請求使用驗證碼或者token機制其餘的一些攻擊方法還有HTTP劫持、界面操做劫持

重繪和節流

重繪：當元素樣式的改變不影響佈局時，瀏覽器將使用重繪對元素進行更新，此時因爲只須要UI層面的從新像素繪製，所以損耗較少

迴流：當元素的尺寸，結構或觸發某些屬性時，瀏覽器會從新渲染頁面，稱爲迴流。此時，瀏覽器須要通過計算，計算後還須要從新佈局，所以是較重的操做。

Http性能優化

減小http請求，合併css和js文件，把圖標合併到同一張圖片裏面，用backgroung-position控制。首次加載時使用懶加載（監聽瀏覽器的滾動事件，結合clientHeight,offfsetHeight,,計算圖片是否在可視區域，若是是的話就替換src。滾動事件主要是節流）。儘可能在須要的時候加載它，佔位符要指定寬度和高度，避免圖片加載完成以後替換圖片瀏覽器會進行迴流（影響了頁面的結構）；

合理利用緩存。把CSS和js使用外鏈的形式。

把CSS放在頭部，JS放底部；

webpack減小js體積。babel-plugin-import.