當(dāng)前位置：首頁(yè) > 前端技术 > HTML >内容正文

HTML

promise的状态以及api介绍_2019年，盘点一些我出过的前端面试题以及对求职者的建议

發(fā)布時(shí)間：2025/3/12 HTML 40 豆豆

生活随笔收集整理的這篇文章主要介紹了 promise的状态以及api介绍_2019年，盘点一些我出过的前端面试题以及对求职者的建议小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

筆者雖然曾經(jīng)也面試過很多求職者,但是對(duì)于前端的筆試和面試,我覺得并不能體現(xiàn)一個(gè)人的真實(shí)能力,所以建議大家多修煉前端真正的技術(shù).對(duì)于前端面試題,之前也承諾過讀者要出一篇,筆者大致總結(jié)一下曾經(jīng)面試的題目.后續(xù)不會(huì)再出面試題,而是聚焦于一些真正的,有利于成長(zhǎng)性的技術(shù)文章和思維方式,來幫助大家提高解決問題的能力.

前言

首先總結(jié)一下筆者對(duì)于前端領(lǐng)于學(xué)習(xí)的一些成長(zhǎng)模型和學(xué)習(xí)路線,來給大家提供一些參考.

下面推薦一些不同技術(shù)選型的優(yōu)秀組件和庫(kù),也是筆者曾今使用過的.

如果公司的前端是以vue為主的,那么你可能需要熟悉如下技能和知識(shí)點(diǎn)

vue
vue-router 路由管理
vuex 狀態(tài)管理
vue-cli3 vue項(xiàng)目?jī)?yōu)秀的腳手架,可以配置單頁(yè),多頁(yè),ssr, 預(yù)渲染技術(shù)的頁(yè)面
vue-server-renderer 服務(wù)端渲染方案
vue-devtools vue開發(fā)調(diào)試工具,方便調(diào)試大型復(fù)雜項(xiàng)目
antd-desigin-vue / element UI 基于vue的第三方ui組件庫(kù)
vxe-table 優(yōu)秀的vue表格解決方案
vue-multiselect vue強(qiáng)大的多選下拉組件
Vuelidate 基于vue強(qiáng)大且輕量的校驗(yàn)庫(kù)
vuex-router-sync 保持vue-router和vuex store同步

如果公司的前端是以React為主的,那么你可能需要熟悉如下技能和知識(shí)點(diǎn)

react
react-router
react-thunk 異步redux解決方案
ant design 優(yōu)秀且強(qiáng)大的react組件庫(kù)
react-json-view JSON 顯示器
react-quill 富文本編輯器
rc-color-picker 拾色器
qrcode.react 二維碼生成器
antV 數(shù)據(jù)可視化解決方案
react-beautiful-dnd 基于react的拖拽庫(kù)
emoji-mart 表情庫(kù)
react-image-crop 圖片裁切
Ant Motion 動(dòng)畫
react-codemirror2 代碼編輯器
react-copy-to-clipboard 復(fù)制到剪切板

接下來言歸正傳,開始進(jìn)入正文.

正文

1. 介紹一下ES6的新特性

[參考答案]

const和let
模板字符串
箭頭函數(shù)
函數(shù)的參數(shù)默認(rèn)值
Spread / Rest 操作符
二進(jìn)制和八進(jìn)制字面量(通過在數(shù)字前面添加0o或0O即可將其轉(zhuǎn)為八進(jìn)制值,二進(jìn)制使用0b或者0B)
對(duì)象和數(shù)組結(jié)構(gòu)
ES6中的類(class)
Promise
Set()和Map()數(shù)據(jù)結(jié)構(gòu)
Modules(模塊, 如import, export)
for..of 循環(huán)

2. 介紹Promise以及Promise的幾種狀態(tài)

[參考答案]

介紹: Promise 是異步編程的一種解決方案，比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強(qiáng)大。所謂Promise，簡(jiǎn)單說就是一個(gè)容器，里面保存著某個(gè)未來才會(huì)結(jié)束的事件(通常是一個(gè)異步操作)的結(jié)果。從語(yǔ)法上說，Promise 是一個(gè)對(duì)象，從它可以獲取異步操作的消息。Promise 提供統(tǒng)一的 API，各種異步操作都可以用同樣的方法進(jìn)行處理。狀態(tài): pending(進(jìn)行中)、fulfilled(已成功)和rejected(已失敗)。只有異步操作的結(jié)果，可以決定當(dāng)前是哪一種狀態(tài)，任何其他操作都無法改變這個(gè)狀態(tài)。

3. 談?wù)勀銓?duì)閉包的理解及其優(yōu)缺點(diǎn)

[參考答案]

閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù). 本質(zhì)上,閉包是將函數(shù)內(nèi)部和函數(shù)外部連接起來的橋梁.

優(yōu)點(diǎn)

邏輯連續(xù)，當(dāng)閉包作為另一個(gè)函數(shù)調(diào)用參數(shù)時(shí)，避免脫離當(dāng)前邏輯而單獨(dú)編寫額外邏輯。
延長(zhǎng)局部變量的生命周期, 更具有封裝性, 保護(hù)局部變量。

缺點(diǎn)

容易造成內(nèi)存溢出
閉包會(huì)在父函數(shù)外部，改變父函數(shù)內(nèi)部變量的值,所以可能會(huì)導(dǎo)致改變父函數(shù)的變量

4. React的生命周期

[參考答案]

初始化階段 defaultProps -> constructor -> componentWillMount() -> render() -> componentDidMount()
運(yùn)行中階段 componentWillReceiveProps() -> shouldComponentUpdate() -> componentWillUpdate() -> componentDidUpdate()
銷毀階段 componentWillUnmount()

5. componentWillReceiveProps的觸發(fā)條件是什么

[參考答案] componentWillReceiveProps會(huì)在接收到新的props的時(shí)候調(diào)用

6. vue中v-if和v-show的區(qū)別

[參考答案]

v-show不管條件是真還是佳，第一次渲染的時(shí)候標(biāo)簽都會(huì)添加到DOM中。切換的時(shí)候，通過display: none;樣式來顯示隱藏元素,對(duì)性能影響不是很大。
v-if在首次渲染的時(shí)候，如果條件為假，不會(huì)在頁(yè)面渲染該元素。當(dāng)條件為真時(shí)，開始局部編譯，動(dòng)態(tài)的向DOM元素里面添加元素。當(dāng)條件從真變?yōu)榧俚臅r(shí)候，開始局部編譯，卸載這些元素，也就是刪除。對(duì)性能有一定影響

7. 小程序里面開頁(yè)面最多多少

[參考答案] 小程序原生頁(yè)面存在層級(jí)限制，超過一定層數(shù)就會(huì)無法打開新頁(yè)面。一開始這個(gè)限制為不超過5層，目前是不超過10層。

8. 取數(shù)組的最大值(ES5、ES6)

[參考答案]

// es5Math.max.apply(null, arr);// es6Math.max(...arr);復(fù)制代碼

9. http并發(fā)請(qǐng)求資源數(shù)上限

[參考答案] HTTP客戶端一般對(duì)同一個(gè)服務(wù)器的并發(fā)連接個(gè)數(shù)都是有限制的, 最大為6條

10. 如何優(yōu)化網(wǎng)站的SEO

[參考答案]

網(wǎng)站結(jié)構(gòu)布局優(yōu)化：盡量簡(jiǎn)單, 提倡扁平化結(jié)構(gòu). 一般而言，建立的網(wǎng)站結(jié)構(gòu)層次越少，越容易被“蜘蛛”抓取，也就容易被收錄。

img標(biāo)簽必須添加“alt”和“title”屬性，告訴搜索引擎導(dǎo)航的定位，做到即使圖片未能正常顯示時(shí)，用戶也能看到提示文字。

把重要內(nèi)容HTML代碼放在最前搜索引擎抓取HTML內(nèi)容是從上到下，利用這一特點(diǎn)，可以讓主要代碼優(yōu)先讀取，廣告等不重要代碼放在下邊。

控制頁(yè)面的大小，減少http請(qǐng)求，提高網(wǎng)站的加載速度。

合理的設(shè)計(jì)title、description和keywords

title標(biāo)題：只強(qiáng)調(diào)重點(diǎn)即可，盡量把重要的關(guān)鍵詞放在前面，關(guān)鍵詞不要重復(fù)出現(xiàn)，盡量做到每個(gè)頁(yè)面的title標(biāo)題中不要設(shè)置相同的內(nèi)容。
meta keywords頁(yè)面/網(wǎng)站的關(guān)鍵字。
meta description網(wǎng)頁(yè)描述，需要高度概括網(wǎng)頁(yè)內(nèi)容，切記不能太長(zhǎng)，過分堆砌關(guān)鍵詞，每個(gè)頁(yè)面也要有所不同。

語(yǔ)義化書寫HTML代碼，符合W3C標(biāo)準(zhǔn)盡量讓代碼語(yǔ)義化，在適當(dāng)?shù)奈恢檬褂眠m當(dāng)?shù)臉?biāo)簽，用正確的標(biāo)簽做正確的事。讓閱讀源碼者和“蜘蛛”都一目了然。

a標(biāo)簽：頁(yè)面鏈接，要加 “title” 屬性說明，鏈接到其他網(wǎng)站則需要加上 el="nofollow" 屬性, 告訴 “蜘蛛” 不要怕，因?yàn)橐坏爸┲搿迸懒送獠挎溄又?#xff0c;就不會(huì)再回來了。

圖標(biāo)使用IconFont替換

使用CDN網(wǎng)絡(luò)緩存，加快用戶訪問速度，減輕服務(wù)器壓力

啟用GZIP壓縮，瀏覽速度變快，搜索引擎的蜘蛛抓取信息量也會(huì)增大

SSR技術(shù)

預(yù)渲染技術(shù)

11. 介紹下HTTP狀態(tài)碼, 403、301、302分別代表什么

[參考答案]

當(dāng)瀏覽者訪問一個(gè)網(wǎng)頁(yè)時(shí)，瀏覽者的瀏覽器會(huì)向網(wǎng)頁(yè)所在服務(wù)器發(fā)出請(qǐng)求。當(dāng)瀏覽器接收并顯示網(wǎng)頁(yè)前，此網(wǎng)頁(yè)所在的服務(wù)器會(huì)返回一個(gè)包含HTTP狀態(tài)碼的信息頭(server header)用以響應(yīng)瀏覽器的請(qǐng)求。

301 (永久移動(dòng)) 請(qǐng)求的網(wǎng)頁(yè)已永久移動(dòng)到新位置。服務(wù)器返回此響應(yīng)(對(duì) GET 或 HEAD 請(qǐng)求的響應(yīng))時(shí)，會(huì)自動(dòng)將請(qǐng)求者轉(zhuǎn)到新位置
302 (臨時(shí)移動(dòng)) 服務(wù)器目前從不同位置的網(wǎng)頁(yè)響應(yīng)請(qǐng)求，但請(qǐng)求者應(yīng)繼續(xù)使用原有位置來進(jìn)行以后的請(qǐng)求
403 (禁止) 服務(wù)器拒絕請(qǐng)求

12. RESTful常用的方法和介紹

[參考答案] rest請(qǐng)求方法有4種，包括get,post,put,delete.分別對(duì)應(yīng)獲取資源，添加資源，更新資源及刪除資源.

12. React16.3對(duì)生命周期的改變

[參考答案] React16.3+廢棄的三個(gè)生命周期函數(shù)

componentWillMount
componentWillReceiveProps
componentWillUpdate

取而代之的是兩個(gè)新的生命周期函數(shù)

static getDerivedStateFromProps(nextProps, prevState) 取代componentWillMount、componentWillReceiveProps和componentWillUpdate
getSnapshotBeforeUpdate(prevProps, prevState) 取代componentWillUpdate

class ScrollingList extends React.Component { constructor(props) { super(props); this.listRef = React.createRef(); } getSnapshotBeforeUpdate(prevProps, prevState) { // 返回的數(shù)據(jù)將作為componentDidUpdate第三個(gè)參數(shù) return { stateA: 'xxx' }; } componentDidUpdate(prevProps, prevState, snapshot) { if (snapshot !== null) { console.log(snapshot.stateA) } } render() {}}復(fù)制代碼

13. 介紹React高階組件

高階組件(HOC)是 React 中用于復(fù)用組件邏輯的一種高級(jí)技巧。HOC 自身不是 React API 的一部分，它是一種基于 React 的組合特性而形成的設(shè)計(jì)模式。具體而言，高階組件是參數(shù)為組件，返回值為新組件的函數(shù).其本身是純函數(shù)，沒有副作用。

14. 緩存相關(guān)的HTTP請(qǐng)求頭

[參考答案]

headers字段解釋案例 Expires 服務(wù)端告訴瀏覽器，先把這個(gè)文件緩存起來，在這個(gè)過期時(shí)間之前，該文件都不會(huì)變化 Expires: Mon, 1 Aug 2016 22:43:02 GMT Cache-Control 由于Expires給定的是絕對(duì)時(shí)間，而客戶端的系統(tǒng)時(shí)間可以由用戶任意修改, Cache-Control為相對(duì)時(shí)間 Cache-Control: max-age=80 Last-Modified(response header) / If-Modified-Since (request header) 服務(wù)端收到請(qǐng)求后會(huì)對(duì)比目前文件的最后修改時(shí)間和該請(qǐng)求頭的信息，如果沒有修改，那就直接返回304給瀏覽器，而不返回實(shí)際資源。如果有變化了，就返回200，并且?guī)闲碌馁Y源內(nèi)容 If-Modified-Since:Mon, 01 Aug 2016 13:48:44 GMT Etag / If-None-Match 第一次請(qǐng)求后響應(yīng)頭中包含了Etag，作為時(shí)間標(biāo)簽,下一次請(qǐng)求時(shí)會(huì)把原來的Etag標(biāo)簽帶上(在請(qǐng)求頭中變成了If-None-Match)作為校驗(yàn)標(biāo)準(zhǔn)，若這個(gè)文件如果發(fā)生了改變，則Etag也會(huì)改變。服務(wù)器對(duì)比瀏覽器請(qǐng)求頭中的的If-None-Match：如果相同就返回304，而不返回實(shí)際資源如果不同，就返回200和新的資源。

15. 如何優(yōu)化用戶體驗(yàn)

[參考答案]

頁(yè)面渲染前使用骨架屏或者加載動(dòng)畫,避免大塊白屏
使用預(yù)渲染或者ssr技術(shù)提高首屏加載時(shí)間
動(dòng)畫使用css3硬件加速,避免用戶操作動(dòng)畫卡頓
計(jì)算密集型業(yè)務(wù)使用web worker或者js分片處理,避免js線程阻塞
頁(yè)面狀態(tài)監(jiān)控,給用戶提供反饋機(jī)制
靜態(tài)資源走CDN緩存或者oss服務(wù),提高用戶訪問速度
避免用戶操作報(bào)錯(cuò),提供404頁(yè)面或者錯(cuò)誤提示頁(yè)面

16. 對(duì)PWA的了解

[參考答案]

progressive web app：漸進(jìn)式網(wǎng)頁(yè)應(yīng)用.可以將 Web 和 App 各自的優(yōu)勢(shì)融合在一起：漸進(jìn)式、可響應(yīng)、可離線、實(shí)現(xiàn)類似 App 可交互、即時(shí)更新、安全、可以被搜索引擎檢索、可推送、可安裝、可鏈接。其核心技術(shù)包括 App Manifest、Service Worker、Web Push，等等。

17. 介紹下跨域

[參考答案]

同源策略/SOP(Same origin policy)是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，瀏覽器很容易受到XSS、CSFR等攻擊, 同源策略要求兩個(gè)通訊地址的協(xié)議、域名、端口號(hào)必須相同，否則兩個(gè)地址的通訊將被瀏覽器視為不安全的，并被阻擋下來. 要突破SOP的限制,我們可以使用如下方式:

CORS 同域安全策略CORS是一種跨域資源請(qǐng)求機(jī)制，它要求當(dāng)前域在響應(yīng)報(bào)頭添加Access-Control-Allow-Origin標(biāo)簽，從而允許指定域的站點(diǎn)訪問當(dāng)前域上的資源

res.setHeader("Access-Control-Allow-Origin","*"); // 不過CORS默認(rèn)只支持GET/POST這兩種http請(qǐng)求類型，如果要開啟PUT/DELETE之類的方式，需要在服務(wù)端在添加一個(gè)"Access-Control-Allow-Methods"報(bào)頭標(biāo)簽： res.setHeader( "Access-Control-Allow-Methods", "PUT, GET, POST, DELETE, HEAD, PATCH" )復(fù)制代碼

HTML5 postMessage 可以使用 postMessage 方法和 onmessage 事件來實(shí)現(xiàn)不同域之間的通信，其中postMessage用于實(shí)時(shí)向接收信息的頁(yè)面發(fā)送消息
HTML5 WebSocket WebSocket protocol 是HTML5一種新的協(xié)議。它實(shí)現(xiàn)了瀏覽器與服務(wù)器全雙工通信，同時(shí)允許跨域通訊，是server push技術(shù)的一種很棒的實(shí)現(xiàn)
JSONP 是JSON的一種“使用模式”，主要是利用script標(biāo)簽不受同源策略限制的特性，向跨域的服務(wù)器請(qǐng)求并返回一段JSON數(shù)據(jù)
iframe形式通過設(shè)置相同的document.domain, 或者不同域通過window.name傳遞數(shù)據(jù)
服務(wù)器代理

18. Access-Control-Allow-Origin在服務(wù)端哪里配置

[參考答案] response header響應(yīng)頭

19. csrf跨站攻擊怎么解決

[參考答案]

CSRF, 跨站請(qǐng)求偽造,它可以在用戶毫不知情的情況下以用戶名義偽造請(qǐng)求發(fā)送給受攻擊站點(diǎn)，從而對(duì)用戶或者網(wǎng)站造成攻擊. 預(yù)防措施如下:

服務(wù)器端驗(yàn)證HTTP Referer字段, Referer記錄了該HTTP請(qǐng)求的來源地址
在請(qǐng)求地址中添加token并驗(yàn)證
在HTTP頭中自定義屬性并驗(yàn)證

20. 用js寫一個(gè)數(shù)組扁平化函數(shù)

[參考答案]

// reducefunction flatten(arr = []) { return arr.reduce((result, item) => { return result.concat(Array.isArray(item) ? flatten(item) : item) }, [])}// (toString | join) & split(利用數(shù)組的toString或者join,將數(shù)組轉(zhuǎn)化為字符串)function flatten(arr = []) { return arr.toString().split(',').map(item => Number(item))}復(fù)制代碼

21. Promise和Callback有什么區(qū)別

[參考答案]

相比于callback，Promise 具有更易讀的代碼組織形式(鏈?zhǔn)浇Y(jié)構(gòu)調(diào)用)，更好的異常處理方式(在調(diào)用 Promise 的末尾添加上一個(gè)catch方法捕獲異常即可)，以及異步操作并行處理的能力(Promise.all()Promise.race()等)。callback最大的問題就是我們通常說的回調(diào)地獄,一旦業(yè)務(wù)邏輯復(fù)雜了,我們不得不使用大量的嵌套回調(diào)代碼,可維護(hù)性很低.

22. 如何實(shí)現(xiàn)高度自適應(yīng)

[參考答案]

使用絕對(duì)定位, 設(shè)置top,bottom屬性
使用flex布局
float+ height:100%

23. cookie, session, storage的區(qū)別和聯(lián)系

[參考答案]

cookie存儲(chǔ)于瀏覽器端，而session存儲(chǔ)于服務(wù)端
cookie的安全性相比于session較弱,cookie容易被第三方劫持,考慮到安全應(yīng)當(dāng)使用session
session保存在服務(wù)器上,當(dāng)訪問增多時(shí)，會(huì)占用服務(wù)器的資源
cookie存儲(chǔ)容量有限制，單個(gè)cookie保存數(shù)據(jù)不能超過4k，且很多瀏覽器限制一個(gè)站點(diǎn)最多保存20個(gè)cookie。對(duì)于session,默認(rèn)大小一般是1M
cookie、sessionStorage、localStorage,都保存在瀏覽器端，且受同源策略影響
cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶，而Storage不會(huì)在請(qǐng)求中攜帶，僅在本地存儲(chǔ)
存儲(chǔ)大小上, cookie一般是4k，Storage可以達(dá)到5M-10M
數(shù)據(jù)存儲(chǔ)時(shí)間上：sessionStorage僅僅是會(huì)話級(jí)別的存儲(chǔ)，它只在當(dāng)前瀏覽器關(guān)閉前有效，不能持久保持；localStorage始終有效，即使窗口或?yàn)g覽器關(guān)閉也一直有效，除非用戶手動(dòng)刪除；cookie只在設(shè)定的過期時(shí)間之前有效
作用域上：sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個(gè)頁(yè)面； localStorage和 cookie在所有同源窗口是共享的
Storage支持事件通知機(jī)制，可以將數(shù)據(jù)更新的通知發(fā)送給監(jiān)聽者。并且它提供增刪查api使用更方便

24. 說說你做過的前端性能優(yōu)化(JS原生,React, vue)

[參考答案] 參考周二打卡答案

25. 對(duì)web安全的理解

[參考答案]

CSRF 攻擊和防范

跨站請(qǐng)求偽造,可以理解為攻擊者盜用了用戶的身份，以用戶的名義發(fā)送惡意請(qǐng)求，造成用戶隱私及財(cái)產(chǎn)損失過程: 1.登錄受信任網(wǎng)站并在本地生成cookie; 2.在不登出網(wǎng)站的情況下訪問危險(xiǎn)網(wǎng)站防范: 關(guān)鍵操作只接受POST請(qǐng)求, 使用驗(yàn)證碼, 檢測(cè)Referer, 使用token(或者JWT)

XSS 攻擊和防范

全稱Cross-site script，跨站腳本攻擊，是Web程序中常見的漏洞。原理是攻擊者向有XSS漏洞的網(wǎng)站中輸入惡意的腳本，當(dāng)其它用戶瀏覽該網(wǎng)站時(shí)候，該腳本會(huì)自動(dòng)執(zhí)行，從而達(dá)到攻擊的目的(盜取Cookie，破壞頁(yè)面結(jié)構(gòu)，重定向到釣魚網(wǎng)站等)。區(qū)分: 分為持久型XSS和非持久性XSS. 持久型XSS是將攻擊的腳本植入到服務(wù)器，從而導(dǎo)致每個(gè)訪問的用戶都會(huì)遭到此XSS腳本的攻擊。非持久型XSS是將惡意腳本包裝在頁(yè)面的URL參數(shù)中，通過URL鏈接騙取用戶訪問，從而進(jìn)行攻擊. 防范: 對(duì)用戶輸入進(jìn)行HTML轉(zhuǎn)義, 對(duì)敏感信息進(jìn)行過濾

SQL 注入與防范

通過把SQL命令插入到表單中并提交或頁(yè)面請(qǐng)求的參數(shù)中，最終使得服務(wù)器執(zhí)行惡意的SQL命令. 防范: 對(duì)用戶的輸入進(jìn)行校驗(yàn)或限制長(zhǎng)度；對(duì)特殊字符進(jìn)行轉(zhuǎn)換, 不要使用動(dòng)態(tài)拼裝SQL，為每個(gè)應(yīng)用使用單獨(dú)的權(quán)限有限的數(shù)據(jù)庫(kù)連接。對(duì)隱私信息進(jìn)行加密

DDOS 攻擊

分布式拒絕服務(wù)(DDoS:Distributed Denial of Service)攻擊指借助于客戶/服務(wù)器技術(shù)，將多個(gè)計(jì)算機(jī)聯(lián)合起來作為攻擊平臺(tái)，對(duì)一個(gè)或多個(gè)目標(biāo)發(fā)動(dòng)DDoS攻擊，從而成倍地提高拒絕服務(wù)攻擊的威力。

26. 用js實(shí)現(xiàn)數(shù)組隨機(jī)取數(shù)，每次返回的值都不一樣

[參考答案]

27. 頁(yè)面上有1萬(wàn)個(gè)button如何綁定事件

[參考答案] 事件委托, 冒泡觸發(fā)

28. base64為什么能提升性能以及它的缺點(diǎn)是什么

[參考答案] 優(yōu)點(diǎn):

無額外請(qǐng)求
適用于很小或者很簡(jiǎn)單的圖片
可像單獨(dú)圖片一樣使用，比如背景圖片等
沒有跨域問題，不需要考慮緩存、文件頭或者cookies問題缺點(diǎn):
CSS 文件體積的增大, 造成CRP(關(guān)鍵渲染路徑)阻塞
頁(yè)面解析CSS生成的CSSOM時(shí)間增加

29. 介紹webp圖片文件格式

[參考答案]

WebP是一種支持有損壓縮和無損壓縮的圖片文件格式，根據(jù)Google的測(cè)試，無損壓縮后的WebP比PNG 文件少了45％的文件大小，即使這些PNG文件經(jīng)過其他壓縮工具壓縮之后，WebP 還是可以減少28％的文件大小。

優(yōu)點(diǎn) 更小的文件尺寸更高的質(zhì)量——與其他相同大小不同格式的壓縮圖像比較
缺點(diǎn) 編碼和解碼速度比較慢,存在一定兼容性

30. react-router里的Link標(biāo)簽和a標(biāo)簽有什么區(qū)別

[參考答案]

從渲染的DOM來看，這兩者都是鏈接，都是a標(biāo)簽，區(qū)別是： Link是react-router里實(shí)現(xiàn)路由跳轉(zhuǎn)的鏈接，配合Route使用，react-router攔截了其默認(rèn)的鏈接跳轉(zhuǎn)行為，區(qū)別于傳統(tǒng)的頁(yè)面跳轉(zhuǎn)，Link 的“跳轉(zhuǎn)”行為只會(huì)觸發(fā)相匹配的Route對(duì)應(yīng)的頁(yè)面內(nèi)容更新，而不會(huì)刷新整個(gè)頁(yè)面。 a標(biāo)簽是html原生的超鏈接，用于跳轉(zhuǎn)到href指向的另一個(gè)頁(yè)面或者錨點(diǎn)元素,跳轉(zhuǎn)新頁(yè)面會(huì)刷新頁(yè)面。

31. 介紹一下函數(shù)柯里化,并寫一個(gè)柯里化函數(shù)

[參考答案]

柯里化是一種將使用多個(gè)參數(shù)的一個(gè)函數(shù)轉(zhuǎn)換成一系列使用一個(gè)參數(shù)的函數(shù)的技術(shù)。柯里化函數(shù)能夠讓我們：

在多個(gè)函數(shù)調(diào)用中依次收集參數(shù)，不用在一個(gè)函數(shù)調(diào)用中收集所有參數(shù)。

當(dāng)收集到足夠的參數(shù)時(shí)，返回函數(shù)執(zhí)行結(jié)果。

32. 介紹一下從輸入U(xiǎn)RL到頁(yè)面加載全過程

[參考答案]

瀏覽器的地址欄輸入U(xiǎn)RL并按下回車。
瀏覽器查找當(dāng)前URL是否存在緩存，并比較緩存是否過期。
DNS解析URL對(duì)應(yīng)的IP。
根據(jù)IP建立TCP連接(三次握手)。
HTTP發(fā)起請(qǐng)求。
服務(wù)器處理請(qǐng)求，瀏覽器接收HTTP響應(yīng)。
渲染頁(yè)面，構(gòu)建DOM樹。
關(guān)閉TCP連接(四次揮手)。

33. 說說bind、call、apply的區(qū)別

[參考答案]

call和apply的共同點(diǎn)

都能夠改變函數(shù)執(zhí)行時(shí)的上下文，將一個(gè)對(duì)象的方法交給另一個(gè)對(duì)象來執(zhí)行，并且是立即執(zhí)行的
調(diào)用call和apply的對(duì)象，必須是一個(gè)函數(shù)Function

call和apply的區(qū)別

apply的第二個(gè)參數(shù)，必須是數(shù)組或者類數(shù)組，它會(huì)被轉(zhuǎn)換成類數(shù)組，傳入函數(shù)中，并且會(huì)被映射到函數(shù)對(duì)應(yīng)的參數(shù)上, 而call從第二個(gè)參數(shù)開始，可以接收任意個(gè)參數(shù)

bind

bind()方法創(chuàng)建一個(gè)新的函數(shù)，與apply和call比較類似，也能改變函數(shù)體內(nèi)的this指向。不同的是，bind方法的返回值是函數(shù)，并且需要稍后調(diào)用，才會(huì)執(zhí)行。而apply和call 則是立即調(diào)用

34. ES6中的map和原生的對(duì)象有什么區(qū)別

[參考答案]

object和Map存儲(chǔ)的都是鍵值對(duì)組合。區(qū)別：object的鍵的類型是字符串；map的鍵的類型可以是任意類型；另外，object獲取鍵值使用Object.keys(返回?cái)?shù)組)Map獲取鍵值使用map變量.keys() (返回迭代器)。

35. 說說H5手機(jī)端的適配的幾種方案

[參考答案]

js實(shí)現(xiàn)一

css @media媒介查詢(蘇寧易購(gòu)實(shí)現(xiàn)方式)
手淘的lib-flexible實(shí)現(xiàn)方式

36. 用js如何去除url中的#號(hào)

[參考答案]

情景一: 單純將hash路由改變成history路由即可去除hash的#號(hào),此時(shí)需要服務(wù)器做路由重定向,比如nginx, node重定向
情景二: 單純?nèi)コ?

function dropHash(url) { let i = url.indexOf('#') return i > -1 ? url.replace(/#/g, '') : url}復(fù)制代碼

37. Redux狀態(tài)管理器和變量掛載到window中有什么區(qū)別

[參考答案] redux通過制定一套嚴(yán)格的規(guī)范，提供一種規(guī)范式的api和使用方式來處理狀態(tài), 適合大型項(xiàng)目和多人協(xié)同開發(fā)的項(xiàng)目，雖然代碼編寫有些繁復(fù)，但整體數(shù)據(jù)流向清楚，便于問題跟蹤和后期維護(hù),并且支持狀態(tài)回溯.而window的變量管理比較混亂,維護(hù)不當(dāng)還會(huì)造成變量污染,不適合中大型項(xiàng)目的開發(fā).

38. webpack和gulp的優(yōu)缺點(diǎn)

[參考答案]

gulp webpack 定位基于任務(wù)流的自動(dòng)化打包工具模塊化打包工具優(yōu)點(diǎn) 易于學(xué)習(xí)和理解, 適合多頁(yè)面應(yīng)用開發(fā) 可以模塊化的打包任何資源,適配任何模塊系統(tǒng),適合SPA單頁(yè)應(yīng)用的開發(fā) 缺點(diǎn) 不太適合單頁(yè)或者自定義模塊的開發(fā) 學(xué)習(xí)成本低,配置復(fù)雜,通過babel編譯后的js代碼打包后體積過大

39. 說說jsonp為什么不支持post方法

[參考答案]

瀏覽器的同源策略限制從一個(gè)源加載的文檔或腳本與來自另一個(gè)源的資源進(jìn)行交互,jsonp跨域本質(zhì)上是通過動(dòng)態(tài)script標(biāo)簽, 本質(zhì)上也是對(duì)靜態(tài)資源的訪問,所以只能是get請(qǐng)求

40. 說說棧和堆的區(qū)別, 垃圾回收時(shí)棧和堆的區(qū)別以及棧和堆具體怎么存儲(chǔ)

[參考答案]

1.從定義和存取方式上說:

棧stack為自動(dòng)分配的內(nèi)存空間, 它由系統(tǒng)自動(dòng)釋放, 特點(diǎn)是"LIFO，即后進(jìn)先出(Last in, first out)"。數(shù)據(jù)存儲(chǔ)時(shí)只能從頂部逐個(gè)存入，取出時(shí)也需從頂部逐個(gè)取出,js的基本數(shù)據(jù)類型(Undefined、Null、Boolean、Number和String). 基本類型在內(nèi)存中占據(jù)空間小、大小固定，他們的值保存在棧空間，按值訪問
對(duì)heap是動(dòng)態(tài)分配的內(nèi)存，大小不定也不會(huì)自動(dòng)釋放. 特點(diǎn)是"無序"的key-value"鍵值對(duì)"存儲(chǔ)方式. 比如js的對(duì)象,數(shù)組. 引用類型占據(jù)空間大、大小不固定, 棧內(nèi)存中存放地址指向堆(heap)內(nèi)存中的對(duì)象。是按引用訪問的

2.從js數(shù)據(jù)的存取過程上說:

棧內(nèi)存中存放的是對(duì)象的訪問地址，在堆內(nèi)存中為這個(gè)值分配空間。這個(gè)值大小不固定，因此不能把它們保存到棧內(nèi)存中。但內(nèi)存地址大小的固定的，因此可以將內(nèi)存地址保存在棧內(nèi)存中。這樣，當(dāng)查詢引用類型的變量時(shí)，先從棧中讀取內(nèi)存地址，然后再通過地址找到堆中的值。

3.棧內(nèi)存和堆內(nèi)存與垃圾回收機(jī)制的聯(lián)系和清除方式:

垃圾回收機(jī)制: JavaScript中有自動(dòng)垃圾回收機(jī)制，會(huì)通過標(biāo)記清除的算法識(shí)別哪些變量對(duì)象不再使用，對(duì)其進(jìn)行銷毀。開發(fā)者也可在代碼中手動(dòng)設(shè)置變量值為null(xxx = null)進(jìn)行清除，讓引用鏈斷開，以便下一次垃圾回收時(shí)有效回收。其次, 函數(shù)執(zhí)行完成后，函數(shù)局部環(huán)境聲明的變量不再需要時(shí)，就會(huì)被垃圾回收銷毀(理想的情況下，閉包會(huì)阻止這一過程)。全局環(huán)境只有頁(yè)面退出時(shí)才會(huì)出棧，解除變量引用。所以工程師們應(yīng)盡量避免在全局環(huán)境中創(chuàng)建全局變量，如需使用，一定要在不需要時(shí)手動(dòng)標(biāo)記清除，將內(nèi)存釋放。
棧內(nèi)存和堆內(nèi)存通常與垃圾回收機(jī)制有關(guān)。之所以會(huì)區(qū)分棧內(nèi)存和堆內(nèi)存,目的是使程序運(yùn)行時(shí)占用的內(nèi)存最小。當(dāng)某個(gè)方法執(zhí)行時(shí)，都會(huì)建立自己的內(nèi)存棧，在這個(gè)方法內(nèi)定義的變量將會(huì)逐個(gè)放入棧內(nèi)存里，隨著方法的執(zhí)行結(jié)束，這個(gè)方法的內(nèi)存棧也將自然銷毀了。因此，所有在方法中定義的變量都是放在棧內(nèi)存中的；當(dāng)我們創(chuàng)建一個(gè)對(duì)象時(shí)，對(duì)象會(huì)被保存到運(yùn)行時(shí)數(shù)據(jù)區(qū)中，以便反復(fù)利用(因?yàn)閷?duì)象的創(chuàng)建內(nèi)存開銷較大)，這個(gè)運(yùn)行時(shí)數(shù)據(jù)區(qū)就是堆內(nèi)存。堆內(nèi)存中的對(duì)象不會(huì)隨方法的結(jié)束而銷毀，即使方法結(jié)束后，這個(gè)對(duì)象還可能被另一個(gè)引用變量所引用，則這個(gè)對(duì)象依然不會(huì)被銷毀，只有當(dāng)一個(gè)對(duì)象沒有任何引用變量引用它時(shí)，系統(tǒng)的垃圾回收機(jī)制才會(huì)在循環(huán)收集的過程中回收。

41. ES6中l(wèi)et塊作用域是怎么實(shí)現(xiàn)的

[參考答案]

可以通過閉包自執(zhí)行函數(shù)實(shí)現(xiàn)塊作用域

42. 介紹排序算法和快排原理

[參考答案]

排序算法有:冒泡排序, 希爾排序, 快速排序, 插入排序, 歸并排序, 堆排序, 桶排序等.

快速排序原理:

通過一趟排序?qū)⒁判虻臄?shù)據(jù)分割成獨(dú)立的兩部分，其中一部分的所有數(shù)據(jù)都比另外一部分的所有數(shù)據(jù)都要小，然后再按此方法對(duì)這兩部分?jǐn)?shù)據(jù)分別進(jìn)行快速排序，整個(gè)排序過程可以遞歸進(jìn)行，以此達(dá)到整個(gè)數(shù)據(jù)變成有序序列。

43. 說說node文件查找的優(yōu)先級(jí)

[參考答案] 從文件模塊緩存中加載 > 從原生模塊加載 > 從文件加載

44. WebView和原生是如何通信的

[參考答案]

使用Android原生的JavascriptInterface來進(jìn)行js和java的通信
UrlRouter(通過內(nèi)部實(shí)現(xiàn)的框架去攔截前端寫的url，如果符合UrlRouter的協(xié)議的話，就執(zhí)行相應(yīng)的邏輯)
WebView 中的 prompt/console/alert 攔截，通常使用 prompt避免副作用
API注入，通過Native獲取JavaScript環(huán)境上下文，并直接在上面添加方法，使js可以直接調(diào)用

45. pm2怎么做進(jìn)程管理，如何解決進(jìn)程崩潰問題

[參考答案]

通過pm2 start去開啟一個(gè)進(jìn)程, pm2 stop去停止某個(gè)進(jìn)程, pm2 list去查看進(jìn)程列表, pm2 monit查看每個(gè)進(jìn)程的cpu使用情況, pm2 restart重啟指定應(yīng)用等
進(jìn)程奔潰可以用過設(shè)置自動(dòng)重啟或者限制應(yīng)用運(yùn)行內(nèi)存max_memory_restart(最大內(nèi)存限制數(shù)，超出自動(dòng)重啟)

46. 直接給一個(gè)數(shù)組項(xiàng)賦值，Vue 能檢測(cè)到變化嗎,為什么？

[參考答案] vue中的數(shù)組的監(jiān)聽不是通過Object.defineProperty來實(shí)現(xiàn)的，是通過對(duì)'push', 'pop','shift','unshift','splice', 'sort','reverse'等改變數(shù)組本身的方法來通知監(jiān)聽的,所以直接給數(shù)組某一項(xiàng)賦值無法監(jiān)聽到變化,解決方案如下:

用vue的set方法改變數(shù)組或者對(duì)象
用改變數(shù)組本身的方法如splice, pop, shift等
用深拷貝,解構(gòu)運(yùn)算符

總結(jié)

面試只是進(jìn)入公司的第一步,如何走好它,需要自身的不斷努力和學(xué)習(xí),所以不要沉迷于走捷徑,踏踏實(shí)實(shí)的學(xué)技術(shù)吧. 年前筆者會(huì)總結(jié)一下筆者2019年的技術(shù)成長(zhǎng)與規(guī)劃, 希望能和大家繼續(xù)分享真正的前端技術(shù).

最后

如果想了解更多H5游戲, webpack，node，gulp，css3，javascript，nodeJS，canvas數(shù)據(jù)可視化等前端知識(shí)和實(shí)戰(zhàn)，歡迎在《趣談前端》學(xué)習(xí)討論，共同探索前端的邊界。

總結(jié)

以上是生活随笔為你收集整理的promise的状态以及api介绍_2019年，盘点一些我出过的前端面试题以及对求职者的建议的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：做计算机工作的要专用手机吗,怎么在手机上
下一篇：编译运行linux0.12,linux0