性能優(yōu)化

• 減少http請(qǐng)求的次數(shù)
• 避免使用全局變量，減少DOM操作
• 避免在CSS文件里使用動(dòng)態(tài)屬性
• 壓縮代碼和圖片，圖片選用合適的格式
• 利用ajax緩存，減少DNS查找

移動(dòng)端ToC產(chǎn)品性能優(yōu)化

• 盡可能使用CSS3動(dòng)畫，開啟硬件加速
• 盡量避免CSS3的漸變陰影效果
• 適當(dāng)使用touch事件代替click事件
• 盡量少用float，float在渲染時(shí)計(jì)算量大

ToC產(chǎn)品VSToB產(chǎn)品

• ToB產(chǎn)品主要對(duì)象是企業(yè)，后臺(tái)產(chǎn)品。比如公司內(nèi)部的平臺(tái)，主要進(jìn)行的操作是數(shù)據(jù)的增刪改查，注重邏輯性，用戶都是公司內(nèi)部人員。
• ToC產(chǎn)品用戶基本上是個(gè)人用戶，重視用戶的體驗(yàn)感和視覺效果。

深淺拷貝

• 深拷貝：深拷貝會(huì)創(chuàng)造一個(gè)一模一樣的對(duì)象
  • JSON.parse(JSON.stringify(object))
  • lodash的深拷貝函數(shù)
• 淺拷貝：淺拷貝只復(fù)制指向某個(gè)對(duì)象的指針而不復(fù)制對(duì)象本身
  • Object.assign
  • ...展開運(yùn)算符

ES6新特性

• let：聲明局部變量
• const：聲明只讀變量
• 解構(gòu)賦值：從對(duì)象或數(shù)組中解構(gòu)出值對(duì)變量進(jìn)行賦值
• 模板字符串：反單引號(hào)中${}插值
• 當(dāng)屬性名和屬性值相同只需寫一個(gè)
• 箭頭函數(shù)，改變this的指向
• for of專門用于遍歷數(shù)組
• 展開字符串 ...
• 使用class定義類，extends實(shí)現(xiàn)類的繼承

服務(wù)端渲染(SSR)VS客戶端渲染(BSR)

• 服務(wù)端渲染：由后端直接返回HTML，用nodejs編寫
  • 優(yōu)點(diǎn)：

有利于SEO優(yōu)化
前端耗時(shí)少
后端直接生成HTML文件，減少查詢數(shù)據(jù)的時(shí)間

• 缺點(diǎn)：

不利于前后端分離，開發(fā)效率低
占用服務(wù)器資源

• 客戶端渲染：由前端使用js語法進(jìn)行HTML渲染
  • 優(yōu)點(diǎn)：

用戶體驗(yàn)好
前后端分離，開發(fā)效率高

• 缺點(diǎn)：

前端響應(yīng)慢
不利于SEO優(yōu)化

ES5原型鏈

• 每個(gè)函數(shù)都有prototype屬性，指向了函數(shù)的原型
• 每個(gè)對(duì)象都有proto屬性，指向了創(chuàng)建該對(duì)象的構(gòu)造函數(shù)的原型。
• 對(duì)象可以通過 proto 來尋找不屬于該對(duì)象的屬性，proto 將對(duì)象連接起來組成了原型鏈。

類的寫法

• ES5

function Person(name) {
    this.name = name; 
}
Person.prototype.sayHello = function(){
    return 'Hi, I am ' + this.name;
}

• ES6

class Person {
    constructor(name){
        this.name = name;
    }
    sayHello(){
        return 'Hi, I am ' + this.name;
    } 
}
typeof Person; 

HTML5

• 新增語義化標(biāo)簽：

header,nav,footer,aside,article,section

• 新增表單屬性

datalist,datetime,date,month,week,number,emailurl等

axios及其封裝

• axios是基于promise的http庫
• 根據(jù)npm官網(wǎng)封裝請(qǐng)求攔截器和響應(yīng)攔截器

XHR手動(dòng)封裝

export function 名字(params/data) {
  return fetch({
    url: '   ',
    method: 'GET/POST',
    params/data
  })
}

事件委托

• 原理：事件的冒泡機(jī)制，將子元素的事件委托給父元素
• 優(yōu)點(diǎn)：大量減少內(nèi)存使用，減少事件注冊(cè)

DOM 0級(jí)/2級(jí)

• 0級(jí)DOM：綁定on...事件，不能同時(shí)綁定多個(gè)相同的事件，相同的會(huì)覆蓋
• 2級(jí)DOM：事件監(jiān)聽。同時(shí)綁定幾個(gè)事件（相同或不同），然后順序執(zhí)行，不會(huì)覆蓋

防抖與節(jié)流

• 防抖：防抖是將多次執(zhí)行變?yōu)樽詈笠淮螆?zhí)行
  • 如果短時(shí)間內(nèi)大量觸發(fā)同一事件，只會(huì)執(zhí)行一次函數(shù)。
  • 定義一個(gè)定時(shí)器
• 節(jié)流：節(jié)流是將多次執(zhí)行變成每隔一段時(shí)間執(zhí)行
  • 在函數(shù)執(zhí)行一次之后，該函數(shù)在指定的時(shí)間期限內(nèi)不再工作
  • 利用時(shí)間戳和定時(shí)器

獲取DOM對(duì)象有哪些方法

• getElementById()
• getElementsByName()
• getElementsByTagName()
• getElementsByClassName()
• document.querySelector()
• document.querySelectorAll()

CSS權(quán)重

• !import > 行內(nèi)式 > id選擇器 > class選擇器 > 標(biāo)簽選擇器

CSS3新增屬性

• border-color
• border-image
• border-radius
• box-shadow
• background-origin
• transform
• animation動(dòng)畫
• transition過渡

position常用定位

• static
• relative
• absolute
• fixed

常用塊級(jí)元素

• h1 - h6
• div
• p
• ul,ol ,li
• form
• table

DOM文檔流

• 將窗口自上而下分成一行一行，在每行中按從左往右依次排放元素。

BFC

• 塊級(jí)格式化上下文：新建了一個(gè)BFC盒子，盒子里面的元素不會(huì)影響外面元素的樣式。在垂直方向上margin會(huì)重疊。
• BFC作用：
  • 避免margin重疊
  • 清除浮動(dòng)
  • 自適應(yīng)兩欄布局
• 如何創(chuàng)建BFC
  • 有浮動(dòng)
  • position為absolute或fixed
  • display為inline-block、table-cell、flex、table-caption或者inline-flex
  • overflow不為visible

GETvs.POST

• get時(shí)從服務(wù)器獲取數(shù)據(jù)，post時(shí)向服務(wù)器傳遞數(shù)據(jù)
• get傳送的數(shù)據(jù)量較小，不能大于2KB。post傳送的數(shù)據(jù)量較大
• get把參數(shù)添加到url中，post看不到用戶信息
• get安全性非常低，post安全性較高

狀態(tài)碼

• 200：請(qǐng)求成功
• 301：永久重定向
• 302：暫時(shí)重定向
• 405：客戶端請(qǐng)求中的方法被禁止
• 413：請(qǐng)求的實(shí)體過大，拒絕請(qǐng)求
• 415：客戶端媒體類型錯(cuò)誤
• 504：代理無法連接到服務(wù)器

AJAX

• AJAX 是在不重新加載整個(gè)頁面的情況下，可以與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁內(nèi)容。

同源策略，CORS

• 同源：域名，協(xié)議，端口號(hào)都相同
• CROS：跨域資源共享，它允許瀏覽器向跨源服務(wù)器發(fā)送XHR請(qǐng)求，克服了AJAX只能同源使用的限制

正則表達(dá)式

img+span 上下居中有哪些方案

• 給sopan和img添加vertical-align：middle

常用設(shè)計(jì)模式

• 單例模式：只能創(chuàng)建唯一的實(shí)例
• 適配器模式
• 工廠模式

跨域的解決方案

• JSONP跨域
• nodejs中間件代理
• nginx代理

JS常用數(shù)據(jù)類型

• 基本數(shù)據(jù)類型：string,number,boolean,null,undefinded
• 復(fù)雜數(shù)據(jù)類型:object

數(shù)組去重有哪些方法

undefined和null

• undefinded和null相等但不全等。
• 數(shù)據(jù)類型轉(zhuǎn)換成number時(shí)，null為0，undefined為NaN。

嚴(yán)格模式下的代碼規(guī)范有哪些

• 變量必須先聲明再使用，不存在變量提升
• 不能使用保留字或關(guān)鍵字為變量名
• 函數(shù)的參數(shù)不能有重復(fù)

作用域鏈

• 在當(dāng)前作用域中沒有查到值，就會(huì)向上級(jí)作用域去查，直到查到全局作用域，這么一個(gè)查找過程形成的鏈條就叫做作用域鏈。

window和document

• window：瀏覽器中一個(gè)打開的窗口
• document：整個(gè)HTML文檔，可以來訪問頁面中的所有元素

同步與異步

• 同步：需要有返回結(jié)果才能繼續(xù)執(zhí)行
• 異步：不需要有返回結(jié)果，之后使用回調(diào)函數(shù)調(diào)用結(jié)果

阻塞與非阻塞

• 阻塞和非阻塞是在等待調(diào)用結(jié)果時(shí)的狀態(tài)
• 阻塞調(diào)用是指結(jié)果返回之前該線程會(huì)被掛起，只有得到結(jié)果才會(huì)返回
• 非阻塞調(diào)用指在不能立刻得到結(jié)果之前，該調(diào)用不會(huì)阻塞當(dāng)前線程。定時(shí)查看詢問狀態(tài)

回流與重繪

• 回流：也叫重排。因?yàn)橐?guī)模尺寸、布局等改變時(shí)，瀏覽器重新渲染。
• 重繪：頁面元素改變但不影響在文檔流中的位置時(shí)，瀏覽器將重新繪制新樣式
• 回流必將引起重繪，但是重繪不一定會(huì)引起回流
• 減少回流和重繪
  • 使用 visibility 替換 display: none ，因?yàn)榍罢咧粫?huì)引起重繪，后者會(huì)引發(fā)回流
  • 不要把 DOM 結(jié)點(diǎn)的屬性值放在一個(gè)循環(huán)里當(dāng)成循環(huán)里的變量
  • 不要使用 table 布局，可能很小的一個(gè)小改動(dòng)會(huì)造成整個(gè) table 的重新布局