如果格式苛萎、圖片有問題谐丢，歡迎查看原文（可能會有更新馋吗、也歡迎交流）：《Senior front-end Engineer Interview – 高級前端工程師面試準備知識清單》
最近接到一個偏前端的面試通知，作為一個老司機缨叫，突然發(fā)現(xiàn)無從下手延届，前端不就是HTML + CSS + JS三件套嘛剪勿，好像什么都挺清楚的，但是深入一想祷愉，好像知識體系還是非常模糊的窗宦，這里特地整理下材料赦颇，希望對大家有幫助二鳄。
當(dāng)然我在海外，不知道適應(yīng)國內(nèi)的情況不媒怯。
一订讼、基礎(chǔ)知識
第一步，三件套大保缴劝（HTML + CSS + JS）的基礎(chǔ)知識需要過一遍欺殿，最好嘛從頭看一遍寄纵，找找自己哪些地方不是很清晰的，其實即便你做了很久的前端脖苏，很多基礎(chǔ)非常有可能依舊不是很清楚程拭。
看W3C或者我找到一個網(wǎng)站有知識的整理，還不錯：http://www.runoob.com/html/html-tutorial.html
以下是我找到的一些問題棍潘，復(fù)習(xí)完基礎(chǔ)之后恃鞋，可以試試。
Javascript
JS是前端唯一的亦歉，可以在面試中挖掘你水平的語言恤浪，所以需要非常深入的了解。以下幾個知識點可以用于自我檢測：
Execution context, especially lexical scope and closures.
Hoisting, function & block scoping and function expressions & declarations.
Binding – specifically call, bind, apply and lexical this.
Object prototypes, constructors and mixins.
Composition and high order functions.
Event delegation and bubbling.
Type Coercion using typeof, instanceof and Object.prototype.toString.
Handling asynchronous calls with callbacks, promises, await and async.
When to use function declarations and expressions.
What does the $ represent when using jQuery?
Explain the this keyword and it’s behaviour in JS.
What is the difference between the DOMContentLoaded and window.load events?
This This This!!!!
Prototype
DOM
這塊其實概念很簡單肴楷，但是很多時候我們用Jquery或者其他framework來處理水由，所以可能會非常不熟悉。
Selecting or finding nodes using document.querySelector and in older browsers document.getElementsByClassName.
Traversal up and down –?Node.parentNode,?Node.firstChild,?Node.lastChild?and?Node.childNodes.
Traversal left and right –?Node.previousSibling?and?Node.nextSibling.
Manipulation – add, remove, copy, and create nodes in the DOM tree. You should know operations such as how to change the text content of a node and toggle, remove or add a CSS classname.
Performance – touching the DOM can be expensive when you have many nodes, you should at least know about document fragments and node caching.
CSS
Layout – sitting elements next to each other and how to place elements in two columns vs three columns.
Knowledge demonstration questions and quizzes (Explain the box model, create a tooltip plugin, describe the different values of CSS position)
Responsive design – changing an element’s dimensions based on the browser width size.
Adaptive design – changing an element’s dimensions based on specific break points.
Specificity – how to calculate a selector’s specificity and how the cascade affects attributes.
Appropriate namespacing and naming of classnames.
What is the difference between display: block, display: inline and display: inline-block?
Explain the box-model and how it affects various CSS properties.
What is a normal HTTP request made up of?
What is BEM and explain why using something like it could be useful in your CSS?
position: relative, position: absolute and position: fixed
HTML
Semantic markup.
Tag attributes, such as disabled, async, defer and when to use data-*.
Knowing how to declare your doctype (most people are not writing new pages every day and forget this) and what meta tags are available to use.
Accessibility concerns, for example, making sure an input checkbox has a larger responding area (use label “for”). Also, role=”button”, role=”presentation”, etc.
二赛蔫、提高篇
作為senior的工程師砂客，光會大保健肯定不行，面試的時候還有cache呵恢，系統(tǒng)設(shè)計鞭盟，proformance優(yōu)化、算法等瑰剃。在這里整理下相關(guān)知識：
Critical rendering path.
Service workers.
Image optimizations.
Lazy loading and bundle splitting.
General implications of HTTP/2 and server-push.
When to prefetch and preload resources.
Reduce browser reflows and when to promote an element to the GPU.
Differences between the browser layout, compositing and painting.
HTTP requests – GET and POST along with associated headers such as Cache-Control, ETag, Status Codes, and Transfer-Encoding.
Meta questions – About source control, UI, HTTP & the web in general etc. See if the candidate knows a bit more beyond their specific topic of interest.
REST vs RPC.
Security – when to use JSONP, CORs, and iFrame policies.
CSS Preprocessing
Testing/Debug
Building and Automation Tools
Common cross browser issues and how to resolve them
CSS and JS minifying
三齿诉、資料推薦
對于this弄不清楚的，可以讀一讀這個：
https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/README.md#you-dont-know-js-this–object-prototypes
JS基礎(chǔ)梳理：這位朋友寫的非常棒晌姚，搜“JavaScript學(xué)習(xí)總結(jié)”：https://segmentfault.com/u/trigkit4/articles?page=5
四粤剧、筆記
這塊是我自己的筆記，只記錄了自己認為需要回看的東西
HTML
<base> 標簽描述了基本的鏈接地址/鏈接目標挥唠，該標簽作為HTML文檔中所有的鏈接標簽的默認鏈接
Block-Level, it takes whole line, <h1>, <p>, <ul>, <table>, <div>
inline, won’t change line, like <span>, <b>, <td>, <a>, <img>
只有在瀏覽器不支持腳本或者禁用腳本時抵恋，才會顯示 <noscript> 元素中的內(nèi)容
XHTML 是以 XML 格式編寫的嚴格更純凈的 HTML
HTML5: Canvas, SVG, MathML, Drag&Drop, Location, Video, Audio, input type, datalist
localStorage: 一直存在
sessionStorage: 關(guān)閉就clean
websocket
SSE – Server-sent event
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<div class=”container”><div class=”row” ><div class=”col-xs-6 col-sm-3″>
What is progressive rendering? – make page faster
Semantic tags are self-explanatory, <img>
CDN的版本控制：last-modified/etag控制，沒變化返回304宝磨，另外cache的控制是由expire/cafche-control
CSS
多重樣式優(yōu)先級: 內(nèi)聯(lián)樣式）Inline style > （內(nèi)部樣式）Internal style sheet >（外部樣式）External style sheet > 瀏覽器默認樣式
Box Modal:
inline element 不能設(shè)置高度弧关，寬度。從而理解了inline-block
相對定位唤锉，相對于元素的正常位置來進行定位世囊。元素在頁面占據(jù)位置×椋可以使用 top right bottom left 移動元素位置株憾。
絕對定位，相對于最近一級的 定位不是 static 的父元素來進行定位。元素在頁面不占據(jù)位置嗤瞎。 可以使用 top right bottom left 移動元素位置墙歪。
vendor-prefixed properties offered by the relevant rendering engines (-webkit for Chrome, Safari; -moz for Firefox, -o for Opera, -ms for Internet Explorer)
How do browsers read CSS? – From right to left.
pseudo-elements – list: first-child
Difference between standard/ strict mode and quirks mode? – quirks mode in browser allows u to render page for as old browsers. This is for backward compatibility.
JavaScript
document.getElementById(“demo”).innerHTML
局部變量會在函數(shù)運行以后被刪除。全局變量會在頁面關(guān)閉后被刪除
如果您把值賦給尚未聲明的變量贝奇，該變量將被自動作為全局變量聲明虹菲。如： carname=”Volvo”;
null和underfined：
typeof undefined ????????????// undefined
typeof null ?????????????????// object
null === undefined ??????????// false
null == undefined ???????????// true
5 種不同的數(shù)據(jù)類型：string, number, boolean, object, function
3 種對象類型：Object, Date, Array
2 個不包含任何值的數(shù)據(jù)類型：null, undefined
use strict
不允許使用未聲明的變量
不允許刪除變量或?qū)ο?/p>
不允許刪除函數(shù)
不允許變量重名
不允許對一個使用getter方法讀取的屬性進行賦值
變量名不能使用 “eval”, “arguments” 字符串
由于一些安全原因，在作用域 eval() 創(chuàng)建的變量不能被調(diào)用：
禁止this關(guān)鍵字指向全局對象掉瞳。
JavaScript處理常用的method
typeof()
Number(“3.2”)
toString()
indexOf()
substr()
charAt()
push() // to last
pop() // last one
shift() // remove first one
reverse()
addEventListener(“click”,function(){});
document.getElementById(“intro”);
document.getElementsByClassName(“intro”);
var myDate=new Date();
Math.round()
Math.random()
setInterval(function(){alert(“Hello”)},3000);
void: 該操作符指定要計算一個表達式但是不返回值届惋。
Hoisting: 是 JavaScript 默認將當(dāng)前作用域提升到前面去的的行為。使用表達式定義函數(shù)時無法提升菠赚。
arguments.length 屬性返回函數(shù)調(diào)用過程接收到的參數(shù)個數(shù)：
function myFunction(a, b) {
???return arguments.length;
}
當(dāng)函數(shù)沒有被自身的對象調(diào)用時脑豹， this 的值就會變成全局對象。
JSON.parse() 方法將數(shù)據(jù)轉(zhuǎn)換為 JavaScript 對象
setTimeout/setInterval/匿名函數(shù)執(zhí)行的時候衡查，this默認指向window對象
Jquery常用method
attr()
append()
addClass()
css()
$(selector).load(URL,data,callback);
$.get(URL,callback);
$.post(URL,data,callback);
React 大體包含下面這些概念：
組件
JSX
Virtual DOM
Data Flow
JavaScript 是面向?qū)ο蟮恼Z言瘩欺，但 JavaScript 不使用類。 JavaScript 基于 [prototype][1]
apply拌牲、call 二者而言俱饿，作用完全一樣，只是接受參數(shù)的方式不太一樣塌忽。func.call(this, arg1, arg2);func.apply(this, [arg1, arg2])
How would you organize your Javascript code?
Break the code into logical units, keep them all in separate files
Use a script to concatenate/minify the files into a single bundle which you will serve as part of your app
Use JS namespaces to avoid cluttering up the global namespace
How can you add a method to a class already defined? – prototype
attribute vs property
<input?type=“checkbox”?checked=true/>
$(‘input’).prop(‘checked’);?// returns true
$(‘input’).attr(‘checked’);?// returns “checked”
If an element has a default value, the attribute shows the default value even if the value has changed.
<input type="text" name="username" value="user123">
$('input').prop('value', '456user');
$('input').prop('value'); // returns "456user"
$('input').attr('value'); // returns "user123"
Can you name two programming paradigms important for JavaScript app developers?
Prototypal inheritance (also: prototypes, OLOO).
Functional programming (also: closures, first class functions, lambdas).
What do you think of AMD vs CommonJS?
AMD is better for browser, hence, the name ‘Asynchronous’, as it loads each distinct module in async manner instead of loading in one large file. No extra steps are required to use AMD, it works out-of-the-box. In my opinion, as it is its in Asynchronous nature, it makes alot of async http requests and may not be as performant as described by other devs.
While, CommonJS, is a standard, mostly used in servers and it loads modules synchronously, though extra step is required if you want your JS file size to be minified and compressed.
How do you organize your code? – model pattern, create model with method
What’s the difference between host objects and native objects?
Native objects: Object (constructor), Date , Math , parseInt , eval , string methods like indexOf and replace , array methods, …
Host objects (assuming browser environment): window , document , location , history , XMLHttpRequest , setTimeout , getElementsByTagName , querySelectorAll
Describe event bubbling.
Event Bubbling 即指某個事件不僅會觸發(fā)當(dāng)前元素拍埠，還會以嵌套順序傳遞到父元素中。直觀而言就是對于某個子元素的點擊事件同樣會被父元素的點擊事件處理器捕獲土居。避免 Event Bubbling 的方式可以使用event.stopPropagation() 或者 IE 9 以下使用event.cancelBubble枣购。
Ternary expression: a>b? c:d
Promises：Promise 則是把類似的異步處理對象和處理規(guī)則進行規(guī)范化， 并按照采用統(tǒng)一的接口來編寫
Event Loop: 優(yōu)化JS單線程問題擦耀，就是在程序中設(shè)置兩個線程：一個負責(zé)程序本身的運行棉圈，稱為”主線程”；另一個負責(zé)主線程與其他進程（主要是各種I/O操作）的通信眷蜓，被稱為”Event Loop線程”（可以譯為”消息線程”）分瘾。
How would you compare two objects in JavaScript? – JSON.stringify()
a = (2, 3, 5); what is the value of a? – 5. The comma operator evaluates each of its operands (from left to right) and returns the value of the last operand.
Does JavaScript pass parameter by value or by reference? – Primitive type (string, number, etc.) are passed by value and objects are passed by reference.
JS中提供了一個DocumentFragment的機制，相信大家對這個并不陌生吁系，它可以提供一個緩沖的機制德召，將DOM節(jié)點先放到內(nèi)存中，當(dāng)節(jié)點都構(gòu)造完成后汽纤，再將DocumentFragment對象添加到頁面中上岗，這時所有的節(jié)點都會一次渲染出來，這樣就能減少瀏覽器很多的負擔(dān)冒版，明顯的提高頁面渲染速度
How could you prevent a click on an anchor from going to the link? – preventDefault()
Travel Nodes
parentNode
childNodes[nodenumber]
firstChild
lastChild
nextSibling
previousSibling
.firstChild.nodeValue;
message bus for applications, message queues is for users and applications
HTML5 – Server-sent event
var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
{
???document.getElementById("result").innerHTML+=event.data + "<br>";
};
HTML5 – Web Worker
var w;
function startWorker() {
???if(typeof(Worker) !== "undefined") {
???????if(typeof(w) == "undefined") {
???????????w = new Worker("demo_workers.js");
???????}
???????w.onmessage = function(event) {
???????????document.getElementById("result").innerHTML = event.data;
???????};
???} else {
???????document.getElementById("result").innerHTML = "你的瀏覽器不支持 Web Workers...";
???}
}
function stopWorker()
{
???w.terminate();
???w = undefined;
}
HTML5 – WebStoarge
if (localStorage.clickcount)
{
???localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
???localStorage.clickcount=1;
}
document.getElementById("result").innerHTML=" 你已經(jīng)點擊了按鈕 " + localStorage.clickcount + " 次 ";
//保存數(shù)據(jù) ?
function save(){ ?
???var siteurl = document.getElementById("siteurl").value; ?
???var sitename = document.getElementById("sitename").value; ?
???localStorage.setItem(sitename, siteurl);
???alert("添加成功");
}
//查找數(shù)據(jù) ?
function find(){ ?
???var search_site = document.getElementById("search_site").value; ?
???var sitename = localStorage.getItem(search_site); ?
???var find_result = document.getElementById("find_result"); ?
???find_result.innerHTML = search_site + "的網(wǎng)址是：" + sitename; ?
}
Use Strict下的this
function f(){
return !this;
}
// 返回false液茎，因為"this"指向全局對象，"!this"就是false
function f(){
"use strict";
return !this;
}
// 返回true辞嗡，因為嚴格模式下捆等，this的值為undefined，所以"!this"為true续室。
Jquery Load
$("button").click(function(){
?$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
???if(statusTxt=="success")
?????alert("外部內(nèi)容加載成功!");
???if(statusTxt=="error")
?????alert("Error: "+xhr.status+": "+xhr.statusText);
?});
});
Jquery Post
$("button").click(function(){
???$.post("/try/ajax/demo_test_post.php",
???{
???????name:"菜鳥教程",
???????url:"http://www.runoob.com"
???},
???????function(data,status){
???????alert("數(shù)據(jù): \n" + data + "\n狀態(tài): " + status);
???});
});
Scope and hoisting
var a = 1;
function b() {
???a = 10;
???return;
???function a() {}
}
b();
console.log(a);
Explanation:
function declaration function a(){} is hoisted first and it behaves like var a = function () {};. Hence in local scope variable a is created.
If you have two variables with same name (one in global another in local), local variable always get precedence over global variable.
When you set a = 10;, you are setting the local variable a , not the global one. Hence, the value of global variable remain same and you get, 1 in the log. ref: js hoisting/scope
Extra: If you didnt have a function named as “a”, you will see 10 in the log.
Append Class
var li = document.createElement("li");
var text = document.createTextNode('Only one Item');
li.appendChild(text);
遍歷頁面所有元素
var all = document.getElementsByTagName("*");
for (var i=0, max=all.length; i < max; i++) {
????console.log(all[i]);
}
遍歷子節(jié)點
var usernameEle = document.getElementById("center");
?var childs = usernameEle.childNodes; ?
?for(var i = childs.length - 1; i >= 0; i--) { ?????
?????console.log(childs[i]); ?????
?}
參考文章：
https://www.linkedin.com/pulse/preparing-front-end-web-development-interview-2017-david-shariff
https://ashleynolan.co.uk/blog/a-guide-to-front-end-interviews
