前端面試題彙總
React
React生命週期？執行流程？
Component與PureComponent區別？
區別點：javascript
PureComponent自帶經過props和state的淺對比來實現 shouldComponentUpate()，而Component沒有。php
PureComponent缺點css
可能會因深層的數據不一致而產生錯誤的否認判斷，從而shouldComponentUpdate結果返回false，界面得不到更新。html
PureComponent優點前端
不須要開發者本身實現shouldComponentUpdate，就能夠進行簡單的判斷來提高性能。html5
Reconcilation過程（diff算法）？key的做用？
Redux原理？什麼是store？Redux的三大原則？
setstate
Redux三大原則
- 1 惟一數據源
- 2 保持只讀狀態
- 3 數據改變只能經過純函數來執行
1惟一數據源
整個應用的state都被存儲到一個狀態樹裏面，而且這個狀態樹，只存在於惟一的store中java
2保持只讀狀態
state是隻讀的，惟一改變state的方法就是觸發action，action是一個用於描述以發生時間的普通對象node
3數據改變只能經過純函數來執行
使用純函數來執行修改，爲了描述action如何改變state的，你須要編寫reducersreact
dva使用流程，使用時數據流向，核心功能封裝了哪些庫？
數據的改變發生一般是經過用戶交互行爲或者瀏覽器行爲（如路由跳轉等）觸發的，當此類行爲會改變數據的時候能夠經過 dispatch 發起一個 action，若是是同步行爲會直接經過 Reducers 改變 State ，若是是異步行爲（反作用）會先觸發 Effects 而後流向 Reducers 最終改變 State，因此在 dva 中，數據流向很是清晰簡明，而且思路基本跟開源社區保持一致css3
Subscriptions
Subscriptions 是一種從 源 獲取數據的方法，它來自於 elm。
Subscription 語義是訂閱，用於訂閱一個數據源，而後根據條件 dispatch 須要的 action。數據源能夠是當前的時間、服務器的 websocket 鏈接、keyboard 輸入、geolocation 變化、history 路由變化等等。
Effect
Effect 被稱爲反作用，在咱們的應用中，最多見的就是異步操做。它來自於函數編程的概念，之因此叫反作用是由於它使得咱們的函數變得不純，一樣的輸入不必定得到一樣的輸出。
dva 爲了控制反作用的操做，底層引入了redux-sagas作異步流程控制，因爲採用了generator的相關概念，因此將異步轉成同步寫法，從而將effects轉爲純函數。
Reducer
在 dva 中，reducers 聚合積累的結果是當前 model 的 state 對象。經過 actions 中傳入的值，與當前 reducers 中的值進行運算得到新的值（也就是新的 state）。須要注意的是 Reducer 必須是純函數，因此一樣的輸入必然獲得一樣的輸出，它們不該該產生任何反作用。而且，每一次的計算都應該使用immutable data，這種特性簡單理解就是每次操做都是返回一個全新的數據（獨立，純淨），因此熱重載和時間旅行這些功能纔可以使用。
State
State 表示 Model 的狀態數據，一般表現爲一個 javascript 對象（固然它能夠是任何值）；操做的時候每次都要看成不可變數據（immutable data）來對待，保證每次都是全新對象，沒有引用關係，這樣才能保證 State 的獨立性，便於測試和追蹤變化
Action
Action 是一個普通 javascript 對象，它是改變 State 的惟一途徑。不管是從 UI 事件、網絡回調，仍是 WebSocket 等數據源所得到的數據，最終都會經過 dispatch 函數調用一個 action，從而改變對應的數據。action 必須帶有 type 屬性指明具體的行爲，其它字段能夠自定義，若是要發起一個 action 須要使用 dispatch 函數；須要注意的是 dispatch 是在組件 connect Models之後，經過 props 傳入的
dispatching function 是一個用於觸發 action 的函數，action 是改變 State 的惟一途徑，可是它只描述了一個行爲，而 dipatch 能夠看做是觸發這個行爲的方式，而 Reducer 則是描述如何改變數據的。
在 dva 中，connect Model 的組件經過 props 能夠訪問到 dispatch，能夠調用 Model 中的 Reducer 或者 Effects
函數組件和class組件區別？
區別： 類繼承的方式，相較於函數式組件，有更多的特性。
內部狀態： state
生命週期函數
場景一：若是一開始我就知道這個組件須要用到state 或者生命週期函數組件時，就要絕不猶豫的使用類繼承的方式。
場景二：若是一開始用不到這些特性的時候，我會先用函數式組件，若是隨着業務的演進，組件須要應用到這些特性的時候，我會再把它重構成類繼承的方式。start : 這個重構什麼簡單，只需將原來的函數變成組件類的 reader 方法便可。
refs的做用？
Refs 是 React 提供給咱們的安全訪問 DOM 元素或者某個組件實例的句柄。咱們能夠爲元素添加ref屬性而後在回調函數中接受該元素在 DOM 樹中的句柄，該值會做爲回調函數的第一個參數返回
HOC
什麼是高階組件?
簡稱：HOC
全稱：High Order Component
高階組件其實不是什麼高深莫測的東西，它相似於高階函數，就是一個純函數，它會接受一個組件做爲參數，而後返回一個新的組件。
何時使用HOC?
在React中，組件是代碼複用的主要單元。可是業務開發過程當中不免會遇到一些個性化的需求，此時若是再去從新開發一個組件，會讓後續的維護成本變高。
接下來舉一個簡單的例子說明
假設有需求以下
- v1.0：頁面上顯示10行'hello, world!'
- v2.0：頁面上要多加10行‘HELLO,WORLD!'
要實現上述的需求，第一個版本會寫一個顯示hello,world！的組件，這個沒有問題。第二個版本能夠選擇寫一個顯示HELLO,WORLD！的組件，或者在第一個組件的基礎上包裝一下，只給第一個組件返回的數據作一個轉成大寫的處理。
我用HOC的方式寫一下示例代碼，很快就能明白
v1.0的組件示例代碼以下：
class HelloWorld extends React.Component {
render() {
return "hello,world!"
}
}
ReactDOM.render(<HelloWorld />, document.querySelector("#root"))複製代碼
v2.0的組件示例代碼以下：
// HOC函數，實現v2.0版本的需求
export const toUpperCaseHoc = function(WrappedComponent) {
return class Hoc extends React.Component {
render() {
const { text } = this.props;
const text2Upper = text.toUpperCase();
return <WrappedComponent text={text2Upper} />;
}
};
};
// v1.0版本實現的組件
export class HelloWorld extends React.Component {
render() {
return this.props.text;
}
}
// 用HOC包裝後生成的新的組件，符合v2.0版本的需求，同時包含了v1.0的其它功能
const HelloWorld2Upper = toUpperCaseHoc(HelloWorld);
ReactDOM.render(<HelloWorld2Upper text="hello,world!" />, document.querySelector('#root'));複製代碼
總結
業務開發中可能會有一些功能大部分邏輯類似，部分個性化，這個時候能夠考慮一下是否是能夠開發一個基礎組件，在基礎組件的基礎上去增長一些個性化的需求。
最後，一個HOC最好只作一件事。
能夠參考：React官方高階組件相關文檔
connect provider
react-redux
在react-redux 框架中，給我提供了兩個經常使用的API來配合Redux框架的使用，其實在咱們的實際項目開發中，咱們徹底能夠不用react-redux框架，可是若是使用此框架，就如虎添翼了。
咱們來簡單聊聊這兩個經常使用的API
- connect()
- Provider 組件
UI 組件
UI 組件有如下幾個特徵。
- 只負責 UI 的呈現，不帶有任何業務邏輯
- 沒有狀態（即不使用this.state這個變量）
- 全部數據都由參數（this.props）提供
- 不使用任何 Redux 的 API
下面就是一個 UI 組件的例子。
const Title =
value => <h1>{value}</h1>;複製代碼
由於不含有狀態，UI 組件又稱爲"純組件"，即它純函數同樣，純粹由參數決定它的值。
容器組件
容器組件的特徵偏偏相反。
- 負責管理數據和業務邏輯，不負責 UI 的呈現
- 帶有內部狀態
- 使用 Redux 的 API
總之，只要記住一句話就能夠了：UI 組件負責 UI 的呈現，容器組件負責管理數據和邏輯。
你可能會問，若是一個組件既有 UI 又有業務邏輯，那怎麼辦？回答是，將它拆分紅下面的結構：外面是一個容器組件，裏面包了一個UI 組件。前者負責與外部的通訊，將數據傳給後者，由後者渲染出視圖。
React-Redux 規定，全部的 UI 組件都由用戶提供，容器組件則是由 React-Redux 自動生成。也就是說，用戶負責視覺層，狀態管理則是所有交給它。
connect()
React-Redux 提供connect方法，用於從 UI 組件生成容器組件。connect的意思，就是將這兩種組件連起來。
import { connect } from 'react-redux'
const VisibleTodoList = connect()(TodoList);複製代碼
上面代碼中，TodoList是 UI 組件，VisibleTodoList就是由 React-Redux 經過connect方法自動生成的容器組件。
可是，由於沒有定義業務邏輯，上面這個容器組件毫無心義，只是 UI 組件的一個單純的包裝層。爲了定義業務邏輯，須要給出下面兩方面的信息。
- 輸入邏輯：外部的數據（即state對象）如何轉換爲 UI 組件的參數
- 輸出邏輯：用戶發出的動做如何變爲 Action 對象，從 UI 組件傳出去。
所以，connect方法的完整 API 以下。
import { connect } from 'react-redux'
const VisibleTodoList = connect(
mapStateToProps,
mapDispatchToProps
)(TodoList)複製代碼
上面代碼中，connect方法接受兩個參數：mapStateToProps和mapDispatchToProps。它們定義了 UI 組件的業務邏輯。前者負責輸入邏輯，即將state映射到 UI 組件的參數（props），後者負責輸出邏輯，即將用戶對 UI 組件的操做映射成 Action。
mapStateToProps()
mapStateToProps是一個函數。它的做用就是像它的名字那樣，創建一個從（外部的）state對象到（UI 組件的）props對象的映射關係。
做爲函數，mapStateToProps執行後應該返回一個對象，裏面的每個鍵值對就是一個映射。請看下面的例子。
const mapStateToProps = (state) => {
return {
todos: getVisibleTodos(state.todos, state.visibilityFilter)
}
}複製代碼
上面代碼中，mapStateToProps是一個函數，它接受state做爲參數，返回一個對象。這個對象有一個todos屬性，表明 UI 組件的同名參數，後面的getVisibleTodos也是一個函數，能夠從state算出 todos 的值。
下面就是getVisibleTodos的一個例子，用來算出todos。
const getVisibleTodos = (todos, filter) => {
switch (filter) {
case 'SHOW_ALL':
return todos
case 'SHOW_COMPLETED':
return todos.filter(t => t.completed)
case 'SHOW_ACTIVE':
return todos.filter(t => !t.completed)
default:
throw new Error('Unknown filter: ' + filter)
}
}複製代碼
mapStateToProps會訂閱 Store，每當state更新的時候，就會自動執行，從新計算 UI 組件的參數，從而觸發 UI 組件的從新渲染。
mapStateToProps的第一個參數老是state對象，還能夠使用第二個參數，表明容器組件的props對象。
// 容器組件的代碼
// <FilterLink filter="SHOW_ALL">
// All
// </FilterLink>
const mapStateToProps = (state, ownProps) => {
return {
active: ownProps.filter === state.visibilityFilter
}
}複製代碼
使用ownProps做爲參數後，若是容器組件的參數發生變化，也會引起 UI 組件從新渲染。
connect方法能夠省略mapStateToProps參數，那樣的話，UI 組件就不會訂閱Store，就是說 Store 的更新不會引發 UI 組件的更新。
mapDispatchToProps()
mapDispatchToProps是connect函數的第二個參數，用來創建 UI 組件的參數到store.dispatch方法的映射。也就是說，它定義了哪些用戶的操做應該看成 Action，傳給 Store。它能夠是一個函數，也能夠是一個對象。
若是mapDispatchToProps是一個函數，會獲得dispatch和ownProps（容器組件的props對象）兩個參數。
const mapDispatchToProps = (
dispatch,
ownProps
) => {
return {
onClick: () => {
dispatch({
type: 'SET_VISIBILITY_FILTER',
filter: ownProps.filter
});
}
};
}複製代碼
從上面代碼能夠看到，mapDispatchToProps做爲函數，應該返回一個對象，該對象的每一個鍵值對都是一個映射，定義了 UI 組件的參數怎樣發出 Action。
若是mapDispatchToProps是一個對象，它的每一個鍵名也是對應 UI 組件的同名參數，鍵值應該是一個函數，會被看成 Action creator ，返回的 Action 會由 Redux 自動發出。舉例來講，上面的mapDispatchToProps寫成對象就是下面這樣。
const mapDispatchToProps = {
onClick: (filter) => {
type: 'SET_VISIBILITY_FILTER',
filter: filter
};
}複製代碼
組件
connect方法生成容器組件之後，須要讓容器組件拿到state對象，才能生成 UI 組件的參數。
一種解決方法是將state對象做爲參數，傳入容器組件。可是，這樣作比較麻煩，尤爲是容器組件可能在很深的層級，一級級將state傳下去就很麻煩。
React-Redux 提供Provider組件，可讓容器組件拿到state。
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import todoApp from './reducers'
import App from './components/App'
let store = createStore(todoApp);
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)複製代碼
上面代碼中，Provider在根組件外面包了一層，這樣一來，App的全部子組件就默認均可以拿到state了。
它的原理是React組件的context屬性，請看源碼。
class Provider extends Component {
getChildContext() {
return {
store: this.props.store
};
}
render() {
return this.props.children;
}
}
Provider.childContextTypes = {
store: React.PropTypes.object
}複製代碼
上面代碼中，store放在了上下文對象context上面。而後，子組件就能夠從context拿到store，代碼大體以下。
class VisibleTodoList extends Component {
componentDidMount() {
const { store } = this.context;
this.unsubscribe = store.subscribe(() =>
this.forceUpdate()
);
}
render() {
const props = this.props;
const { store } = this.context;
const state = store.getState();
// ...
}
}
VisibleTodoList.contextTypes = {
store: React.PropTypes.object
}複製代碼
React-Redux自動生成的容器組件的代碼，就相似上面這樣，從而拿到store。
什麼是react hook，有什麼做用
JS
Promise函數解決了什麼問題？
Promise解決了回調地獄的問題www.cnblogs.com/lvdabao/p/e…
localStorage/sessionStorage/cookie/session?
- cookie在瀏覽器和服務器間來回傳遞。 sessionStorage和localStorage不會
- sessionStorage和localStorage的存儲空間更大；
- sessionStorage和localStorage有更多豐富易用的接口；
- sessionStorage和localStorage各自獨立的存儲空間；
- session稱爲會話信息，位於web服務器上，主要負責訪問者與網站之間的交互，當訪問瀏覽器請求http地址時，將傳遞到web服務器上並與訪問信息進行匹配， 當關閉網站時就表示會話已經結束，網站沒法訪問該信息了，因此它沒法保存永久數據，咱們沒法訪問以及禁用網站
- cookie位於用戶的計算機上，用來維護用戶計算機中的信息，直到用戶刪除。好比咱們在網頁上登陸某個軟件時輸入用戶名及密碼時若是保存爲cookie，則每次咱們訪問的時候就不須要登陸網站了。咱們能夠在瀏覽器上保存任何文本，並且咱們還能夠隨時隨地的去阻止它或者刪除。咱們一樣也能夠禁用或者編輯cookie，可是有一點須要注意不要使用cookie來存儲一些隱私數據，以防隱私泄露
跨域問題是什麼？怎麼解決？
同源策略它是由 Netscape 提出的一個安全策略，它是瀏覽器最核心也是最基本的安全功能，若是缺乏同源策略，則瀏覽器的正常功能可能都會受到影響，如今全部支持JavaScript的瀏覽器都會使用這個策略。
所謂同源指的是：協議、域名、端口號都相同，只要有一個不相同，那麼都是非同源。
跨域解決辦法
response 添加 header
咱們在 Servlet 請求返回時添加以下代碼：
1 //*表示支持全部網站訪問，也能夠額外配置相應網站
2 resp.setHeader("Access-Control-Allow-Origin", "*");
JSONP 方式
一、在同源策略下，在某個服務器下的頁面是沒法獲取到該服務器之外的數據的，即通常的ajax是不能進行跨域請求的。但 img、iframe 、script等標籤是個例外，這些標籤能夠經過src屬性請求到其餘服務器上的數據。利用 script標籤的開放策略，咱們能夠實現跨域請求數據，固然這須要服務器端的配合。 Jquery中ajax 的核心是經過 XmlHttpRequest獲取非本頁內容，而jsonp的核心則是動態添加 <script>標籤來調用服務器提供的 js腳本。
二、當咱們正常地請求一個JSON數據的時候，服務端返回的是一串 JSON類型的數據，而咱們使用 JSONP模式來請求數據的時候服務端返回的是一段可執行的 JavaScript代碼。由於jsonp 跨域的原理就是用的動態加載 script的src ，因此咱們只能把參數經過 url的方式傳遞,因此jsonp的 type類型只能是get ！
HttpClient 請求轉發
這種方式客戶端是向 JavaWeb02 項目發送請求，而不是上面的向 JavaWeb01 發送請求，而後在 JavaWeb02 的後臺經過 HttpClient 將請求發送到 JavaWeb01，獲得數據後返回。這種方式至關於繞過瀏覽器的同源機制，直接經過後端進行轉發。
nginx 轉發
原理很簡單：
利用nginx反向代理，將請求分發到部署到相應項目的tomcat服務器，固然也不存在跨域問題。
async/await/generator?
async 函數是什麼？一句話，它就是 Generator 函數的語法糖。www.jianshu.com/p/c94edc005…
js中深比較和淺比較？在項目中怎麼實現深比較？
淺比較也稱引用相等，在javascript中， ===是做淺比較,只檢查左右兩邊是不是同一個對象的引用
深比較也稱原值相等，深比較是指檢查兩個對象的全部屬性是否都相等,深比較須要以遞歸的方式遍歷兩個對象的全部屬性，操做比較耗時，深比較無論這兩個對象是否是同一對象的引用。
js引擎事件輪詢機制是怎麼的？
JS的執行機制(一)：
1.首先判斷JS是同步仍是異步,同步就進入主進程,異步就進入event table
2.異步任務在event table中註冊函數,當知足觸發條件後,被推入event queue
3.同步任務進入主線程後一直執行,直到主線程空閒時,纔會去event queue中查看是否有可執行的異步任務,若是有就推入主進程中
JS的執行機制(二)
1.執行一個宏任務,過程當中若是遇到微任務,就將其放到微任務的【事件隊列】裏
2.當前宏任務執行完成後,會查看微任務的【事件隊列】,並將裏面所有的微任務依次執行完
任務劃分方式:
1.macro-task(宏任務)：script，setTimeout，setInterval
2.micro-task(微任務)：Promise，process.nextTick
js基本類型
值類型(基本類型)：字符串（String）、數字(Number)、布爾(Boolean)、對空（Null）、未定義（Undefined）、Symbol。
引用數據類型：對象(Object)、數組(Array)、函數(Function)。
注：Symbol 是 ES6 引入了一種新的原始數據類型，表示獨一無二的值。
線程與進程
1、進程（process）
狹義定義：進程就是一段程序的執行過程。
廣義定義：進程是一個具備必定獨立功能的程序關於某個數據集合的一次運行活動。它是操做系統動態執行的基本單元，在傳統的操做系統中，進程既是基本的分配單元，也是基本的執行單元。
簡單的來說進程的概念主要有兩點：第一，進程是一個實體。每個進程都有它本身的地址空間，通常狀況下，包括文本區域（text region）、數據區域（data region）和堆棧（stack region）。文本區域存儲處理器執行的代碼；數據區域存儲變量和進程執行期間使用的動態分配的內存；堆棧區域存儲着活動過程調用的指令和本地變量。第二，進程是一個「執行中的程序」。程序是一個沒有生命的實體，只有處理器賦予程序生命時，它才能成爲一個活動的實體，咱們稱其爲進程。
進程狀態：進程有三個狀態，就緒、運行和阻塞。就緒狀態其實就是獲取了出cpu外的全部資源，只要處理器分配資源就能夠立刻執行。就緒狀態有排隊序列什麼的，排隊原則再也不贅述。運行態就是得到了處理器分配的資源，程序開始執行。阻塞態，當程序條件不夠時候，須要等待條件知足時候才能執行，如等待i/o操做時候，此刻的狀態就叫阻塞態。
2、程序
提及進程，就不得不說下程序。先看定義：程序是指令和數據的有序集合，其自己沒有任何運行的含義，是一個靜態的概念。而進程則是在處理機上的一次執行過程，它是一個動態的概念。這個不難理解，其實進程是包含程序的，進程的執行離不開程序，進程中的文本區域就是代碼區，也就是程序。
3、線程
一般在一個進程中能夠包含若干個線程，固然一個進程中至少有一個線程，否則沒有存在的意義。線程能夠利用進程所擁有的資源，在引入線程的操做系統中，一般都是把進程做爲分配資源的基本單位，而把線程做爲獨立運行和獨立調度的基本單位，因爲線程比進程更小，基本上不擁有系統資源，故對它的調度所付出的開銷就會小得多，能更高效的提升系統多個程序間併發執行的程度。
4、多線程
在一個程序中，這些獨立運行的程序片斷叫做「線程」（Thread），利用它編程的概念就叫做「多線程處理」。多線程是爲了同步完成多項任務，不是爲了提升運行效率，而是爲了提升資源使用效率來提升系統的效率。線程是在同一時間須要完成多項任務的時候實現的。
最簡單的比喻多線程就像火車的每一節車箱，而進程則是火車。車箱離開火車是沒法跑動的，同理火車也不可能只有一節車箱。多線程的出現就是爲了提升效率。
2、說說區別
1、進程與線程的區別：
進程和線程的主要差異在於它們是不一樣的操做系統資源管理方式。進程有獨立的地址空間，一個進程崩潰後，在保護模式下不會對其它進程產生影響，而線程只是一個進程中的不一樣執行路徑。線程有本身的堆棧和局部變量，但線程之間沒有單獨的地址空間，一個線程死掉就等於整個進程死掉，因此多進程的程序要比多線程的程序健壯，但在進程切換時，耗費資源較大，效率要差一些。但對於一些要求同時進行而且又要共享某些變量的併發操做，只能用線程，不能用進程。
1) 簡而言之,一個程序至少有一個進程,一個進程至少有一個線程.
2) 線程的劃分尺度小於進程，使得多線程程序的併發性高。
3) 另外，進程在執行過程當中擁有獨立的內存單元，而多個線程共享內存，從而極大地提升了程序的運行效率。
4) 線程在執行過程當中與進程仍是有區別的。每一個獨立的線程有一個程序運行的入口、順序執行序列和程序的出口。可是線程不可以獨立執行，必須依存在應用程序中，由應用程序提供多個線程執行控制。
5) 從邏輯角度來看，多線程的意義在於一個應用程序中，有多個執行部分能夠同時執行。但操做系統並無將多個線程看作多個獨立的應用，來實現進程的調度和管理以及資源分配。這就是進程和線程的重要區別。
3、說說優缺點
線程和進程在使用上各有優缺點：線程執行開銷小，但不利於資源的管理和保護；而進程正相反。同時，線程適合於在SMP(多核處理機)機器上運行，而進程則能夠跨機器遷移。
4、總結
入職第一天閒的無聊，參考下別人的總結本身也簡單總結了下。知道以上的基本面試夠用了，至於進程、線程的細節，底層構成，調度等問題是操做系統的東西。我就不詳述了。
5、實例
一、多線程寫日誌，涉及到單例模式，異步寫
CSS
flex佈局？flex佈局典型的使用場景有？
css開啓GPU加速？
爲動畫DOM元素添加CSS3樣式-webkit-transform:transition3d(0,0,0)或-webkit-transform:translateZ(0);，這兩個屬性都會開啓GPU硬件加速模式，從而讓瀏覽器在渲染動畫時從CPU轉向GPU，其實說白了這是一個小伎倆，也能夠算是一個Hack，-webkit-transform:transition3d和-webkit-transform:translateZ實際上是爲了渲染3D樣式，但咱們設置值爲0後，並無真正使用3D效果，但瀏覽器卻所以開啓了GPU硬件加速模式。
開啓GPU硬件加速可能觸發的問題：
經過-webkit-transform:transition3d/translateZ開啓GPU硬件加速以後，有些時候可能會致使瀏覽器頻繁閃爍或抖動，能夠嘗試如下辦法解決之：
-webkit-backface-visibility:hidden;
-webkit-perspective:1000;複製代碼
css的網格佈局？
css盒模型哪兩種
W3C的標準盒模型
在標準的盒子模型中，width指content部分的寬度
IE的盒模型
在IE盒子模型中，width表示content+padding+border這三個部分的寬度
上下左右居中
計算機基礎
Get/Post請求? Http協議簡單介紹？
- GET在瀏覽器回退時是無害的，而POST會再次提交請求。
- GET產生的URL地址能夠被Bookmark，而POST不能夠。
- GET請求會被瀏覽器主動cache，而POST不會，除非手動設置。
- GET請求只能進行url編碼，而POST支持多種編碼方式。
- GET請求參數會被完整保留在瀏覽器歷史記錄裏，而POST中的參數不會被保留。
- GET請求在URL中傳送的參數是有長度限制的，而POST麼有。
- 對參數的數據類型，GET只接受ASCII字符，而POST沒有限制。
- GET比POST更不安全，由於參數直接暴露在URL上，因此不能用來傳遞敏感信息。
- GET參數經過URL傳遞，POST放在Request body中。
GET和POST是什麼？HTTP協議中的兩種發送請求的方法。
HTTP是什麼？HTTP是基於TCP/IP的關於數據如何在萬維網中如何通訊的協議。
HTTP的底層是TCP/IP。因此GET和POST的底層也是TCP/IP，也就是說，GET/POST都是TCP連接。GET和POST能作的事情是同樣同樣的。你要給GET加上request body，給POST帶上url參數，技術上是徹底行的通的。
其實，GET和POST本質上二者沒有任何區別。他們都是HTTP協議中的請求方法。底層實現都是基於TCP/IP協議。上述的所謂區別，只是瀏覽器廠家根據約定，作得限制而已。
棧與隊列的區別？javascript中數組有相關數據結構的模擬的方法是哪些？
一、隊列先進先出，棧先進後出。
二、對插入和刪除操做的"限定"不一樣。
棧是限定只能在表的一端進行插入和刪除操做的線性表。
隊列是限定只能在表的一端進行插入和在另外一端進行刪除操做的線性表。
三、遍歷數據速度不一樣。
棧只能從頭部取數據，也就最早放入的須要遍歷整個棧最後才能取出來，並且在遍歷數據的時候還得爲數據開闢臨時空間，保持數據在遍歷前的一致性。
隊列則不一樣，它基於地址指針進行遍歷，並且能夠從頭或尾部開始遍歷，但不能同時遍歷，無需開闢臨時空間，由於在遍歷的過程當中不影像數據結構，速度要快的多
內存泄漏和內存溢出？怎麼解決？
內存泄露 ：是指程序在申請內存後，沒法釋放已申請的內存空間就形成了內存泄漏，一次內存泄漏彷佛不會有大的影響，但內存泄漏堆積後的後果就是內存溢出。
咱們知道了內存泄漏的緣由而內存溢出則有多是由於咱們咱們屢次內存泄漏堆積後的後果則變成了內存溢出
內存溢出： 指程序申請內存時，沒有足夠的內存供申請者使用，或者說，給了你一塊存儲int類型數據的存儲空間，可是你卻存儲long類型的數據，那麼結果就是內存不夠用，此時就會報錯OOM,即所謂的內存溢出，簡單來講就是本身所須要使用的空間比咱們擁有的內存大內存不夠使用所形成的內存溢出。
內存泄漏的分類（按發生方式來分類）
常發性內存泄漏。發生內存泄漏的代碼會被屢次執行到，每次被執行的時候都會致使一塊內存泄漏。
偶發性內存泄漏。發生內存泄漏的代碼只有在某些特定環境或操做過程下才會發生。常發性和偶發性是相對的。對於特定的環境，偶發性的也許就變成了常發性的。因此測試環境和測試方法對檢測內存泄漏相當重要。
一次性內存泄漏。發生內存泄漏的代碼只會被執行一次，或者因爲算法上的缺陷，致使總會有一塊僅且一塊內存發生泄漏。好比，在類的構造函數中分配內存，在析構函數中卻沒有釋放該內存，因此內存泄漏只會發生一次。
隱式內存泄漏。程序在運行過程當中不停的分配內存，可是直到結束的時候才釋放內存。嚴格的說這裏並無發生內存泄漏，由於最終程序釋放了全部申請的內存。可是對於一個服務器程序，須要運行幾天，幾周甚至幾個月，不及時釋放內存也可能致使最終耗盡系統的全部內存。因此，咱們稱這類內存泄漏爲隱式內存泄漏。
內存泄漏的解決方法：
內存泄漏也許是由於活動已經被使用完畢，可是仍然在其餘地方被引用，致使沒法對其進行回收。咱們只須要給對活動進行引用的類獨立出來或者將其變爲靜態類，該類隨着活動的結束而結束，也就沒有了當活動結束但仍然還被其餘類引用的狀況。
資源性對象在不使用的時候，應該調用它的close()函數將其關閉掉。。
集合容器中的內存泄露 ，咱們一般把一些對象的引用加入到了集合容器（好比ArrayList）中，當咱們不須要該對象時，並無把它的引用從集合中清理掉，這樣這個集合就會愈來愈大。若是這個集合是static的話，那狀況就更嚴重了。
須要在退出程序以前，將集合裏的東西clear，而後置爲null，再退出程序。
WebView形成的泄露，當咱們不使用WebView對象時，應該調用它的destory()函數來銷燬它，並釋放其佔用的內存，不然其長期佔用的內存也不能被回收，從而形成內存泄露。
咱們應該爲WebView另外開啓一個進程，經過AIDL與主線程進行通訊，WebView所在的進程能夠根據業務的須要選擇合適的時機進行銷燬，從而達到內存的完整釋放。
內存溢出的緣由及解決方法：
內存溢出緣由：
1.內存中加載的數據量過於龐大，如一次從數據庫取出過多數據；
2.集合類中有對對象的引用，使用完後未清空，產生了堆積，使得JVM不能回收；
3.代碼中存在死循環或循環產生過多重複的對象實體；
4.使用的第三方軟件中的BUG；
5.啓動參數內存值設定的太小
內存溢出的解決方案：
第一步，修改JVM啓動參數，直接增長內存。(-Xms，-Xmx參數必定不要忘記加。)
第二步，檢查錯誤日誌，查看「OutOfMemory」錯誤前是否有其 它異常或錯誤。
第三步，對代碼進行走查和分析，找出可能發生內存溢出的位置。
重點排查如下幾點：
1.檢查對數據庫查詢中，是否有一次得到所有數據的查詢。通常來講，若是一次取十萬條記錄到內存，就可能引發內存溢出。這個問題比較隱蔽，在上線前，數據庫中數據較少，不容易出問題，上線後，數據庫中數據多了，一次查詢就有可能引發內存溢出。所以對於數據庫查詢儘可能採用分頁的方式查詢。
2.檢查代碼中是否有死循環或遞歸調用。
3.檢查是否有大循環重複產生新對象實體。
4.檢查List、MAP等集合對象是否有使用完後，未清除的問題。List、MAP等集合對象會始終存有對對象的引用，使得這些對象不能被GC回收。
第四步，使用內存查看工具動態查看內存使用狀況
什麼是函數調用棧，什麼是調用棧溢出？有沒有遇到過，什麼場景，怎麼解決？
其餘
當紅藝人CXK在其成名MV中開場表述本身的興趣愛好的順序是？
答：唱 跳 rap 籃球。
若是有可視化經驗（echarts/highcharts/g2/g6）?
node相關問題
什麼是前端工程化？
一個完整的前端工程體系應該包括：
- 統一的開發規範；
- 組件化開發；
- 構建流程。
開發規範和組件化開發面向的開發階段，宗旨是提升團隊協做能力，提升開發效率並下降維護成本。
構建工具和平臺解決了web產品一系列的工程問題，旨在提升web產品的性能表現，提升開發效率。
隨着Node.js的流行，對於前端的定義愈來愈寬泛，在整個web開發體系中。前端工程師的角色愈來愈重要。本文論述的前端工程體系沒有涉及Node.js這一層面，當一個團隊步入大前端時代，前端的定義已經不只僅是「前端」了，我想Web工程師這個稱號更合適一些。
PS：關注點
若是面高級，偏重表達能力，解決問題思路，問題的來源背景，解決思路，後續遺留問題或者優化？
中級則偏向具體技術使用
關注表達能力
最全前端面試問題及答案總結
HTML&CSS： 對Web標準的理解、瀏覽器內核差別、兼容性、hack、CSS基本功：佈局、盒子模型、選擇器優先級及使用、HTML五、CSS三、移動端適應。
JavaScript： 數據類型、面向對象、繼承、閉包、插件、做用域、跨域、原型鏈、模塊化、自定義事件、內存泄漏、事件機制、異步裝載回調、模板引擎、Nodejs、JSON、ajax等。
其餘： HTTP、安全、正則、優化、重構、響應式、移動端、團隊協做、可維護、SEO、UED、架構、職業生涯複製代碼
1.請你談談Cookie的弊端
cookie
1.IE6或更低版本最多20個cookie
2.IE7和以後的版本最後能夠有50個cookie。
3.Firefox最多50個cookie
4.chrome和Safari沒有作硬性限制複製代碼
Opera 會清理近期最少使用的Firefox會隨機清理 4096字節，爲了兼容性，通常不能超過 IE 提供了一種存儲能夠持久化用戶數據，叫作IE5.0就開始支持。每一個數據最多128K，每一個域名下最多1M。這個持久化數據放在緩存中，若是緩存沒有清理，那麼會一直存在。
優勢：極高的擴展性和可用性
1.經過良好的編程，控制保存在cookie中的session對象的大小。
2.經過加密和安全傳輸技術（SSL），減小cookie被破解的可能性。
3.只在cookie中存放不敏感數據，即便被盜也不會有重大損失。
4.控制cookie的生命期，使之不會永遠有效。偷盜者極可能拿到一個過時的cookie。複製代碼
缺點：
1.`Cookie`數量和長度的限制。每一個domain最多隻能有20條cookie，每一個cookie長度不能超過4KB，不然會被截掉。
2.安全性問題。若是cookie被人攔截了，那人就能夠取得全部的session信息。即便加密也與事無補，由於攔截者並不須要知道cookie的意義，他只要原樣轉發cookie就能夠達到目的了。
3.有些狀態不可能保存在客戶端。例如，爲了防止重複提交表單，咱們須要在服務器端保存一個計數器。若是咱們把這個計數器保存在客戶端，那麼它起不到任何做用。複製代碼
2.瀏覽器本地存儲
在較高版本的瀏覽器中，sessionStorage和HTML5中提供了globalStorage。
Web Storage包括了兩種存儲方式：localStorage。
sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。
cookie類似，區別是它是爲了更大容量存儲設計的。Cookie都會被髮送過去，這樣無形中浪費了帶寬，另外 除此以外，setItem,getItem,removeItem,clear等方法，不像setCookie，getCookie。
可是Cookie的做用是與服務器進行交互，做爲Web Storage僅僅是爲了在本地「存儲」數據而生
瀏覽器的支持除了UserData其實就是web storage。
sessionStorage都具備相同的操做方法，例如removeItem等
CSS 相關問題
display:none和visibility:hidden的區別？
display:none 隱藏對應的元素，在文檔佈局中再也不給它分配空間，它各邊的元素會合攏，
就當他歷來不存在。
visibility:hidden 隱藏對應的元素，可是在文檔佈局中仍保留原來的空間。複製代碼
CSS中 link 和@import 的區別是？
A：(1) link屬於HTML標籤，而@import是CSS提供的; (2) 頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;(3) import只在IE5以上才能識別，而link是HTML標籤，無兼容問題; (4) link方式的樣式的權重 高於@import的權重.複製代碼
position的absolute與fixed共同點與不一樣點
A：共同點：
1.改變行內元素的呈現方式，display被置爲block；2.讓元素脫離普通流，不佔據空間；3.默認會覆蓋到非定位元素上
B不一樣點：
absolute的」根元素「是能夠設置的，而fixed的」根元素「固定爲瀏覽器窗口。當你滾動網頁，fixed元素與瀏覽器窗口之間的距離是不變的。複製代碼
介紹一下CSS的盒子模型？
1）有兩種， IE 盒子模型、標準 W3C 盒子模型；IE的content部分包含了 border 和 pading;
2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border).複製代碼
CSS 選擇符有哪些？哪些屬性能夠繼承？優先級算法如何計算？ CSS3新增僞類有那些？
* 1.id選擇器（ # myid）
2.類選擇器（.myclassname）
3.標籤選擇器（div, h1, p）
4.相鄰選擇器（h1 + p）
5.子選擇器（ul > li）
6.後代選擇器（li a）
7.通配符選擇器（ * ）
8.屬性選擇器（a[rel = "external"]）
9.僞類選擇器（a: hover, li:nth-child）
* 可繼承的樣式： font-size font-family color, text-indent;
* 不可繼承的樣式：border padding margin width height ;
* 優先級就近原則，同權重狀況下樣式定義最近者爲準;
* 載入樣式以最後載入的定位爲準;
優先級爲:
!important > id > class > tag
important 比 內聯優先級高,但內聯比 id 要高
CSS3新增僞類舉例：
p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每一個 <p> 元素。
p:last-of-type 選擇屬於其父元素的最後 <p> 元素的每一個 <p> 元素。
p:only-of-type 選擇屬於其父元素惟一的 <p> 元素的每一個 <p> 元素。
p:only-child 選擇屬於其父元素的惟一子元素的每一個 <p> 元素。
p:nth-child(2) 選擇屬於其父元素的第二個子元素的每一個 <p> 元素。
:enabled :disabled 控制表單控件的禁用狀態。
:checked 單選框或複選框被選中。複製代碼
列出display的值，說明他們的做用。position的值， relative和absolute分別是相對於誰進行定位的？
1.
block 象塊類型元素同樣顯示。
inline 缺省值。象行內元素類型同樣顯示。
inline-block 象行內元素同樣顯示，但其內容象塊類型元素同樣顯示。
list-item 象塊類型元素同樣顯示，並添加樣式列表標記。
2.
*absolute
生成絕對定位的元素，相對於 static 定位之外的第一個祖先元素進行定位。
*fixed （老IE不支持）
生成絕對定位的元素，相對於瀏覽器窗口進行定位。
*relative
生成相對定位的元素，相對於其在普通流中的位置進行定位。
* static 默認值。沒有定位，元素出如今正常的流中
*（忽略 top, bottom, left, right z-index 聲明）。
* inherit 規定從父元素繼承 position 屬性的值。複製代碼
CSS3有哪些新特性？
CSS3實現圓角（border-radius），陰影（box-shadow），
對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜
增長了更多的CSS選擇器 多背景 rgba
在CSS3中惟一引入的僞元素是::selection.
媒體查詢，多欄佈局
border-image複製代碼
爲何要初始化CSS樣式。
由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。
固然，初始化樣式會對SEO有必定的影響，但魚和熊掌不可兼得，但力求影響最小的狀況下初始化。
*最簡單的初始化方法就是： * {padding: 0; margin: 0;} （不建議）
淘寶的樣式初始化：
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }複製代碼
對BFC規範的理解？
BFC，塊級格式化上下文，一個建立了新的BFC的盒子是獨立佈局的，盒子裏面的子元素的樣式不會影響到外面的元素。在同一個BFC中的兩個毗鄰的塊級盒在垂直方向（和佈局方向有關係）的margin會發生摺疊。
（W3C CSS 2.1 規範中的一個概念，它決定了元素如何對其內容進行佈局，以及與其餘元素的關係和相互做用。）複製代碼
解釋下 CSS sprites，以及你要如何在頁面或網站中使用它。
CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的「background-image」，「background- repeat」，「background-position」的組合進行背景定位，background-position能夠用數字能精確的定位出背景圖片的位置。這樣能夠減小不少圖片請求的開銷，由於請求耗時比較長；請求雖然能夠併發，可是也有限制，通常瀏覽器都是6個。對於將來而言，就不須要這樣作了，由於有了`http2`。複製代碼
html部分
說說你對語義化的理解？
1，去掉或者丟失樣式的時候可以讓頁面呈現出清晰的結構
2，有利於SEO：和搜索引擎創建良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重；
3，方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；
4，便於團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，能夠減小差別化。複製代碼
Doctype做用? 嚴格模式與混雜模式如何區分？它們有何意義?
（1）、<!DOCTYPE> 聲明位於文檔中的最前面，處於 <html> 標籤以前。告知瀏覽器以何種模式來渲染文檔。
（2）、嚴格模式的排版和 JS 運做模式是 以該瀏覽器支持的最高標準運行。
（3）、在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做。
（4）、DOCTYPE不存在或格式不正確會致使文檔以混雜模式呈現。複製代碼
你知道多少種Doctype文檔類型？
該標籤可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基於框架的 HTML 文檔。
HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及 Frameset。
XHTML 1.0 規定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。
Standards （標準）模式（也就是嚴格呈現模式）用於呈現遵循最新標準的網頁，而 Quirks
（包容）模式（也就是鬆散呈現模式或者兼容模式）用於呈現爲傳統瀏覽器而設計的網頁。複製代碼
HTML與XHTML——兩者有什麼區別
區別：
1.全部的標記都必需要有一個相應的結束標記
2.全部標籤的元素和屬性的名字都必須使用小寫
3.全部的XML標記都必須合理嵌套
4.全部的屬性必須用引號""括起來
5.把全部<和&特殊符號用編碼表示
6.給全部屬性賦一個值
7.不要在註釋內容中使「--」
8.圖片必須有說明文字複製代碼
常見兼容性問題？
* png24位的圖片在iE6瀏覽器上出現背景，解決方案是作成PNG8.也能夠引用一段腳本處理.
* 瀏覽器默認的margin和padding不一樣。解決方案是加一個全局的*{margin:0;padding:0;}來統一。
* IE6雙邊距bug:塊屬性標籤float後，又有橫行的margin狀況下，在ie6顯示margin比設置的大。
* 浮動ie產生的雙倍距離（IE6雙邊距問題：在IE6下，若是對元素設置了浮動，同時又設置了margin-left或margin-right，margin值會加倍。）
#box{ float:left; width:10px; margin:0 0 0 100px;}
這種狀況之下IE會產生20px的距離，解決方案是在float的標籤樣式控制中加入 ——_display:inline;將其轉化爲行內屬性。(_這個符號只有ie6會識別)
* 漸進識別的方式，從整體中逐漸排除局部。
首先，巧妙的使用「\9」這一標記，將IE遊覽器從全部狀況中分離出來。
接着，再次使用「+」將IE8和IE七、IE6分離開來，這樣IE8已經獨立識別。
css
.bb{
background-color:#f1ee18;/*全部識別*/
.background-color:#00deff\9; /*IE六、七、8識別*/
+background-color:#a200ff;/*IE六、7識別*/
_background-color:#1e0bd1;/*IE6識別*/
}
* IE下,能夠使用獲取常規屬性的方法來獲取自定義屬性,
也能夠使用getAttribute()獲取自定義屬性;
Firefox下,只能使用getAttribute()獲取自定義屬性.
解決方法:統一經過getAttribute()獲取自定義屬性.
* IE下,event對象有x,y屬性,可是沒有pageX,pageY屬性;
Firefox下,event對象有pageX,pageY屬性,可是沒有x,y屬性.
* 解決方法：（條件註釋）缺點是在IE瀏覽器下可能會增長額外的HTTP請求數。
* Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示,
可經過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.
* 超連接訪問事後hover樣式就不出現了 被點擊訪問過的超連接樣式不在具備hover和active瞭解決方法是改變CSS屬性的排列順序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
* 怪異模式問題：漏寫DTD聲明，Firefox仍然會按照標準模式來解析網頁，但在IE中會觸發怪異模式。爲避免怪異模式給咱們帶來沒必要要的麻煩，最好養成書寫DTD聲明的好習慣。如今能夠使用[html5](http://www.w3.org/TR/html5/single-page.html)推薦的寫法：`<doctype html>`
* 上下margin重合問題
ie和ff都存在，相鄰的兩個div的margin-left和margin-right不會重合，可是margin-top和margin-bottom卻會發生重合。
解決方法，養成良好的代碼編寫習慣，同時採用margin-top或者同時採用margin-bottom。
* ie6對png圖片格式支持很差(引用一段腳本處理)複製代碼
解釋下浮動和它的工做原理？清除浮動的技巧
浮動元素脫離文檔流，不佔據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。
1.使用空標籤清除浮動。
這種方法是在全部浮動標籤後面添加一個空標籤 定義css clear:both. 弊端就是增長了無心義標籤。
2.使用overflow。
給包含浮動元素的父標籤添加css屬性 overflow:auto; zoom:1; zoom:1用於兼容IE6。
3.使用after僞對象清除浮動。
該方法只適用於非IE瀏覽器。具體寫法可參照如下示例。使用中需注意如下幾點。1、該方法中必須爲須要清除浮動元素的僞對象中設置 height:0，不然該元素會比實際高出若干像素；複製代碼
浮動元素引發的問題和解決辦法？
浮動元素引發的問題：
（1）父元素的高度沒法被撐開，影響與父元素同級的元素
（2）與浮動元素同級的非浮動元素會跟隨其後
（3）若非第一個元素浮動，則該元素以前的元素也須要浮動，不然會影響頁面顯示的結構複製代碼
解決方法：
使用clear:both;屬性來清除元素的浮動可解決二、3問題，對於問題1，添加以下樣式，給父元素添加.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;} .clearfix{display: inline-block;} /* for IE/Mac */
清除浮動的幾種方法：
1，額外標籤法，<div style="clear:both;"></div>（缺點：不過這個辦法會增長額外的標籤使HTML結構看起來不夠簡潔。）
2，使用after僞類
#parent:after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}
3,浮動外部元素
4,設置`overflow`爲`hidden`或者auto複製代碼
IE 8如下版本的瀏覽器中的盒模型有什麼不一樣
IE8如下瀏覽器的盒模型中定義的元素的寬高不包括內邊距和邊框複製代碼
DOM操做——怎樣添加、移除、移動、複製、建立和查找節點。
（1）建立新節點
createDocumentFragment() //建立一個DOM片斷
createElement() //建立一個具體的元素
createTextNode() //建立一個文本節點
（2）添加、移除、替換、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子節點前插入一個新的子節點
（3）查找
getElementsByTagName() //經過標籤名稱
getElementsByName() //經過元素的Name屬性的值(IE容錯能力較強，會獲得一個數組，其中包括id等於name值的)
getElementById() //經過元素Id，惟一性複製代碼
html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？
* HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。
* 拖拽釋放(Drag and drop) API
語義化更好的內容標籤（header,nav,footer,aside,article,section）
音頻、視頻API(audio,video)
畫布(Canvas) API
地理(Geolocation) API
本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；
sessionStorage 的數據在瀏覽器關閉後自動刪除
表單控件，calendar、date、time、email、url、search
新的技術webworker, websocket, Geolocation
* 移除的元素
純表現的元素：basefont，big，center，font, s，strike，tt，u；
對可用性產生負面影響的元素：frame，frameset，noframes；
支持HTML5新標籤：
* IE8/IE7/IE6支持經過document.createElement方法產生的標籤，
能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，
瀏覽器支持新標籤後，還須要添加標籤默認的樣式：
* 固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
如何區分： DOCTYPE聲明\新增的結構元素\功能元素複製代碼
iframe的優缺點？
1.<iframe>優勢：
解決加載緩慢的第三方內容如圖標和廣告等的加載問題
Security sandbox
並行加載腳本
2.<iframe>的缺點：
*iframe會阻塞主頁面的Onload事件；
*即時內容爲空，加載也須要時間
*沒有語意複製代碼
如何實現瀏覽器內多個標籤頁之間的通訊?
調用localstorge、cookies等本地存儲方式複製代碼
webSocket如何兼容低瀏覽器？
Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基於 multipart 編碼發送 XHR 、 基於長輪詢的 XHR複製代碼
線程與進程的區別
一個程序至少有一個進程,一個進程至少有一個線程.
線程的劃分尺度小於進程，使得多線程程序的併發性高。
另外，進程在執行過程當中擁有獨立的內存單元，而多個線程共享內存，從而極大地提升了程序的運行效率。
線程在執行過程當中與進程仍是有區別的。每一個獨立的線程有一個程序運行的入口、順序執行序列和程序的出口。可是線程不可以獨立執行，必須依存在應用程序中，由應用程序提供多個線程執行控制。
從邏輯角度來看，多線程的意義在於一個應用程序中，有多個執行部分能夠同時執行。但操做系統並無將多個線程看作多個獨立的應用，來實現進程的調度和管理以及資源分配。這就是進程和線程的重要區別。複製代碼
你如何對網站的文件和資源進行優化？
期待的解決方案包括：
文件合併
文件最小化/文件壓縮
使用 CDN 託管
緩存的使用（多個域名來提供緩存）
其餘複製代碼
請說出三種減小頁面加載時間的方法。
1.優化圖片
2.圖像格式的選擇（GIF：提供的顏色較少，可用在一些對顏色要求不高的地方）
3.優化CSS（壓縮合並css，如margin-top,margin-left...)
4.網址後加斜槓（如www.campr.com/目錄，會判斷這個「目錄是什麼文件類型，或者是目錄。）
5.標明高度和寬度（若是瀏覽器沒有找到這兩個參數，它須要一邊下載圖片一邊計算大小，若是圖片不少，瀏覽器須要不斷地調整頁面。這不但影響速度，也影響瀏覽體驗。
當瀏覽器知道了高度和寬度參數後，即便圖片暫時沒法顯示，頁面上也會騰出圖片的空位，而後繼續加載後面的內容。從而加載時間快了，瀏覽體驗也更好了。）
6.減小http請求（合併文件，合併圖片）。複製代碼
你都使用哪些工具來測試代碼的性能？
Profiler, JSPerf（http://jsperf.com/nexttick-vs-setzerotimeout-vs-settimeout）, Dromaeo複製代碼
什麼是 FOUC（無樣式內容閃爍）？你如何來避免 FOUC？
FOUC - Flash Of Unstyled Content 文檔樣式閃爍
<style type="text/css" media="all">@import "../fouc.css";</style>
而引用CSS文件的@import就是形成這個問題的罪魁禍首。IE會先加載整個HTML文檔的DOM，而後再去導入外部的CSS文件，所以，在頁面DOM加載完成到CSS導入完成中間會有一段時間頁面上的內容是沒有樣式的，這段時間的長短跟網速，電腦速度都有關係。
解決方法簡單的出奇，只要在<head>之間加入一個<link>或者<script>元素就能夠了。複製代碼
null和undefined的區別？
undefined是一個表示"無"的原始值，轉爲數值時爲 當聲明的變量還未被初始化時，變量的默認值爲null用來表示還沒有存在的對象，經常使用來表示函數企圖返回一個不存在的對象。
（1）變量被聲明瞭，但沒有賦值時，就等於undefined。 （2) 調用函數時，應該提供的參數沒有提供，該參數等於undefined。 （3）對象沒有賦值的屬性，該屬性的值爲undefined。 （4）函數沒有返回值時，默認返回undefined。
（1） 做爲函數的參數，表示該函數的參數不是對象。 （2） 做爲對象原型鏈的終點。
new操做符具體幹了什麼呢?
一、建立一個空對象，而且 this 變量引用該對象，同時還繼承了該函數的原型。
二、屬性和方法被加入到 this 引用的對象中。
三、新建立的對象由 this 所引用，而且最後隱式的返回 this 。
var obj = {};
obj.__proto__ = Base.prototype;
Base.call(obj);複製代碼
JSON 的瞭解？
JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。
它是基於JavaScript的一個子集。數據格式簡單, 易於讀寫, 佔用帶寬小
{'age':'12', 'name':'back'}複製代碼
js延遲加載的方式有哪些？
defer和async、動態建立DOM方式（建立script，插入到DOM中，加載完畢後callBack）、按需異步載入js複製代碼
如何解決跨域問題?
jsonp、 document.domain+iframe、window.name、window.postMessage、服務器上設置代理頁面
jsonp的原理是動態插入script標籤複製代碼
具體參見：詳解js跨域問題
documen.write和 innerHTML的區別
document.write只能重繪整個頁面
innerHTML能夠重繪頁面的一部分複製代碼
.call() 和 .apply() 的區別和做用？
做用：動態改變某個類的某個方法的運行環境。
區別參見：JavaScript學習總結（四）function函數部分
哪些操做會形成內存泄漏？
內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在。
垃圾回收器按期掃描對象，並計算引用了每一個對象的其餘對象的數量。若是一個對象的引用數量爲 0（沒有其餘對象引用過該對象），或對該對象的唯一引用是循環的，那麼該對象的內存便可回收。
setTimeout 的第一個參數使用字符串而非函數的話，會引起內存泄漏。
閉包、控制檯日誌、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）複製代碼
JavaScript中的做用域與變量聲明提高？
如何判斷當前腳本運行在瀏覽器仍是node環境中？
經過判斷Global對象是否爲window，若是不爲window，當前腳本沒有運行在瀏覽器中複製代碼
其餘問題？
你遇到過比較難的技術問題是？你是如何解決的？
常使用的庫有哪些？經常使用的前端開發工具？開發過什麼應用或組件？
列舉IE 與其餘瀏覽器不同的特性？
99%的網站都須要被重構是那本書上寫的？
* 網站重構：應用web標準進行設計（第2版）複製代碼
什麼叫優雅降級和漸進加強？
優雅降級：Web站點在全部新式瀏覽器中都能正常工做，若是用戶使用的是老式瀏覽器，則代碼會檢查以確認它們是否能正常工做。因爲IE獨特的盒模型佈局問題，針對不一樣版本的IE的hack實踐過優雅降級了,爲那些沒法支持功能的瀏覽器增長候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至於徹底失效.
漸進加強：從被全部瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增長無害於基礎瀏覽器的額外樣式和功能的。當瀏覽器支持時，它們會自動地呈現出來併發揮做用。複製代碼
詳見：css學習概括總結（一）
WEB應用從服務器主動推送Data到客戶端有那些方式？
對Node的優勢和缺點提出了本身的見解？
*（優勢）由於Node是基於事件驅動和無阻塞的，因此很是適合處理併發請求，
所以構建在Node上的代理服務器相比其餘技術實現（如Ruby）的服務器表現要好得多。
此外，與Node代理服務器交互的客戶端代碼是由javascript語言編寫的，
所以客戶端和服務器端都用同一種語言編寫，這是很是美妙的事情。
*（缺點）Node是一個相對新的開源項目，因此不太穩定，它老是一直在變，
並且缺乏足夠多的第三方庫支持。看起來，就像是Ruby/Rails當年的樣子。複製代碼
除了前端之外還了解什麼其它技術麼？你最最厲害的技能是什麼？
你經常使用的開發工具是什麼，爲何？
對前端界面工程師這個職位是怎麼樣理解的？它的前景會怎麼樣？
前端是最貼近用戶的程序員，比後端、數據庫、產品經理、運營、安全都近。
一、實現界面交互
二、提高用戶體驗
三、有了Node.js，前端能夠實現服務端的一些事情
前端是最貼近用戶的程序員，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好，
參與項目，快速高質量完成實現效果圖，精確到1px；
與團隊成員，UI設計，產品經理的溝通；
作好的頁面結構，頁面重構和用戶體驗；
處理hack，兼容、寫出優美的代碼格式；
針對服務器的優化、擁抱最新前端技術。複製代碼
你在如今的團隊處於什麼樣的角色，起到了什麼明顯的做用？
你認爲怎樣纔是全端工程師（Full Stack developer）？
介紹一個你最得意的做品吧？
項目中遇到什麼問題？如何解決？
你的優勢是什麼？缺點是什麼？
如何管理前端團隊?
最近在學什麼？能談談你將來3，5年給本身的規劃嗎？
你有哪些性能優化的方法？
（1） 減小http請求次數：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網頁Gzip，CDN託管，data緩存 ，圖片服務器。
（2） 前端模板 JS+數據，減小因爲HTML標籤致使的帶寬浪費，前端用變量保存AJAX請求結果，每次操做本地變量，不用請求，減小請求次數
（3） 用innerHTML代替DOM操做，減小DOM操做次數，優化javascript性能。
（4） 當須要設置的樣式不少時設置className而不是直接操做style。
（5） 少用全局變量、緩存DOM節點查找的結果。減小IO讀取操做。
（6） 避免使用CSS Expression（css表達式)又稱Dynamic properties(動態屬性)。
（7） 圖片預加載，將樣式表放在頂部，將腳本放在底部 加上時間戳。複製代碼
http狀態碼有那些？分別表明是什麼意思？
100-199 用於指定客戶端應相應的某些動做。
200-299 用於表示請求成功。
300-399 用於已經移動的文件而且常被包含在定位頭信息中指定新的地址信息。
400-499 用於指出客戶端的錯誤。400 一、語義有誤，當前請求沒法被服務器理解。401 當前請求須要用戶驗證 403 服務器已經理解請求，可是拒絕執行它。
500-599 用於支持服務器錯誤。 503 – 服務不可用複製代碼
詳情：segmentfault.com/blog/trigki…
一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼？
分爲4個步驟：
（1），當發送一個URL請求時，無論這個URL是Web頁面的URL仍是Web頁面上每一個資源的URL，瀏覽器都會開啓一個線程來處理這個請求，同時在遠程DNS服務器上啓動一個DNS查詢。這能使瀏覽器得到請求對應的IP地址。
（2）， 瀏覽器與遠程Web服務器經過TCP三次握手協商來創建一個TCP/IP鏈接。該握手包括一個同步報文，一個同步-應答報文和一個應答報文，這三個報文在 瀏覽器和服務器之間傳遞。該握手首先由客戶端嘗試創建起通訊，然後服務器應答並接受客戶端的請求，最後由客戶端發出該請求已經被接受的報文。
（3），一旦TCP/IP鏈接創建，瀏覽器會經過該鏈接向遠程服務器發送HTTP的GET請求。遠程服務器找到資源並使用HTTP響應返回該資源，值爲200的HTTP響應狀態表示一個正確的響應。
（4），此時，Web服務器提供資源服務，客戶端開始下載資源。
請求返回後，便進入了咱們關注的前端模塊
簡單來講，瀏覽器會解析HTML生成DOM Tree，其次會根據CSS生成CSS Rule Tree，而javascript又能夠根據DOM API操做DOM複製代碼
詳情：從輸入 URL 到瀏覽器接收的過程當中發生了什麼事情？
平時如何管理你的項目？
先期團隊必須肯定好全局樣式（globe.css），編碼模式(utf-8) 等；
編寫習慣必須一致（例如都是採用繼承式的寫法，單樣式都寫成一行）；
標註樣式編寫人，各模塊都及時標註（標註關鍵樣式調用的地方）；
頁面進行標註（例如 頁面 模塊 開始和結束）；
CSS跟HTML 分文件夾並行存放，命名都得統一（例如style.css）；
JS 分文件夾存放 命名以該JS功能爲準的英文翻譯。
圖片採用整合的 images.png png8 格式文件使用 儘可能整合在一塊兒使用方便未來的管理複製代碼
說說最近最流行的一些東西吧？常去哪些網站？
Node.js、Mongodb、npm、MVVM、MEAN、three.js,React 。
網站：w3cfuns,sf,hacknews,CSDN,慕課，博客園，InfoQ,w3cplus等複製代碼
javascript對象的幾種建立方式
1，工廠模式
2，構造函數模式
3，原型模式
4，混合構造函數和原型模式
5，動態原型模式
6，寄生構造函數模式
7，穩妥構造函數模式複製代碼
javascript繼承的6種方法
1，原型鏈繼承
2，借用構造函數繼承
3，組合繼承(原型+借用構造)
4，原型式繼承
5，寄生式繼承
6，寄生組合式繼承複製代碼
ajax過程
(1)建立XMLHttpRequest對象,也就是建立一個異步調用對象.
(2)建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息.
(3)設置響應HTTP請求狀態變化的函數.
(4)發送HTTP請求.
(5)獲取異步調用返回的數據.
(6)使用JavaScript和DOM實現局部刷新.複製代碼
詳情：JavaScript學習總結（七）Ajax和Http狀態字
異步加載和延遲加載
1.異步加載的方案： 動態插入script標籤
2.經過ajax去獲取js代碼，而後經過eval執行
3.script標籤上添加defer或者async屬性
4.建立並插入iframe，讓它異步執行js
5.延遲加載：有些 js 代碼並非頁面初始化的時候就馬上須要的，而稍後的某些狀況才須要的。複製代碼
前端安全問題？
（XSS，sql注入，CSRF）
CSRF：是跨站請求僞造，很明顯根據剛剛的解釋，他的核心也就是請求僞造，經過僞造身份提交POST和GET請求來進行跨域的攻擊。
**完成CSRF須要兩個步驟：**
1.登錄受信任的網站A，在本地生成COOKIE
2.在不登出A的狀況下，或者本地COOKIE沒有過時的狀況下，訪問危險網站B。複製代碼
ie各版本和chrome能夠並行下載多少個資源
IE6 兩個併發，iE7升級以後的6個併發，以後版本也是6個
Firefox，chrome也是6個複製代碼
javascript裏面的繼承怎麼實現，如何避免原型鏈上面的對象共享
用構造函數和原型鏈的混合模式去實現繼承，避免對象共享能夠參考經典的extend()函數，不少前端框架都有封裝的，就是用一個空函數當作中間變量複製代碼
grunt， YUI compressor 和 google clojure用來進行代碼壓縮的用法。
YUI Compressor 是一個用來壓縮 JS 和 CSS 文件的工具，採用Java開發。
使用方法：
//壓縮JS
java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -v src.js > packed.js
//壓縮CSS
java -jar yuicompressor-2.4.2.jar --type css --charset utf-8 -v src.css > packed.css複製代碼
詳情請見：你須要掌握的前端代碼性能優化工具
Flash、Ajax各自的優缺點，在使用中如何取捨？
一、Flash ajax對比
Flash適合處理多媒體、矢量圖形、訪問機器；對CSS、處理文本上不足，不容易被搜索。
Ajax對CSS、文本支持很好，支持搜索；多媒體、矢量圖形、機器訪問不足。
共同點：與服務器的無刷新傳遞消息、用戶離線和在線狀態、操做DOM複製代碼
請解釋一下 JavaScript 的同源策略。
概念:同源策略是客戶端腳本（尤爲是Netscape Navigator2.0，其目的是防止某個文檔或腳本從多個不一樣源裝載。
這裏的同源策略指的是：協議，域名，端口相同，同源策略是一種安全協議。
指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。
爲何要有同源限制？
咱們舉例說明：好比一個黑客程序，他利用Javascript讀取到你的表單中 什麼是 "use strict"; ? 使用它的好處和壞處分別是什麼？
Javascript在更嚴格的條件下運行。
設立"嚴格模式"的目的，主要有如下幾個：
- 消除Javascript語法的一些不合理、不嚴謹之處，減小一些怪異行爲;
- 消除代碼運行的一些不安全之處，保證代碼運行的安全；
- 提升編譯器效率，增長運行速度；
- 爲將來新版本的Javascript作好鋪墊。複製代碼
注：通過測試 缺點：
如今網站的merge 後，這個串就到了文件的中間，不只沒有指示嚴格模式，反而在壓縮後浪費了字節。
GET和POST的區別，什麼時候使用POST？
GET：通常用於信息獲取，使用URL傳遞參數，對所發送信息的數量也有限制，通常在2000個字符
POST：通常用於修改服務器上的資源，對所發送的信息沒有限制。
GET方式須要使用Request.QueryString來取得變量的值，而POST方式經過Request.Form來獲取變量的值，
也就是說Get是經過地址欄來傳值，而Post是經過提交表單來傳值。
然而，在如下狀況中，請使用 POST 請求：
沒法使用緩存文件（更新服務器上的文件或數據庫）
向服務器發送大量數據（POST 沒有數據量限制）
發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠複製代碼
哪些地方會出現css阻塞，哪些地方會出現js阻塞？
js的阻塞特性：全部瀏覽器在下載JS下載、解析、執行完畢後纔開始繼續JS，可是 因爲瀏覽器爲了防止出現DOM樹，須要從新構建 嵌入JS只會阻塞其後內容的顯示，2種方式都會阻塞其後資源的下載。也就是說外部樣式不會阻塞外部腳本的加載，但會阻塞外部腳本的執行。
CSS原本是能夠並行下載的，在什麼狀況下會出現阻塞加載了(在測試觀察中，CSS都是阻塞加載）
當JS的時候，該JS放到 根本緣由：由於瀏覽器會維持css和JS會阻塞後面的資源加載，因此就會出現上面 嵌入 一、放在底部，雖然放在底部照樣會阻塞全部呈現，但不會阻塞資源下載。 二、若是嵌入JS放在head中，請把嵌入JS放在CSS頭部。 三、使用defer（只支持IE） 四、不要在嵌入的JS中調用運行時間較長的函數，若是必定要用，能夠用`setTimeout`來調用
Javascript無阻塞加載具體方式
- 將腳本放在底部。
head中，用以保證在<script>標籤放在前。 - 成組腳本：因爲每一個
<script>總數也能夠改善性能。適用於內聯腳本和外部腳本。 - 前。
- 非阻塞腳本：等頁面完成加載後，再加載
window.onload事件發出後開始下載代碼。
（1）fierfox3.5更高版本瀏覽器
（2）動態腳本元素：文檔對象模型（DOM）容許你使用js動態建立
<script>
var script=document.createElement("script");
script.type="text/javascript";
script.src="file.js";
document.getElementsByTagName("head")[0].appendChild(script);
</script>複製代碼
- 此技術的重點在於：不管在何處啓動下載，文件額下載和運行都不會阻塞其餘頁面處理過程。即便在head裏（除了用於下載文件的http連接）。
閉包相關問題？
詳情請見：詳解js閉包
js事件處理程序問題？
詳情請見：JavaScript學習總結（九）事件詳解
eval是作什麼的？
它的功能是把對應的字符串解析成JS代碼並運行；
應該避免使用eval，不安全，很是耗性能（2次，一次解析成js語句，一次執行）。複製代碼
// event(事件)工具集，來源：github.com/markyun
markyun.Event = {
// 頁面加載完成後
readyEvent : function(fn) {
if (fn==null) {
fn=document;
}
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = fn;
} else {
window.onload = function() {
oldonload();
fn();
};
}
},
// 視能力分別使用dom0||dom2||IE方式 來綁定事件
// 參數： 操做的元素,事件名稱 ,事件處理程序
addEvent : function(element, type, handler) {
if (element.addEventListener) {
//事件類型、須要執行的函數、是否捕捉
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, function() {
handler.call(element);
});
} else {
element['on' + type] = handler;
}
},
// 移除事件
removeEvent : function(element, type, handler) {
if (element.removeEnentListener) {
element.removeEnentListener(type, handler, false);
} else if (element.datachEvent) {
element.detachEvent('on' + type, handler);
} else {
element['on' + type] = null;
}
},
// 阻止事件 (主要是事件冒泡，由於IE不支持事件捕獲)
stopPropagation : function(ev) {
if (ev.stopPropagation) {
ev.stopPropagation();
} else {
ev.cancelBubble = true;
}
},
// 取消事件的默認行爲
preventDefault : function(event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
// 獲取事件目標
getTarget : function(event) {
return event.target || event.srcElement;
},
// 獲取event對象的引用，取到事件的全部信息，確保隨時能使用event；
getEvent : function(e) {
var ev = e || window.event;
if (!ev) {
var c = this.getEvent.caller;
while (c) {
ev = c.arguments[0];
if (ev && Event == ev.constructor) {
break;
}
c = c.caller;
}
}
return ev;
}
};複製代碼
高併發、聊天、實時消息推送複製代碼
* 原型對象也是普通的對象，是對象一個自帶隱式的 __proto__ 屬性，原型也有可能有本身的原型，若是一個原型對象的原型不爲null的話，咱們就稱之爲原型鏈。
* 原型鏈是由一些用來繼承和共享屬性的對象組成的（有限的）對象鏈。複製代碼
編寫 CSS、讓頁面結構更合理化，提高用戶體驗，實現良好的頁面效果和提高性能。複製代碼
html5 websoket
WebSocket經過Flash
XHR長時間鏈接
XHR Multipart Streaming
不可見的Iframe
<script>標籤的長時間鏈接(可跨域)複製代碼
1. 咱們在網頁中的某個操做（有的操做對應多個事件）。例如：當咱們點擊一個按鈕就會產生一個事件。是能夠被 JavaScript 偵測到的行爲。
2. 事件處理機制：IE是事件冒泡、firefox同時支持兩種事件模型，也就是：捕獲型事件和冒泡型事件。；
3. ev.stopPropagation();注意舊ie的方法 ev.cancelBubble = true;複製代碼
- ajax 是什麼?ajax 的交互模型?同步和異步的區別?如何解決跨域問題?
詳情請見：JavaScript學習總結（七）Ajax和Http狀態字
1. 經過異步模式，提高了用戶體驗
2. 優化了瀏覽器和服務器之間的傳輸，減小沒必要要的數據往返，減小了帶寬佔用
3. Ajax在客戶端運行，承擔了一部分原本由服務器承擔的工做，減小了大用戶量下的服務器負載。
2. Ajax的最大的特色是什麼。
Ajax能夠實現動態不刷新（局部刷新）
readyState屬性 狀態 有5個可取值： 0=未初始化 ，1=啓動 2=發送，3=接收，4=完成
ajax的缺點
一、ajax不支持瀏覽器back按鈕。
二、安全問題 AJAX暴露了與服務器交互的細節。
三、對搜索引擎的支持比較弱。
四、破壞了程序的異常機制。
五、不容易調試。
跨域： jsonp、 iframe、window.name、window.postMessage、服務器上設置代理頁面複製代碼
function clone(Obj) {
var buf;
if (Obj instanceof Array) {
buf = []; //建立一個空的數組
var i = Obj.length;
while (i--) {
buf[i] = clone(Obj[i]);
}
return buf;
}else if (Obj instanceof Object){
buf = {}; //建立一個空對象
for (var k in Obj) { //爲這個對象添加新的屬性
buf[k] = clone(Obj[k]);
}
return buf;
}else{
return Obj;
}
}複製代碼
- AMD和CMD 規範的區別？
詳情請見：詳解JavaScript模塊化開發
網站重構的理解？
網站重構：在不改變外部行爲的前提下，簡化結構、添加可讀性，而在網站前端保持一致的行爲。也就是說是在不改變UI的狀況下，對網站進行優化，在擴展的同時保持一致的UI。
對於傳統的網站來講重構一般是：
表格(table)佈局改成DIV+CSS
使網站前端兼容於現代瀏覽器(針對於不合規範的CSS、如對IE6有效的)
對於移動平臺的優化
針對於SEO進行優化
深層次的網站重構應該考慮的方面
減小代碼間的耦合
讓代碼保持彈性
嚴格按規範編寫代碼
設計可擴展的API
代替舊有的框架、語言(如VB)
加強用戶體驗
一般來講對於速度的優化也包含在重構中
壓縮JS、CSS、image等前端資源(一般是由服務器來解決)
程序的性能優化(如數據讀寫)
採用CDN來加速資源加載
對於JS DOM的優化
HTTP服務器的文件緩存複製代碼
<script>
function whatBrowser() {
document.Browser.Name.value=navigator.appName;
document.Browser.Version.value=navigator.appVersion;
document.Browser.Code.value=navigator.appCodeName;
document.Browser.Agent.value=navigator.userAgent;
}
</script>複製代碼
Array.prototype.unique1 = function () {
var n = []; //一個新的臨時數組
for (var i = 0; i < this.length; i++) //遍歷當前數組
{
//若是當前數組的第i已經保存進了臨時數組，那麼跳過，
//不然把當前項push到臨時數組裏面
if (n.indexOf(this[i]) == -1) n.push(this[i]);
}
return n;
}
Array.prototype.unique2 = function()
{
var n = {},r=[]; //n爲hash表，r爲臨時數組
for(var i = 0; i < this.length; i++) //遍歷當前數組
{
if (!n[this[i]]) //若是hash表中沒有當前項
{
n[this[i]] = true; //存入hash表
r.push(this[i]); //把當前數組的當前項push到臨時數組裏面
}
}
return r;
}
Array.prototype.unique3 = function()
{
var n = [this[0]]; //結果數組
for(var i = 1; i < this.length; i++) //從第二項開始遍歷
{
//若是當前數組的第i項在當前數組中第一次出現的位置不是i，
//那麼表示第i項是重複的，忽略掉。不然存入結果數組
if (this.indexOf(this[i]) == i) n.push(this[i]);
}
return n;
}複製代碼
100 Continue 繼續，通常在發送post請求時，已發送了http header以後服務端將返回此信息，表示確認，以後發送具體參數信息
200 OK 正常返回信息
201 Created 請求成功而且服務器建立了新的資源
202 Accepted 服務器已接受請求，但還沒有處理
301 Moved Permanently 請求的網頁已永久移動到新位置。
302 Found 臨時性重定向。
303 See Other 臨時性重定向，且老是使用 GET 請求新的 URI。
304 Not Modified 自從上次請求後，請求的網頁未修改過。
400 Bad Request 服務器沒法理解請求的格式，客戶端不該當嘗試再次使用相同的內容發起請求。
401 Unauthorized 請求未受權。
403 Forbidden 禁止訪問。
404 Not Found 找不到如何與 URI 相匹配的資源。
500 Internal Server Error 最多見的服務器端錯誤。
503 Service Unavailable 服務器端暫時沒法處理請求（多是過載或維護）。複製代碼
- cache-control
網頁的緩存是由HTTP消息頭中的private、no-cache、max-age、must-revalidate等，默認爲max-age的效果。可是若是同時存在，則被max-age覆蓋。
Expires = "Expires" ":" HTTP-date複製代碼
- 例如
Expires: Thu, 01 Dec 1994 16:00:00 GMT （必須是GMT格式）複製代碼
- 若是把它設置爲
max-age均可以用來指定文檔的過時時間，可是兩者有一些細微差異
1.Expires在HTTP/1.0中已經定義，Cache-Control:max-age在HTTP/1.1中才有定義，爲了向下兼容，僅使用max-age不夠；
2.Expires指定一個絕對的過時時間(GMT格式),這麼作會致使至少2個問題：1)客戶端和服務器時間不一樣步致使Expires的配置出現問題。 2）很容易在配置後忘記具體的過時時間，致使過時來臨出現浪涌現象；
3.max-age 指定的是從文檔被訪問後的存活時間，這個時間是個相對值(好比:3600s),相對的是文檔第一次被請求時服務器記錄的Request_time(請求時間)
4.Expires指定的時間能夠是相對文件的最後訪問時間(Atime)或者修改時間(MTime),而max-age相對對的是文檔的請求時間(Atime)
若是值爲no-cache,那麼每次都會訪問服務器。若是值爲max-age,則在過時以前不會重複訪問服務器。複製代碼
//建立cookie
function setCookie(name, value, expires, path, domain, secure) {
var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);
if (expires instanceof Date) {
cookieText += '; expires=' + expires;
}
if (path) {
cookieText += '; expires=' + expires;
}
if (domain) {
cookieText += '; domain=' + domain;
}
if (secure) {
cookieText += '; secure';
}
document.cookie = cookieText;
}
//獲取cookie
function getCookie(name) {
var cookieName = encodeURIComponent(name) + '=';
var cookieStart = document.cookie.indexOf(cookieName);
var cookieValue = null;
if (cookieStart > -1) {
var cookieEnd = document.cookie.indexOf(';', cookieStart);
if (cookieEnd == -1) {
cookieEnd = document.cookie.length;
}複製代碼
React
- React生命週期？執行流程？(回答的好的能詳細說出那個方法是新加的，那個是須要下一個版本移除的)
- Component與PureComponent區別？
- Reconcilation過程（diff算法）？key的做用？
- Redux原理？什麼是store？Redux的三大原則？
- dva使用流程，使用時數據流向，核心功能封裝了哪些庫？
- 函數組件和class組件區別？
- refs的做用？
- HOC是什麼，哪些時候可用到HOC，或者舉一個使用HOC的例子？
- dev-server是怎麼跑起來的
- hooks介紹下，useEffect分別如何模仿生命週期的方法componentDidMount， componentDidUpdate，componentWillUnmount？
JS
- Promise函數解決了什麼問題？
- localStorage/sessionStorage/cookie/session?
- 跨域問題是什麼？怎麼解決？
- async/await/generator?
- js中深比較和淺比較？在項目中怎麼實現深比較？
- js引擎事件輪詢機制是怎麼的？
- js基本類型
- 線程與進程
- 函數式編程
- jsonp原理
- 原理是：動態插入script標籤，經過script標籤引入一個js文件，這個js文件載入成功後會執行咱們在url參數中指定的函數，而且會把咱們須要的json數據做爲參數傳入。
- 前端模塊化，common.js, amd, cmd區別 參考答案
CSS
- flex佈局？flex佈局典型的使用場景有？
- css開啓GPU加速？
- css的網格佈局？
- css盒模型哪兩種
- 上下左右居中
計算機基礎
- Get/Post請求? Http協議簡單介紹？
- 棧與隊列的區別？javascript中數組有相關數據結構的模擬的方法是哪些？
- 內存泄漏和內存溢出？怎麼解決？遞歸理解堆棧溢出以及遞歸的優化
- 什麼是函數調用棧，什麼是調用棧溢出？有沒有遇到過，什麼場景，怎麼解決？
- tcp三次握手
- HTTP狀態碼：
100 Continue 繼續，通常在發送post請求時，已發送了http header以後服務端將返回此信息，表示確認，以後發送具體參數信息
200 OK 正常返回信息
201 Created 請求成功而且服務器建立了新的資源
202 Accepted 服務器已接受請求，但還沒有處理
301 Moved Permanently 請求的網頁已永久移動到新位置。
302 Found 臨時性重定向。
303 SeeOther 臨時性重定向，且老是使用 GET 請求新的 URI。
304 Not Modified 自從上次請求後，請求的網頁未修改過。
400 BadRequest 服務器沒法理解請求的格式，客戶端不該當嘗試再次使用相同的內容發起請求。
401 Unauthorized 請求未受權。
403Forbidden 禁止訪問。
404 NotFound 找不到如何與 URI 相匹配的資源。
500 InternalServer Error 最多見的服務器端錯誤。
503 ServiceUnavailable 服務器端暫時沒法處理請求（多是過載或維護）。
1.JS中let和const有什麼用？
在現代js中，let＆const是建立變量的不一樣方式。 在早期的js中，我們使用var關鍵字來建立變量。 let＆const關鍵字是在ES6版本中引入的，其目的是在js中建立兩種不一樣類型的變量，一種是不可變的，另外一種是可變的。
const:它用於建立一個不可變變量。不可變變量是指其值在程序的整個生命週期中永不改變的變量。
let: let用於建立一個可變變量，可變變量是像var這樣的普通變量，能夠任意次數地更改。
2. JS 中的主要有哪幾類錯誤
JS有三類的錯誤:
加載時錯誤：加載web頁面時出現的錯誤(如語法錯誤)稱爲加載時錯誤，它會動態生成錯誤。
運行時錯誤：因爲濫用HTML語言中的命令而致使的錯誤。
邏輯錯誤：這些錯誤是因爲對具備不一樣操做的函數執行了錯誤的邏輯而致使的
3. 如何經過類別名獲取 dom 元素
在 JS 中使用document.getElementsByClassName() 方法來獲取具備類名的元素。
4.JS的做用域鏈是什麼及其做用
通常狀況下，變量取值到建立這個變量的函數的做用域中取值。可是若是在當前做用域中沒有查到值，就會向上級做用域去查，直到查到全局做用域，這麼一個查找過程造成的鏈條就叫作做用域鏈。
JS中的做用域鏈主要用於解析變量的值。 若是沒有這個，在不一樣的做用域內定義了許多變量，JS很難爲變量選擇某個值。
5.解釋JS中的MUL函數
MUL表示數的簡單乘法。在這種技術中，將一個值做爲參數傳遞給一個函數，而該函數將返回另外一個函數，將第二個值傳遞給該函數，而後重複繼續。例如:x*y*z能夠表示爲
function mul (x) {
return function (y) {
return function (z) {
return x * y * z;
}
}
}
複製代碼複製代碼
6.用純JS編寫一個程序來反轉字符串
使用內置函數：內置函數reverse()直接反轉字符串。
str="jQuery";
str = str.split("")
str = str.reverse()
str = str.join("")
alert(str);
複製代碼複製代碼
首先將字符串拆分爲數組，而後反轉數組，最近將字符鏈接起來造成字符串。
使用循環:首先，計算字符串中的字符數，而後對原始字符串應用遞減循環，該循環從最後一個字符開始，打印每一個字符，直到count變爲零。
7.JS中如何將頁面重定向到另外一個頁面？
- 使用 location.href：
window.location.href =「https://www.onlineinterviewquestions.com/」 - 使用 location.replace：
window.location.replace(" https://www.onlineinterviewquestions.com/;");
8. 列出JS中的一些設計模式:
設計模式是軟件設計中常見問題的通用可重用解決方案，如下是一些設計模式是：
建立模式：該模式抽象了對象實例化過程。
結構型模式：這些模式處理不一樣的類和對象以提供新功能。
行爲模式：也稱發佈-訂閱模式，定義了一個被觀察者和多個觀察者的、一對多的對象關係。
並行設計模式：這些模式處理多線程編程範例。
架構設計模式：這些模式用於處理架構設計。
9. JS中的Array.splice()和Array.slice()方法有什麼區別
話很少說，來看第一個例子：
var arr=[0,1,2,3,4,5,6,7,8,9];//設置一個數組
console.log(arr.slice(2,7));//2,3,4,5,6
console.log(arr.splice(2,7));//2,3,4,5,6,7,8
//由此咱們簡單推測數量兩個函數參數的意義,
slice(start,end)第一個參數表示開始位置,第二個表示截取到的位置(不包含該位置)
splice(start,length)第一個參數開始位置,第二個參數截取長度
複製代碼複製代碼
接着看第二個：
var x=y=[0,1,2,3,4,5,6,7,8,9]
console.log(x.slice(2,5));//2,3,4
console.log(x);[0,1,2,3,4,5,6,7,8,9]原數組並未改變
//接下來用一樣方式測試splice
console.log(y.splice(2,5));//2,3,4,5,6
console.log(y);//[0,1,7,8,9]顯示原數組中的數值被剔除掉了
複製代碼複製代碼
slice和splice雖然都是對於數組對象進行截取,可是兩者仍是存在明顯區別,函數參數上slice和splice第一個參數都是截取開始位置,slice第二個參數是截取的結束位置(不包含),而splice第二個參數(表示這個從開始位置截取的長度),slice不會對原數組產生變化,而splice會直接剔除原數組中的截取數據!
10.如何在JS中動態添加/刪除對象的屬性？
我們能夠使用object.property_name = value向對象添加屬性，delete object.property_name 用於刪除屬性。
例如：
let user = new Object();
// adding a property
user.name='Anil';
user.age =25;
console.log(user);
delete user.age;
console.log(user);
複製代碼複製代碼
11.解釋一下什麼是 promise ？
promise是js中的一個對象，用於生成可能在未來產生結果的值。 值能夠是已解析的值，也能夠是說明爲何未解析該值的緣由。
promise 能夠有三種狀態:
- pending：初始狀態，既不是成功也不是失敗
- fulfilled：意味着操做徹底成功
- rejected：意味着操做失敗
一個等待狀態的promise對象可以成功後返回一個值，也能失敗後帶回一個錯誤 當這兩種狀況發生的時候，處理函數會排隊執行經過then方法會被調用
12. 數組去重複的方法有哪些
1.使用 set function uniquearray(array) { let unique_array= Array.from(set(array)) return unique_array; }
2.使用 filter
function unque_array (arr) {
let unique_array = arr.filter(function(elem, index, self) {
return index == self.indexOf(elem);
})
return unique_array;
}
console.log(unique_array(array_with_duplicates));
複製代碼複製代碼
3.使用 for 循環
Array dups_names = ['Ron', 'Pal', 'Fred', 'Rongo', 'Ron'];
function dups_array(dups_names) {
let unique = {};
names.forEach(function(i) {
If (!unique[i]) {
unique[i] = true; }
});
return Object.keys(unique);} // Ron, Pal, Fred, Rongo
Dups_array(names);
複製代碼複製代碼
13. undefined，null 和 undeclared 有什麼區別？
1.null表示"沒有對象"，即該處不該該有值，轉爲數值時爲0。典型用法是：
（1） 做爲函數的參數，表示該函數的參數不是對象。
（2） 做爲對象原型鏈的終點。
2.undefined表示"缺乏值"，就是此處應該有一個值，可是尚未定義，轉爲數值時爲NaN。典型用法是：
（1）變量被聲明瞭，但沒有賦值時，就等於undefined。
（2) 調用函數時，應該提供的參數沒有提供，該參數等於undefined。
（3）對象沒有賦值的屬性，該屬性的值爲undefined。
（4）函數沒有返回值時，默認返回undefined。
3.undeclared：js語法錯誤，沒有申明直接使用，js沒法找到對應的上下文。
14.列出JS基本和非基本數據類型之間的一些區別？
1.目前JS中有6種基本數據類型: Undefined、Null、Boolean、Number、Symbol 和 String。還有1種複雜的數據類型————Object，Object本質上是由一組無序的名值對組成的。Object、Array和Function則屬於引用類型。
2.基本數據類型是不可變的，而非基本數據類型是可變的。
3.基本數據類型是不可變的，由於它們一旦建立就沒法更改，但非基本數據類型剛可更改，意味着一旦建立了對象，就能夠更改它。
4.將基本數據類型與其值進行比較，這意味着若是兩個值具備相同的數據類型並具備相同的值，那麼它們是嚴格相等的。
5.非基本數據類型不與值進行比較。例如，若是兩個對象具備相同的屬性和值，則它們嚴格不相等。
15. 如何在現有函數中添加新屬性
只需給現有函數賦值，就能夠很容易地在現有函數中添加新屬性。例如，現有一個對象person，經過下面的代碼來爲 person 添加新的屬性：
person.country= 「India」;
複製代碼複製代碼
16. JS中的深拷貝與淺拷貝的區別？
- 深拷貝遞歸地複製新對象中的全部值或屬性，而拷貝只複製引用。
- 在深拷貝中，新對象中的更改不會影響原始對象，而在淺拷貝中，新對象中的更改，原始對象中也會跟着改。
- 在深拷貝中，原始對象不與新對象共享相同的屬性，而在淺拷貝中，它們具備相同的屬性。
17. 如何在JavaScript中每x秒調用一個函數
在JS中，我們使用函數 setInterval() 在每x秒內調用函數。如：
setInterval(function (){ alert("Hello"); }, 3000);
複製代碼複製代碼
18. 解釋一下JS的展開操做符？
展開運算符在須要多個參數/變量/元素的位置展開表達式，它用三個點（...）。如：
var mid = [3, 4];
var newarray = [1, 2, ...mid, 5, 6];
console.log(newarray);
// [1, 2, 3, 4, 5, 6]
複製代碼複製代碼
19. JS中的宿主對象與原生對象有何不一樣？
宿主對象:這些是運行環境提供的對象。這意味着它們在不一樣的環境下是不一樣的。例如，瀏覽器包含像windows這樣的對象，可是Node.js環境提供像Node List這樣的對象。
原生對象:這些是JS中的內置對象。它們也被稱爲全局對象，由於若是使用JS，內置對象不受是運行環境影響。
20. 解釋JS中的高階函數？
高階函數是JS函數式編程的最佳特性。它是以函數爲參數並返回函數做爲結果的函數。一些內置的高階函數是map、filter、reduce 等等。
21. JS 中 == 和 === 區別是什麼？
一、對於string,number等基礎類型，==和===有區別
1）不一樣類型間比較，==之比較「轉化成同一類型後的值」看「值」是否相等，===若是類型不一樣，其結果就是不等。 2）同類型比較，直接進行「值」比較，二者結果同樣。
二、對於Array,Object等高級類型，==和===沒有區別
進行「指針地址」比較。
三、基礎類型與高級類型，==和===有區別
1）對於==，將高級轉化爲基礎類型，進行「值」比較。 2）由於類型不一樣，===結果爲false。
22. JS中的匿名函數是什麼？
匿名函數：就是沒有函數名的函數，如：
(function(x, y){
alert(x + y);
})(2, 3);
複製代碼複製代碼
這裏建立了一個匿名函數(在第一個括號內)，第二個括號用於調用該匿名函數，並傳入參數。
23. 是否能夠在JS中執行301重定向？
JS徹底運行在客戶端上。301是服務器做爲響應發送的響應代碼。所以，在JS中不可能執行301重定向。
24. 解釋JS中的事件冒泡和事件捕獲
事件捕獲和冒泡: 在HTML DOM API中，有兩種事件傳播方法，它們決定了接收事件的順序。兩種方法是事件冒泡和事件捕獲。第一個方法事件冒泡將事件指向其預期的目標，第二個方法稱爲事件捕獲，其中事件向下到達元素。
事件捕獲
捕獲過程不多被使用，可是當它被使用時，它被證實是很是有用的。這個過程也稱爲滴流模式。在這個過程當中，事件首先由最外層的元素捕獲，而後傳播到最內部的元素。例如:
<div>
<ul>
<li></li>
</ul>
</div>
複製代碼複製代碼
從上面的示例中，假設單擊事件發生在li元素中，在這種狀況下，捕獲事件將首先處理div，而後處理ul，最後命中目標元素li。
事件冒泡
冒泡的工做原理與冒泡相似，事件由最內部的元素處理，而後傳播到外部元素。
<div>
<ul>
<li></li>
</ul>
</div>
複製代碼複製代碼
從上面的例子中，假設click事件確實發生在冒泡模型中的li元素中，該事件將首先由li處理，而後由ul處理，最後由div元素處理。
24. 如何將文件的全部導出做爲一個對象？
import * as objectname from ‘./file.js’用於將全部導出的成員導入爲對象。 能夠使用對象的點（.）運算符來訪問導出的變量或方法，如：
objectname.member1;
objectname.member2;
objectname.memberfunc();
複製代碼複製代碼
25. 解釋一下什麼是箭頭函數？
箭頭函數是在es6或更高版本中編寫函數表達式的簡明方法。箭頭函數不能用做構造函數，也不支持this，arguments，super或new.target關鍵字，它最適合非方法函數。 一般，箭頭函數看起來像 const function_name =（）=> {}。
const greet=()=>{console.log('hello');}
greet();
複製代碼複製代碼
25 解釋 JS 中的函數提高
JS容許將聲明移動到頂部的默認行爲稱爲提高。JS中建立函數的兩種方法是函數聲明和函數表達式。
函數聲明
具備特定參數的函數稱爲函數聲明，在JS中建立變量稱爲聲明。如：
hoisted(); // logs "foo"
function hoisted() {
console.log('foo');
}
複製代碼複製代碼
函數表達式
當使用表達式建立函數時，稱爲函數表達式。如：
notHoisted(); // TypeError: notHoisted is not a function
var notHoisted = function() {
console.log('bar');
};
複製代碼複製代碼
26. module.exports 和 exports 之間有什麼區別？
module和exports是Node.js給每一個js文件內置的兩個對象。能夠經過console.log(module)和console.log(exports)打印出來。若是你在main.js中寫入下面兩行，而後運行$ node main.js:
console.log(exports);//輸出：{}
console.log(module);//輸出：Module {..., exports: {}, ...} （注：...表明省略了其餘一些屬性）
複製代碼複製代碼
從打印我們能夠看出，module.exports和exports一開始都是一個空對象{}，實際上，這兩個對象指向同一塊內存。這也就是說module.exports和exports是等價的（有個前提：不去改變它們指向的內存地址）。
例如：exports.age = 18和module.export.age = 18，這兩種寫法是一致的（都至關於給最初的空對象{}添加了一個屬性，經過require獲得的就是{age: 18}）。
27. import 和 exports 是什麼？
import和exports 幫助我們編寫模塊化的JS代碼。使用import和exports，我們能夠將代碼分割成多個文件。import只容許獲取文件的某些特定變量或方法。能夠導入模塊導出的方法或變量。
//index.js
import name,age from './person';
console.log(name);
console.log(age);
//person.js
let name ='Sharad', occupation='developer', age =26;
export { name, age};
複製代碼複製代碼
28. 列出一些單元測試框架
下面是一些最流行的JS單元測試框架:
- Unit.js
- Jasmine
- Karma
- Chai
- AVA
- Mocha
- JSUnit
- QUnit
- Jest
29. JS中有哪些不一樣類型的彈出框可用
在JS中有三種類型的彈出框可用，分別是：
- Alert
- Confirm
- Prompt
30. 如何將 JS 日期轉換爲ISO標準
toISOString() 方法用於將js日期轉換爲ISO標準。 它使用ISO標準將js Date對象轉換爲字符串。如：
var date = new Date();
var n = date.toISOString();
console.log(n);
// YYYY-MM-DDTHH:mm:ss.sssZ
複製代碼複製代碼
31. 如何在JS中克隆對象
Object.assign() 方法用於在JS中克隆對象。如：
var x = {myProp: "value"};
var y = Object.assign({}, x);
複製代碼複製代碼
32. 如何在JS中編碼和解碼 URL
encodeURI() 函數用於在JS中對URL進行編碼。它將url字符串做爲參數並返回編碼的字符串。
注意： encodeURI()不會編碼相似這樣字符： / ? : @ & = + $ #，若是須要編碼這些字符，請使用encodeURIComponent()。 用法：
var uri = "my profile.php?name=sammer&occupation=pāntiNG";
var encoded_uri = encodeURI(uri);
複製代碼複製代碼
decodeURI() 函數用於解碼js中的URL。它將編碼的url字符串做爲參數並返回已解碼的字符串，用法：
var uri = "my profile.php?name=sammer&occupation=pāntiNG";
var encoded_uri = encodeURI(uri);
decodeURI(encoded_uri);
複製代碼複製代碼
33. BOM 和 DOM 的關係
BOM全稱Browser Object Model，即瀏覽器對象模型，主要處理瀏覽器窗口和框架。
DOM全稱Document Object Model，即文檔對象模型，是 HTML 和XML 的應用程序接口（API），遵循W3C 的標準，全部瀏覽器公共遵照的標準。
JS是經過訪問BOM（Browser Object Model）對象來訪問、控制、修改客戶端(瀏覽器)，因爲BOM的window包含了document，window對象的屬性和方法是直接能夠使用並且被感知的，所以能夠直接使用window對象的document屬性，經過document屬性就能夠訪問、檢索、修改XHTML文檔內容與結構。由於document對象又是DOM的根節點。
能夠說，BOM包含了DOM(對象)，瀏覽器提供出來給予訪問的是BOM對象，從BOM對象再訪問到DOM對象，從而js能夠操做瀏覽器以及瀏覽器讀取到的文檔。
34. JS中的substr()和substring()函數有什麼區別
substr() 函數的形式爲substr(startIndex,length)。 它從startIndex返回子字符串並返回'length'個字符數。
var s = "hello";
( s.substr(1,4) == "ello" ) // true
複製代碼複製代碼
substring() 函數的形式爲substring(startIndex,endIndex)。 它返回從startIndex到endIndex - 1的子字符串。
var s = "hello";
( s.substring(1,4) == "ell" ) // true
複製代碼複製代碼
35. 解釋一下 "use strict" ?
「use strict」是Es5中引入的js指令。 使用「use strict」指令的目的是強制執行嚴格模式下的代碼。 在嚴格模式下，我們不能在不聲明變量的狀況下使用變量。 早期版本的js忽略了「use strict」。
36.解釋 JS 事件委託模型？
在JS中，有一些很酷的東西。其中之一是委託模型。當捕獲和冒泡時，容許函數在一個特定的時間實現一個處理程序到多個元素，這稱爲事件委託。事件委託容許將事件偵聽器添加到父節點而不是指定的節點。這個特定的偵聽器分析冒泡事件，以找到子元素上的匹配項。
- 1. 前端面試題彙總
- 2. 前端面試題彙總 筆試題
- 3. web前端面試題目彙總 Web前端面試題目彙總
- 4. 前端工程師面試題彙總
- 5. 前端面試問題css彙總
- 6. 前端面試題彙總（四）
- 7. Web前端面試題目彙總
- 8. web前端面試題彙總
- 9. 前端常見面試題彙總（一）
- 10. web前端常見面試題彙總
- 更多相關文章...
- • Docker 資源彙總 - Docker教程
- • Web 詞彙表 - 網站建設指南
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Docker容器實戰(一) - 封神Server端技術
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 字節跳動21屆秋招運營兩輪面試經驗分享
- 2. Java 3 年，25K 多嗎？
- 3. mysql安裝部署
- 4. web前端開發中父鏈和子鏈方式實現通信
- 5. 3.1.6 spark體系之分佈式計算-scala編程-scala中trait特性
- 6. dataframe2
- 7. ThinkFree在線
- 8. 在線畫圖
- 9. devtools熱部署
- 10. 編譯和鏈接
- 1. 前端面試題彙總
- 2. 前端面試題彙總 筆試題
- 3. web前端面試題目彙總 Web前端面試題目彙總
- 4. 前端工程師面試題彙總
- 5. 前端面試問題css彙總
- 6. 前端面試題彙總（四）
- 7. Web前端面試題目彙總
- 8. web前端面試題彙總
- 9. 前端常見面試題彙總（一）
- 10. web前端常見面試題彙總