1. 子元素垂直居中的方法
對於行內元素(inline)
- 單行：設置上下 pandding 相等；或者設置 line-height 和 height 相等
- 多行：設置上下 pandding 相等；或者設置 display: table-cell; 和 vertical-align: middle;；或者使用 flex 佈局
對於塊級元素(block)： 下面前兩種方案，父元素需使用相對佈局
- 已知高度：子元素使用絕對佈局 top: 50%;，再用負的 margin-top 把子元素往上拉一半的高度
- 未知高度：子元素使用絕對佈局 position: absolute; top: 50%; transform: translateY(-50%);
- 使用 Flexbox + align-items: center; 垂直居中
2. 響應式佈局
好文閱讀：真的，移動端尺寸自適應與dpr無關
響應式佈局是： 同一個頁面在不同屏幕尺寸下有不同的佈局。
實現當頁面寬度大於960px小於1200px的時候 執行的CSS：
@media screen and (min-width:960px) and (max-width:1200px){
body{
background:yellow;
}
}
3. 三欄佈局
參考鏈接：三欄佈局——聖盃佈局和雙飛翼佈局
聖盃佈局和雙飛翼佈局的共同點：
- 都是實現左右寬度固定，中間自適應
- 父元素的高度始終是由三欄中高度最高的元素決
聖盃佈局：
- 都是浮動佈局
- content: width是100%，其他處理就是將content的父元素設置padding，然後left、right的內容放置在相關的地方顯示。
雙飛翼佈局：
- 前面三點跟聖盃佈局一樣，並且不用設置relative及left的值
- 給content內層嵌套一個div，然後給這個div設置margin值
4. 解釋下Ajax,JSON,以及Jsonp
Ajax: ( Asynchronous JavaScript and XML) 即異步JS與XML；指的是一套綜合了多項技術的瀏覽器端網頁開發技術。
JSON:（JavaScript Object Notation）是一種基於文本的數據交換格式。
參考鏈接：【簡明教程】JSON
Jsonp: 是一種跨域通信的手段。
參考鏈接：jsonp的原理與實現
5. 獲取當前瀏覽設備是pc還是移動端？移動端判斷手機型號？
關鍵字：navigator.userAgent
判斷pc還是移動端：
// 判斷瀏覽器函數
function isMobile(){
if(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {
return true; // 移動端
}else{
return false; // PC端
}
}
判斷是不是微信打開：micromessenger
function is_weixn(){
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
return true; // 微信端打開
} else {
return false;
}
}
判斷是蘋果還是安卓：iphone
var phone_flag = navigator.userAgent.toLowerCase();
if (phone_flag.search(/iphone/) != -1) {
// alert("蘋果手機---》"+phone_flag)
// $(".address_textarea").css('marginLeft',-10)
}else {
// alert("安卓機"+phone_flag)
}
6. socket、webStocket是什麼？有什麼用？
參考鏈接：WebSocket探祕
HTTP： HTTP是應用層協議，封裝解析傳輸的數據；
socket是什麼：
不是協議，它是在程序層面上對傳輸層協議（可以主要理解爲TCP/IP）的接口封裝，是傳輸通道兩端的接口。
WebSocket是什麼：
它包裝成了一個應用層協議作爲socket，
- 能夠讓客戶端和遠程服務端通過web建立全雙工通信
- 同時允許跨域
WebSocket 協議有兩部分：握手、數據傳輸。
7. 事件委託
參考鏈接： 事件綁定、事件監聽、事件委託
參考鏈接：js中的事件委託或是事件代理詳解
事件綁定和事件移除：（兼容IE）
//綁定監聽事件
function addEventHandler(target,type,fn){
if(target.addEventListener){
target.addEventListener(type,fn);
}else{
target.attachEvent("on"+type,fn);
}
}
//移除監聽事件
function removeEventHandler(target,type,fn){
if(target.removeEventListener){
target.removeEventListener(type,fn);
}else{
target.detachEvent("on"+type,fn);
}
}
事件委託：
事件委託就是利用冒泡的原理，把事件加到父元素或祖先元素上，觸發執行效果。
<ul id="list">
<li id="item1" >item1</li>
<li id="item2" >item2</li>
<li id="item3" >item3</li>
</ul>
<script>
var list= document.getElementById("list");
list.addEventListener("click",function(event){
var ev = event|| window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName == "LI"){
alert(target.innerHTML);
}
})
</script>
事件委託的侷限性的：
比如 focus、blur 之類的事件本身沒有事件冒泡機制，所以無法委託；
mousemove、mouseout 這樣的事件，雖然有事件冒泡，但是隻能不斷通過位置去計算定位，對性能消耗高，因此也是不適合於事件委託的；
8. 獲取checkbox的選中項
原生js實現：
// objname 傳入的是name
function Lond_ckeck(objname){
var obj = document.getElementsByName(objname);
var checkval = [];
for(var k in obj){
if(obj[k].checked)
checkval.push(obj[k].value);
}
return checkval;
}
jQuery實現：
var checkList=$("input[name='checkId']:checked");
//獲取所有checkbox選中的, checkList是一個list 並且得到的list中的元素不是按照你的勾選順序
var strgetSelectValue
if (checkList >= 0) {
strgetSelectValue += $(this).val() + ","
}
9. 前端性能優化
圖片：
- 不用圖片。修飾類圖片可以使用css實現
- 將多個圖標文件整合到一張圖片中（雪碧圖）
DNS 預解析：
DNS Prefetching 是讓具有此屬性的域名不需要用戶點擊鏈接就在後臺解析，而域名解析和內容載入是串行的網絡操作，所以這個方式能 減少用戶的等待時間，提升用戶體驗 。
<link rel="dns-prefetch" href="//yuchengkai.cn">
設置緩存：
Cache-Control：max-age-300;
//表示客戶端將該緩存最多保存300s，如果還在該時間內則直接不發送請求。
懶加載
不僅可以用於圖片，也可以使用在別的資源上。
- 比如進入可視區域纔開始播放視頻，
- 對於圖片來說，先設置圖片標籤的 src 屬性爲一張佔位圖，將真實的圖片資源放入一個自定義屬性中，當進入自定義區域時，就將自定義屬性替換爲 src 屬性，這樣圖片就會去下載資源等等。