記2019的一次面試

時間 2019-11-17

標籤一次面試欄目快樂工作简体版

原文原文鏈接

CSS3經常使用屬性

border-radius 圓角
box-shadow 陰影：X軸偏移值 Y軸偏移值 X軸陰影模糊半徑 Y軸陰影模糊半徑陰影顏色
box-sizing 定義盒模型
- 屬性值爲content-box時，寬高的值爲content的寬高
- 屬性值爲border-box時, 寬高的值爲border+padding+content也就是整個盒模型的寬高；
linear-gradient 背景顏色線性漸變
radial-gradient 背景顏色徑向漸變
text-shadow 文本陰影
background-size 設置背景圖像的高度和寬度
@keyframs 動畫名稱 定義動畫序列
animation: 1s keyname infinite 時間動畫名次數
transform 變換

display有哪些屬性，做用

none 元素不顯示
block 顯示爲塊級元素
inline 顯示爲內聯元素
inline-block 行內塊元素
flex 設置爲伸縮盒子
inherit 從父元素繼承 display 屬性的值

CSS實現垂直水平居中

定位方式

1. absolute + 負margin
.father {
    position: relative,
}
.son {
    position: absolute;
    width: 50px;
    height: 50px;
    margin-top: -25px;
    margin-left: -25px;
}
2. absolute + margin auto
.father {
    position: relative,
}
.son {
    position: absolute;;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
3. absolute + transform
.father {
    position: relative,
}
.son {
    position: absolute;;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
複製代碼

flex方式

.father {
    display: flex;
    justify-content: center;
    align-items: center;
}
複製代碼

grid方式

.father {
    display: grid;
}
.son {
    aligin-self: center;
    justify-self: center;
}
複製代碼

對象的淺拷貝和深拷貝，有哪些實現方式。

JS 中的淺拷貝與深拷貝，只是針對複雜數據類型（Object，Array）的複製問題。淺拷貝與深拷貝均可以實如今已有對象上再生出一份的做用。可是對象的實例是存儲在堆內存中而後經過一個引用值去操做對象，由此拷貝的時候就存在兩種狀況了：拷貝引用和拷貝實例，這也是淺拷貝和深拷貝的區別。css
淺拷貝: 淺拷貝是拷貝引用，拷貝後的引用都是指向同一個對象的實例，彼此之間的操做會互相影響html
淺拷貝實現方式前端
1.拷貝原對象的引用jquery

var a = {c:1};
var b = a;
console.log(a === b); // 輸出true。
a.c = 2;
console.log(b.c); // 輸出 2
複製代碼

2.源對象拷貝實例，其屬性對象拷貝引用
- 這種狀況，外層源對象是拷貝實例，若是其屬性元素爲複雜雜數據類型時，內層元素拷貝引用。對源對象直接操做，不影響另一個對象，可是對其屬性操做時候，會改變另一個對象的屬性；經常使用方法爲：Array.prototype.slice(), Array.prototype.concat(), jQury的$.extend({},obj)，

var a = [{c:1}, {d:2}];
var b = a.slice();
console.log(a === b); // 輸出false，說明外層數組拷貝的是實例
a[0].c = 3;
console.log(b[0].c); // 輸出 3，說明其元素拷貝的是引用
複製代碼

Object.assign()實現對象的淺拷貝
深拷貝: 在堆中從新分配內存，而且把源對象全部屬性都進行新建拷貝，以保證深拷貝的對象的引用圖不包含任何原有對象或對象圖上的任何對象，拷貝後的對象與原來的對象是徹底隔離，互不影響。
- 實現方式：
  - JSON.stringify()，JSON.parse()
  - 使用Object.create()的方法
  - jQury的$.extend(true,{},obj)
...展開運算符實現淺拷貝

數組經常使用的方法，哪些會改變數組哪些不會

Array.from()從一個相似數組或可迭代對象中建立一個新的數組實例webpack
Array.isArray()用於肯定傳遞的值是不是一個 Arrayweb
Array.concat()(不會更改原數組)方法用於合併兩個或多個數組。此方法不會更改現有數組，而是返回一個新數組。算法
Array.every測試數組的全部元素是否都經過了指定函數的測試小程序
Array.filter()(不會更改原數組)建立一個新數組, 其包含經過所提供函數實現的測試的全部元素微信小程序
Array.find()返回數組中知足提供的測試函數的第一個元素的值。不然返回 undefined。設計模式
Array.findIndex()返回數組中知足提供的測試函數的第一個元素的索引 ected output: 3
Array.includes()判斷一個數組是否包含一個指定的值，根據狀況，若是包含則返回 true，不然返回false。
Array.indexOf()方法返回在數組中能夠找到一個給定元素的第一個索引，若是不存在，則返回-1
Array.join()將一個數組（或一個類數組對象）的全部元素鏈接成一個字符串並返回這個字符串。若是數組只有一個項目，那麼將返回該項目而不使用分隔符。
Array.pop()(改變原數組)從數組中刪除最後一個元素，並返回該元素的值
Array.push()(改變原數組)將一個或多個元素添加到數組的末尾，並返回該數組的新長度
Array.reduce()對數組中的每一個元素執行一個由您提供的reducer函數(升序執行)，將其結果彙總爲單個返回值。
Array.reverse()將數組中元素的位置顛倒,第一個數組元素成爲最後一個數組元素，最後一個數組元素成爲第一個。
Array.shift()(改變原數組)從數組中刪除第一個元素，並返回該元素的值。
Array.unshift()(改變原數組)將一個或多個元素添加到數組的開頭，並返回該數組的新長度。
Array.slice()(不改變原數組)方法返回一個新的數組對象，這一對象是一個由 begin和 end（不包括end）決定的原數組的淺拷貝
Array.sort()用原地算法對數組的元素進行排序，並返回數組。排序算法如今是穩定的

`Array.splice()`(改變原數組)

方法經過刪除現有元素和/或添加新元素來修改數組,並以數組返回原數組中被修改的內容

var months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at 1st index position
console.log(months);
// expected output: Array ['Jan', 'Feb', 'March', 'April', 'June']

months.splice(4, 1, 'May');
// replaces 1 element at 4th index
console.log(months);
// expected output: Array ['Jan', 'Feb', 'March', 'April', 'May']
複製代碼

`this`指向的問題

this是運行時綁定的，因此取決於函數的執行上下文
當一個函數被調用時，會建立一個活動記錄(執行上下文)。這個記錄會包含函數在哪裏被調用(調用棧)、函數的調用方法、傳入的參數等信息，this也是這裏的一個屬性。
1.獨立函數調用這種直接調用的方式this指向全局對象，若是是在瀏覽器就指向window

function foo(){
    console.log(this.a)
}
var a = 2
foo()  // 2
複製代碼

2.對象上下文(隱試綁定)

function foo() { 
    console.log( this.a );
}
var obj = { 
    a: 2,
    foo: foo
};
obj.foo(); // 2
複製代碼

foo雖然被定義在全局做用域，可是調用的時候是經過obj上下文引用的，能夠理解爲在foo調用的那一刻它被obj對象擁有。因此this指向obj
3.顯式綁定經過call、apply、bind顯式地更改this指向。
4.new綁定「構造函數」和原型中的this永遠指向new出來的實例
5.箭頭函數中的this 而是「繼承」外層做用域中的this指向箭頭函數不改變this的指向

Vue的經常使用指令

指令都是行內屬性
v-model放在input、textarea、select>option上的，實現雙向數據綁定
v-text 展現對應的文本
v-once 對應的標籤只渲染一次
v-show=布爾 是否能顯示，true能顯示，false不能顯示（存在隱式轉化）
v-html 把值中的標籤渲染出來
v-for 循環顯示元素能夠循環數組、對象、數字、字符串最好加:key='a+i'
v-bind 用於綁定行內屬性簡寫成:
v-if 控制是否渲染該元素值是true，則渲染該元素；false則不渲染與v-else v-else-if連着使用可使用template標籤，就不會出現多餘標籤

Vue的v-if和v-show的區別

v-show和v-if都是用來顯示隱藏元素，v-if還有一個v-else配合使用
v-show
- 無論條件是真仍是假，第一次渲染的時候都會編譯出來，也就是標籤都會添加到DOM中。以後切換的時候，經過display: none;樣式來顯示隱藏元素。能夠說只是改變css的樣式，幾乎不會影響什麼性能。
v-if
- 在首次渲染的時候，若是條件爲假，什麼也不操做，頁面看成沒有這些元素。當條件爲真的時候，開始局部編譯，動態的向DOM元素裏面添加元素。當條件從真變爲假的時候，開始局部編譯，卸載這些元素，也就是刪除。
性能方面
- v-if絕對是更消耗性能的，由於v-if在顯示隱藏過程當中有DOM的添加和刪除，v-show就簡單多了，只是操做css。

Vue雙向數據綁定的原理

微信小程序開發中遇到的問題

小程序不支持background使用本體圖片，只能使用base64圖片，或者是用網絡圖片; 可使用字體圖標等。
定義事件沒法傳值，在組件上定義自定義屬性經過event.currentTarget.dataset

jquery遍歷的方法，jquery時間綁定怎麼作

便利方法$()
bind()函數只能針對已經存在的元素進行事件的設置；可是live(),on(),delegate()均支持將來新添加元素的事件設置；
on()方法能夠綁定動態添加到頁面元素的事件,on()方法綁定事件能夠提高效率

js實現異步的方式，詳細講解ES發展實現異步的途徑

前端安全性措施

防止XSS攻擊(跨網站指令碼)，
- 是一種網站應用程式的安全漏洞攻擊，是代碼注入的一種
- 防護：轉義控制用戶輸入輸出的內容，對於引號，尖括號，斜槓進行轉義。
採用CSP(內容安全策略)
- 用於檢測並削弱某些特定類型的攻擊，包括跨站腳本 (XSS) 和數據注入攻擊等。不管是數據盜取、網站內容污染仍是散發惡意軟件，這些攻擊都是主要的手段。
- 經過 HTTP Header 中的 Content-Security-Policy 來開啓 CSP
- 只容許加載本站資源Content-Security-Policy: default-src ‘self’
- 只容許加載 HTTPS 協議圖片Content-Security-Policy: img-src https://*
防止CSRF(跨站請求僞造)
- 利用用戶的登陸態發起惡意請求
- 防護:
  - Get 請求不對數據進行修改
  - 不讓第三方網站訪問到用戶 Cookie
  - 阻止第三方網站請求接口
  - 請求時附帶驗證信息，好比驗證碼或者 token
對密碼加鹽，而後進行幾回不一樣加密算法的加密。

// 加鹽也就是給原密碼添加字符串，增長原密碼長度
sha256(sha1(md5(salt + password + salt)))
複製代碼

前端性能優化

選擇合適的緩存策略

對於某些不須要緩存的資源，可使用Cache-control: no-store ，表示該資源不須要緩存。
對於頻繁變更的資源，可使用Cache-Control: no-cache 並配合 ETag 使用，表示該資源已被緩存，可是每次都會發送請求詢問資源是否更新。
對於代碼文件來講，一般使用 Cache-Control: max-age=31536000 並配合策略緩存使用，而後對文件進行指紋處理，一旦文件名變更就會馬上下載新的文件。

使用HTTP2.0

在 HTTP / 2.0 中引入了多路複用，可以讓多個請求使用同一個 TCP 連接，極大的加快了網頁的加載速度。而且還支持 Header 壓縮，進一步的減小了請求的數據大小

預加載

資源不須要立刻用到，可是但願儘早獲取，這時候就可使用預加載。預加載實際上是聲明式的 fetch ，強制瀏覽器請求資源，而且不會阻塞 onload 事件，可使用如下代碼開啓預加載

<link rel="preload" href="http://example.com" />
複製代碼

靜態資源使用CDN加載

靜態資源儘可能使用 CDN 加載，因爲瀏覽器對於單個域名有併發請求上限，能夠考慮使用多個 CDN 域名。對於 CDN 加載靜態資源須要注意 CDN 域名要與主站不一樣，不然每次請求都會帶上主站的 Cookie。

優化渲染過程

懶加載

懶加載的原理就是隻加載自定義區域（一般是可視區域，但也能夠是即將進入可視區域）內須要加載的東西。對於圖片來講，先設置圖片標籤的 src 屬性爲一張佔位圖，將真實的圖片資源放入一個自定義屬性中，當進入自定義區域時，就將自定義屬性替換爲 src 屬性，這樣圖片就會去下載資源，實現了圖片懶加載
懶加載不只能夠用於圖片，也可使用在別的資源上。好比進入可視區域纔開始播放視頻等等。

圖片加載優化

不用圖片。不少時候會使用到不少修飾類圖片，其實這類修飾圖片徹底能夠用 CSS 去代替
對於移動端來講，屏幕寬度就那麼點，徹底沒有必要去加載原圖浪費帶寬。通常圖片都用 CDN 加載，能夠計算出適配屏幕的寬度，而後去請求相應裁剪好的圖片
小圖使用 base64 格式
將多個圖標文件整合到一張圖片中（雪碧圖）
選擇正確的圖片格式：
- 對於可以顯示 WebP 格式的瀏覽器儘可能使用 WebP 格式。由於 WebP 格式具備更好的圖像數據壓縮算法，能帶來更小的圖片體積，並且擁有肉眼識別無差別的圖像質量，缺點就是兼容性並很差
- 小圖使用 PNG，其實對於大部分圖標這類圖片，徹底可使用 SVG 代替
- 照片使用 JPEG

服務器端開啓GZIP壓縮

webpack編譯打包時間的優化

組件按需引入，藉助插件babel-plugin-import實現按需加載組件，減小文件體積，修改.babelrc文件。
啓用happypack多進程構建項目：happypack 的原理是讓loader能夠多進程去處理文件，它把任務分解給多個子進程去併發的執行，子進程處理完後再把結果發送給主進程
修改source-map配置
啓用DllPlugin和DllReferencePlugin預編譯庫文件

Hybrid app 原生和H5通訊

設計模式有哪些

設計模式的定義：在面向對象軟件設計過程當中針對特定問題的簡潔而優雅的解決方案

單體模式：

單體模式思想在於保證一個特定類僅有一個實例，意味着當你第二次使用同一個類建立信對象時，應獲得和第一次建立對象徹底相同。

工廠模式：

工廠模式是爲了建立對象。

中介者模式

經過一箇中介者對象，其餘全部的相關對象都經過該中介者對象來通訊，而不是相互引用，當其中的一個對象發生改變時，只須要通知中介者對象便可。經過中介者模式能夠解除對象與對象之間的緊耦合關係。
中介者模式適用的場景：例如購物車需求，存在商品選擇表單、顏色選擇表單、購買數量表單等等，都會觸發change事件，那麼能夠經過中介者來轉發處理這些事件，實現各個事件間的解耦，僅僅維護中介者對象便可。