1.typeof 只能區分值類型的，數組，對象，null都為object，function也可以識別
2. 類型裝換的情況
- 字符串拼接
- == 運算符
- if語句
- 邏輯運算符
3.js內置函數
- OBject
- Array
- Boolean
- String
- Number
- Function
- Date
- RegExp
- Error
4.按存儲方式區分變量類型，值類型和引用類型
5.理解json --js對象 JSON.stringify({a:10} JSON.parse('{"a":"23"}')
6.原型和原型鏈
- 判斷一個變量是數組類型
- 寫一個原型鏈繼承的例子
- 描述new一個對象的過程
- zepto或其他的框架如何使用原型鏈
- 構造函數
- 原型規則
- 所有的引用類型（數組，對象，函數）,都具有對象特性，即可自由擴展屬性（除了null）var obj ={};obj.a="123"
- 所有的引用類型（數組，對象，函數）,都有一個__proto__屬性,屬性值是一個普通對象obj.__proto__
- 所有的函數，都有一個prototype屬性，屬性值也是一個普通的對象 fn.prototype
- 所有的引用類型（數組，對象，函數），__proto__屬性值指向它的構造函數的prototype屬性值obj__proto__===Object.prototype
- 當試圖得到一個對象的某個屬性時，如果這個對象本身沒有這個屬性，那么就會去它的__proto__（即它的構造函數的prototype）中找
- 原型鏈
- instanceof 使用instanceof判斷一個函數是否是一個變量的構造函數
- this指向實例本身
- 循環對象自身的屬性 for in 瀏覽器默認會屏蔽原型的屬性 for(var item in f) {if(f.hasOwnProperty(item){是自身的屬性})}_
- f.toString() 去 var f = new Fun(); f.__proto__找
7.
- 執行上下文
- 范圍：一段<script>或則一個函數
- 全局：變量定義，函數聲明，一段script
- 函數：變量定義，函數聲明，this,arguments ,函數
- 變量提升 var a = undefined; a= 100;
- this集中不同使用場景
- 作為構造函數的執行 function a(name){this.name = name} var f = new a('aaa')
- 作為對象屬性的執行 var obj ={name:'a',aaa:function(){console.log(this.name)}} obj.aaa() //this === obj
- 作為普通函數執行 function fn(){console.log(this)} //this === window
- call apply bind function fn1(name){console.log(name)} fn1.apply({x:1001},[100]) / fn1.call({x:1001},120) / var aaa = function (name){console.log(name,this)}.bind({name:119}) aaa()
- 創建10a標簽，點擊彈出對應的序號
- 理解作用域，作用鏈
- 沒有塊作用域
- 只有函數和全局作用域
- 作用域鏈一級一級往上面找
- 實際開發中閉包作用
- 函數作為返回值
- 函數作為參數傳遞
- 作用域在該函數里面找的 function a(){var b=100;return function(){console.log(b)}} var b=123; var c = a();c() //100
8.異步和單線程
- 同步和異步
- setTimeout
- 前端使用異步的場景
- 定時任務 setTimeout setInterval
- 網絡請求 ajax請求，動態<img>加載
- 事件綁定
- 單線程 --只能同時干一件事
9.日期和math
- Date.now() //獲取當前時間毫秒值
- d.getTime() //獲取毫秒值
- d.getFullYear() //年
- d.getMonth() //月（0-11）
- d.getDate() //日 0-31
- d.getHours() //0-59
- d.getMinutes() //0-59
- d.getSeconds() //0-59
- Math。random() //0-1 很多小數位數
10.數組api
- forEach 遍歷所有元素 arr.forEach((item,index)=>{})
- every 判斷所有元素是否都符合條件 arr.every((item,index)=>{ if(item <4){return true}})
- some 判斷是否有至少一個元素符合條件 arr.some((item,index)=>{ if(item <4){return true}})
- sort 排序 arr.sort(function(a,b){return a-b;//小到大 return b-a;//大到小})
- map 對元素重新組裝，生成新數組 arr.map(item=>{return 'a'+item})
- filter 過濾符合條件的元素 arr.filter(item=>{if(item>2){return true}})
11.對象api
- for in
- 封裝一個對象數組能循環的forEach 簡單區分數組和對象 arr instanceOf Array
12.js web api
- DOM Document Object Model
- DOM本質 xml 樹
- DOM節點
- DOM操作
- 獲取DOM節點
- document.getElementById
- document.getElementsByTagName
- divNode.length
- divNode[0]
- document.getElementByClassName
- document.querySelectorAll
- divNode[0].style.width
- divNode[0].style.width = '200px'
- divNode[0].className
- divNode[0].className = 'active'
- divNode[0].nodeName
- divNode[0].nodeType
- divNode[0].getAttribute('src')
- divNode[0].setAttribute('src')
- DOM 結構操作
- 新增節點 document.createElement('div') appendChild()
- 獲取父元素 divNOde[0].parentElement
- 獲取子元素 divNode[0].childNodes
- 刪除節點 removeChild()
- 獲取兄弟節點
- BOM Browser Object Model
- 檢測瀏覽器類型
- 拆解url各部分
- navigator
- navigator.userAgent
- screen
- screen.width
- screen.height
- location
- location.href
- location.protocol
- location.host
- location.pathname
- location.search
- location.hash
- history
- history.go()
- history.back()
- 事件
- 編寫通用的事件監聽函數 divNode[0].addEventLIstener('click',fn)
- 描述事件冒泡流程
- 代理 div1.addEventListerner('click',function(e){if(e.target.nodeName == 'P'){}})
- 阻止冒泡 e.stopPropatation()
- Ajax
- 手動編寫一個ajax
- 跨域的幾種實現方式
- XMLHttPRequest
- 狀態說明
- 2xx 表示成果處理請求200
- 3xx 需要重定向，瀏覽器直接跳轉
- 4xx 客戶端請求錯誤404
- 5xx 服務器端錯誤
- 存儲
- cookie
- 本身用於客戶端和服務器通信
- 也有本地存儲的功能
- document.cookie="" 獲取和修改
- 存儲量太小，只有4kb
- 所有的http請求都帶着，影響效率
- sessionStorage
- 最大容量5M
- sessionStorage.setItem(key,value); sessionStorage.getItem(key)
- 瀏覽器關閉就會銷毀
- localStorage
- 最大容量5M
- localStorage.setItem(key,value); localStorage.getItem(key)
- 一直保留，除非手動清除
- 兼容：ios Safari隱藏模式下，localStorage.getItem()會報錯，建議統一使用try-catch
13.開發環境
- 開發工具
- sublime
- vscode
- git
- git status
- git add
- git checkout xxx
- git commit -m "xxx"
- git push origin master
- git pull origin master
- git branch
- git checkout -b xxx/git checkout xxx
- git merge xxx
- 多人協作
- git clone xxx
- git checkout -b dev
- vim xxx.file
- git add xxx
- git commit
- git push origin dev
- git checkout master
- git pull origin master
- git merge dev
- git push origin master
- 模塊化
- export {getFun:function(){}}
- var a = require("xx.js");
- webpack
- 新建webpack.config.js
- var path = require('path')
- var webpack = require('webpack')
- module.exports = {context:path.resolve(__dirname,'./src'),entry:{app:'./app.js'},output:...}
- node
- npm init
- npm install webpack --save-dev （--save-dev 在開發環境 --save 正式測試都有）
- 上線
- 將測試完成的代碼提交到git版本master分支
- 將服務器的代碼全部打包並記錄版本號，備份
- 將master分支代碼提交覆蓋到線上，生成新版本
- 運行環境
- 瀏覽器通過訪問鏈接得到頁面的內容
- 通過繪制和渲染，顯示在最后的頁面樣式
- 頁面加載過程
- 從輸入url到得到html的詳細過程
- window.onload ,DOMContentLoaded
- 加載資源的形式 1.輸入URL加載頁面 2.<script src="xx" ></script>
- 加載一個資源的過程
- 瀏覽器根據DNS服務器得到域名的IP地址
- 向這個IP的機器發送http請求
- 服務器收到，處理並返回HTML請求
- 瀏覽器得到返回內容
- 瀏覽器渲染頁面的過程
- 根據HTML結構生成DOM tree
- 根據css生成cssom
- 將DOM和CSSOM整合形成RenderTree
- 根據RenderTree開始渲染和顯示
- 遇到<script>時，會執行並阻塞渲染
- 性能優化
- 多使用內存，緩存或則其他方法
- 減少cpu計算，減少網絡請求
- 加載頁面和靜態資源
- 靜態資源的壓縮合並
- 靜態資源緩存
- 使用CDN讓資源加載更快
- 使用SSR后端渲染，數據直接輸出到HTML
- 頁面渲染
- CSS放在body前面，js放在body后面
- 懶加載
- 減少DOM查詢，對DOM查詢做緩存
- 減少DOM，盡量多個操作合並在一起執行
- 事件節流
- 盡早執行操作（如DOMContentLoaded）
- 安全性
- xss跨站攻擊
- 輸入文章，偷偷插入script
- 攻擊代碼中，獲取cookie，發送自己的服務器
- 會把查看者的cookie發送到攻擊者服務器
- 措施
- 前端替換關鍵字，例如替換<為<>為>
- 后端替換
- XSRF跨站仿造
- 登陸一個網站
- 付費網站接口沒有任何驗證
- 然后收到郵件，隱藏<img src="xx/pay?id=ass"
- 查看郵件的時候，悄悄付費了
- 措施
- 增加驗證流程，例如輸入指紋，密碼，短信驗證碼
- 面試技巧
- 簡歷
- 簡潔明了，重點突出項目經歷和解決方案
- 把個人博客放在簡歷中，定期維護更新博客
- 把個人開源項目放在簡歷中，並維護開源項目
- 簡歷真實，保持能力和經歷的真實性
- 面試過程
- 如何看待加班？
- 千萬不可挑戰面試官
- 學會給面試官驚喜，拓展知識點
- 遇到不會回答的問題，回答知道的部分的
- 談談缺點，比如什么不會，但最近在學
