1.H5和CSS3新特性
#H5新特性
- 語義化標簽：header、footer、section、nav、article
- 增強型表單：input的type，如email、range、number、search、url、date等
- 新增表單屬性：placeholder、required、min和max
- 音頻視頻：audio、video
- 地理地位
- 拖拽
- 本地存儲：localStorag-沒有時間限制的數據存儲；sessionStorage-針對一個session的數據存存儲，當用戶關閉瀏覽器窗口后，數據會被刪除
- 新事件：onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause
- WebSocket:單個TCP連接上進行全雙工通訊的協議
#CSS3新特性
- 過渡：transition; 動畫：animation; 2D/3D形狀轉換：transform
- 選擇器：:last-child, :first-child, :nth-child(1) , :disabled, :checked,偽類和偽元素等
- 背景：background-size:規定背景圖片的尺寸；baclground-origin:規定背景圖片的定位區域
- 邊框：border-radius：圓角；box-shadow/text-shadow：陰影；border-image:邊框圖片
- 文本效果：text-shadow:向文本添加陰影；text-overflow:規定當文本溢出包含元素發生的事情；text-decoration:文本修飾符-overline、line-through、underline分別是上划線、中划線、下划線 等其他屬性自行查閱
- 多列布局
- 彈性布局:display:flex
- 柵格布局
- 盒模型定義：box-sizing:content-box(默認）/border-box/inherit
- 濾鏡：filter
- 媒體查詢
2.作用域與作用域鏈的概念
#作用域
作用域分為全局作用域與函數作用域（塊級作用域）：全局作用域表示該代碼在程序的任何地方都能訪問，window對象的內置屬性都擁有全局作用域。但是函數作用域在固定的代碼片段才能被訪問。作用域的最大用處是隔離變量，不同作用域下同名變量不會有沖突。
#作用域鏈
一般情況下變量取值到創建這個變量的函數的作用域中取值，但是如果在當前的作用域中沒有查到值，就會向上級作用域去查直到找到全局作用域，這么一個查找的過程形成的鏈條叫做作用域鏈
3.閉包
閉包就是能夠訪問另外一個函數作用域的變量的函數。由於在JavaScript語言中只有函數內部的子函數才能讀取局部變量，清晰的講閉包就是一個函數，這個函數能夠訪問其他函數的作用域中的變量。 所以本質上，閉包就是將函數內部和函數外部連接起來的一座橋梁。閉包可以用在許多地方。它的最大用處有兩個，一個是前面提到的可以讀取函數內部的變量，另外一個就是讓這些變量的值始終保存在內存中。
使用閉包的注意點：1.由於閉包會使得函數中的變量都被保存在內存中，內存消耗很大，所以不能濫用閉包，否則會造成網頁的性能問題，在IE中可能導致內存的泄露。解決方法時，在退出函數之前，將不使用的局部變量全部刪除。2.閉包會在父函數外部，改變父函數內部變量的值，所以，如果你把父函數當做對象使用，把閉包單做它的公用方法，把內部變量當做它的私有屬性，這時一定要小心，不要隨便改變父函數內部變量的值
4.原型與原型鏈的概念
#原型
- 概念： 在構造函數創建出來之后，系統會默認的幫構造函數創建並關聯一個神秘的對象，這個對象就是原型。
- 原型默認是一個空對象
- 原型的作用：原型中的屬性和方法，可以被該構造函數創建出來的對象使用
#原型鏈
- 完整的原型鏈結構圖
- 原型鏈的概念：每個構造函數都有一個原型對象，原型對象都包含一個指向構造函數的指針，而實例都包含一個指向原型對象的內部指針。那么假如讓我們原型等於另一個類型的實例，顯然，此刻的原型對象將包含指向另一個原型的指針，相應的，另一個原型中也包含着一個指向另一個構造函數的指針，假如另一個原型又是另一個類型的實例，那么上述關系依然成立，如此層層遞進，就構成了實例與原型的鏈條，這就是所謂的原型鏈的基本能概念
5.ES6新特性
- 新增let,const:注意let和const與var的區別。1.let和const不會對變量進行變量提升 2.let和const聲明形成塊級作用域 3.同一作用域下let和const不能聲明同名變量，而var可以 4.let會形成暫時性死區 5.const一旦聲明必須賦值，不能使用null占位 6.const聲明后不能再修改 ,但是const定義的對象屬性是可以改變的，原因是對象是引用類型，const定義的引用類型只要指針不發生改變，其它的不論如何改變都是允許的
- 箭頭函數
- 展開運算符
- 解構賦值
- 新增四個數組API： map(映射）,reduce（匯總）,filter(過濾）,forEach（循環）
- 字符串匹配startwith,endwith
- 字符串模板 ${ }
- promise
- generator 認識生成器
6.seo搜索引擎優化
- 減少http請求，使用精靈圖
- 不濫用閉包，會加深作用域鏈，增加變量的查找時間
- css樣式壓縮（gzip），圖片懶加載，模塊懶加載
- DNS解析優化
- CDN外部網頁加載服務器
7.如何讓一個盒子上下居中
- 彈性布局：align-items:center(縱軸居中）， justify-content:center(主軸居中）
- 定位（推薦）：父 position:relative,子 position: absolute ,top:50% left 50%,回退盒子一半的距離：margin-top:-50px;margin-left:-50px
- transform:translate(-50%,-50%) translate()函數是css3的新特性，在不知道自身寬高的情況下，可以利用它來進行水平垂直居中
8.瀏覽器的緩存機制
考察cookie,sessionStorage,localStorage的區別和用法
共同特點：用於瀏覽器端存儲的緩存數據
- cookie:限制大小為4kb,主要用途有保存登錄信息，比如登錄網址時可以看到“記住密碼”選項，這通常就是通過cookie中存入一段用來辨別用戶身份的數據來實現。當設置了cookie后，數據會發送到服務器端，造成一定寬帶的浪費。cookie過期時間之前一直有效，即使關閉窗口或瀏覽器。cookie和localStorage是在同源窗口中共享的。cookie有效時間默認為-1，如果不進行設置的話，就會默認在瀏覽器會話關閉時結束。可以通過setMaxAge()方法設置cookie的生命周期。當setMaxAge(0)表示立刻刪除該瀏覽器上指定的cookie
- localStorage:存儲大小可達5M,是HTML5標准中新加入的技術，它並不是划時代的新東西，早在IE6時代，就有一個叫userData的東西用於本地存儲，但是考慮到瀏覽器的兼容性，更通用的方案是使用Flash.而如今，localStorage被大多數瀏覽器支持，如果你的網站需要支持IE6+，那么使用userData作為你的polyfill(向下兼容瀏覽器）的方案是種不錯的選擇。localStorage數據存儲永久有效，除非手動刪除
- sessionStorage:存儲大小可達5M，是一個前端的概念，它可以將一部分數據在當前的會話中保存下來，刷新數據依舊存在，但當頁面關閉后，sessionStorage中的數據就會被清空。sessionStorage僅在關閉瀏覽器之前有效。sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個頁面
