面試題-持續(xù)更新-(附帶答案)

收錄字節(jié)面試題:

一面

1.說(shuō)一下瀏覽器緩存?

???♀? 瀏覽器緩存

2.cookie 與 session 的區(qū)別

Session 是在服務(wù)端保存的一個(gè)數(shù)據(jù)結(jié)構(gòu),用來(lái)跟蹤用戶的狀態(tài),這個(gè)數(shù)據(jù)可以保存在集群、數(shù)據(jù)庫(kù)、文件中;Cookie 是客戶端保存用戶信息的一種機(jī)制,用來(lái)記錄用戶的一些信息,也是實(shí)現(xiàn) Session 的一種方式
https://zhuanlan.zhihu.com/p/27561547

3.瀏覽器如何做到 session 的功能的。

其實(shí)就是考察 http 怎么處理無(wú)狀態(tài)是怎么處理的,具體可見 COOKIE 和 SESSION 有什么區(qū)別?里面的答案。

4.解釋一下:csrf 和 xss

XSS:惡意攻擊者往 Web 頁(yè)面里插入惡意 Script 代碼,當(dāng)用戶瀏覽該頁(yè)之時(shí),嵌入其中 Web 里面的 Script 代碼會(huì)被執(zhí)行,從而達(dá)到惡意攻擊用戶的目的。

CSRF:CSRF 攻擊是攻擊者借助受害者的 Cookie 騙取服務(wù)器的信任,可以在受害者毫不知情的情況下以受害者名義偽造請(qǐng)求發(fā)送給受攻擊服務(wù)器,從而在并未授權(quán)的情況下執(zhí)行在權(quán)限保護(hù)之下的操作。

詳見:前端安全面試題

5.怎么防止 csrf 和 xss

詳見:前端安全面試題

6.CORS 是如何做的?

服務(wù)端設(shè)置 Access-Control-Allow-Origin 就可以開啟 CORS。

7.對(duì)于 CORS ,Get 和 POST 有區(qū)別嗎?

其實(shí)想考察的就是什么時(shí)候會(huì)有預(yù)檢請(qǐng)求(option 請(qǐng)求)。

8.了解 HTTPS 的過(guò)程嗎?

推薦浪浪的 深入理解 HTTPS 工作原理

9.webpack 如何做性能優(yōu)化

webpack 做性能優(yōu)化主要是考慮打包體積和打包速度。
體積分析用 webpack-bundle-analyzer 插件,速度分析用:speed-measure-webpack-plugin 插件。
打包速度優(yōu)化瓶子君的:玩轉(zhuǎn) webpack,使你的打包速度提升 90%。

10.跨域的處理方案有哪些

常用的:jsonp、CORS、nginx 代理,完整的大概是九種,可見:九種跨域方式實(shí)現(xiàn)原理(完整版)

11.es module 和 commonjs 的區(qū)別

高頻題,考察 ES6 模塊和 CommonJS 模塊 的區(qū)別。關(guān)鍵點(diǎn):1. 前者是值的引用,后者是值的拷貝。2.前者編譯時(shí)輸出接口,后者運(yùn)行時(shí)加載。

推薦文章:前端模塊化:CommonJS,AMD,CMD,ES6

12.react 里如何做動(dòng)態(tài)加載

React.lazy ,另外通過(guò) webpack 的動(dòng)態(tài)加載:import() 和 ensure.require

13.動(dòng)態(tài)加載的原理是啥,就是 webpack 編譯出來(lái)的代碼

講道理 webpack 動(dòng)態(tài)加載就兩種方式:import()和 require.ensure,不過(guò)他們實(shí)現(xiàn)原理是相同的。
我覺(jué)得這道題的重點(diǎn)在于動(dòng)態(tài)的創(chuàng)建 script 標(biāo)簽,以及通過(guò) jsonp 去請(qǐng)求 chunk,推薦的文章是:webpack 是如何實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)入的

14.筆試題:頁(yè)面結(jié)構(gòu)包括頁(yè)頭(永遠(yuǎn)在頂部)、主體內(nèi)容、頁(yè)腳,頁(yè)腳永遠(yuǎn)在頁(yè)面底部(不是窗口底部),即內(nèi)容高度不夠時(shí),頁(yè)腳也要保證在頁(yè)面底部

常規(guī)題,考察基本的布局

15.筆試題:寫 new 的執(zhí)行過(guò)程

我們先來(lái)看,new 實(shí)現(xiàn)的功能

// Otaku 御宅族,簡(jiǎn)稱宅
function Otaku (name, age) {
  this.name = name;
  this.age = age;
 this.habit = 'games';
}
// 因?yàn)槿狈﹀憻挼木壒剩眢w強(qiáng)度讓人擔(dān)憂
Otaku.prototype.strength = 60;
Otaku.prototype.sayYourName = function() {
  console.log("i, am "+ this.name);
}
var person = new Otaku("kevin", 18);
console.log(person.name); //kevin
console.log(person.habit); //games
console.log(person.strength); //60

person.sayYourName(); //i, am kevin

我們可以看出,返回一個(gè)新得對(duì)象 person,然后person可以訪問(wèn)構(gòu)造函數(shù) Otaku 的屬性 和Otaku.prototype的屬性。

new 的執(zhí)行過(guò)程大致如下:

  • 創(chuàng)建一個(gè)對(duì)象
  • 將對(duì)象的 __proto__ 指向 構(gòu)造函數(shù)的 prototype
  • 將這個(gè)對(duì)象作為構(gòu)造函數(shù)的 this
  • 返回該對(duì)象

根據(jù)思路,這樣我們就可以手寫一個(gè)自己的new~

funtion myNew() {
  let obj = new Object();
  let Contructor = [].shift.call(arguments);
  obj.__proto__ = Contructor.prototype;
  let ret = Construct.apply(obj, arguments);
  return typeof ret === 'object' ? ret :obj;
};

//或者
function myNew (Con, ...arges) {
  var obj = Object.create(Con.prototype);
  let res = Con.apply(obj, ...arges);
  return typeof res === 'object' ? res: obj;
}

16.筆試題:寫一個(gè)處理加法可能產(chǎn)生精度的函數(shù),比如 0.1 + 0.2 = 0.3

思路:對(duì)于浮點(diǎn)數(shù)在底層處理是有問(wèn)題的,所以目的就是想辦法將所以的浮點(diǎn)數(shù)轉(zhuǎn)化為整數(shù)進(jìn)行處理,同時(shí)乘以一個(gè)倍數(shù)(A),然后加起來(lái)后再除以這個(gè)倍數(shù)(A),這個(gè)倍數(shù)應(yīng)該是兩個(gè)數(shù)中最小的那個(gè)數(shù)的倍數(shù),比如 0.1 + 0.02 ,那么應(yīng)該同時(shí)乘以 100,變?yōu)?10 + 2,然后再將值除以 100。

17.1000000000 + 1000000000 允許返回字符串 處理大數(shù)

大數(shù)問(wèn)題就是通過(guò)字符串來(lái)處理,從后往前加,然后處理進(jìn)位的問(wèn)題。

二面

1.聊項(xiàng)目

項(xiàng)目基本是問(wèn):

項(xiàng)目難點(diǎn)以及怎么解決的
項(xiàng)目有哪些亮點(diǎn)?

2.寫一個(gè) es6 的繼承過(guò)程

這個(gè)題我覺(jué)得出得很好,很考察基本功。


// 這個(gè)是要實(shí)現(xiàn)的方法
createClass = fun(sons, super) {
    // TODO
    return fn;
}

// 這是個(gè) es6 的一個(gè)例子,要實(shí)現(xiàn) extends 的功能。
class Man extends Human {
    cons (args) {
        super(args)
      // xxxxx
    }

    speak() {
        console.log('')
    }
}

3.寫一個(gè)大數(shù)相乘的解決方案。傳兩個(gè)字符串進(jìn)來(lái),返回一個(gè)字符串

function multi(str1, str2) {

}
這道題跟一面的時(shí)候思路差不多,只是進(jìn)位的時(shí)候不一定是 1。

三面

1.聊項(xiàng)目

2.寫一個(gè)防抖函數(shù)

3.算法題:https://leetcode-cn.com/problems/bu-ke-pai-zhong-de-shun-zi-lcof/

小節(jié)
字節(jié)果然是出了名的考算法題比較多的,基本每面都會(huì)算法題和編程題,對(duì)編程能力比較看重吧。

講道理一面還是比較常規(guī)的,二三面因?yàn)槎际菆F(tuán)隊(duì) leader 和更高級(jí)別的,問(wèn)的技術(shù)細(xì)節(jié)也比較少了,重點(diǎn)考察一些技術(shù)方案和項(xiàng)目的問(wèn)題。

轉(zhuǎn)載:桃翁
原文詳見:http://www.taoweng.site/index.php/archives/321/

加油,奧里給~~

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容