1.get 和post 的區(qū)別？（可能會(huì)問到url長度是多少？）
答：1、發(fā)送的數(shù)據(jù)數(shù)量
在Get中，只能發(fā)送有限數(shù)量的數(shù)據(jù)，因?yàn)閿?shù)據(jù)是在URL中發(fā)送的；
在POST中，可以發(fā)送大量的數(shù)據(jù)，因?yàn)閿?shù)據(jù)是在正文主體中發(fā)送的。
2、安全性
GET方法發(fā)送的數(shù)據(jù)不受保護(hù)，因?yàn)閿?shù)據(jù)在URL欄中公開，這增加了漏洞和黑客攻擊的風(fēng)險(xiǎn)。
POST方法發(fā)送的數(shù)據(jù)是安全的，因?yàn)閿?shù)據(jù)未在URL欄中公開，還可以在其中使用多種編碼技術(shù)，這使其具有彈性。
3、加入書簽中
GET查詢的結(jié)果可以加入書簽中，因?yàn)樗訳RL的形式存在；而POST查詢的結(jié)果無法加入書簽中。
4、編碼
在表單中使用GET方法時(shí)，數(shù)據(jù)類型中只接受ASCII字符。
在表單提交時(shí)，POST方法不綁定表單數(shù)據(jù)類型，并允許二進(jìn)制和ASCII字符。
5、可變大小
GET方法中的可變大小約為2000個(gè)字符。而，POST方法最多允許8 Mb的可變大小。
6、緩存
GET方法的數(shù)據(jù)是可緩存的，而POST方法的數(shù)據(jù)是無法緩存的。
7、主要作用
GET方法主要用于獲取信息。而，POST方法主要用于更新數(shù)據(jù)。
1.1#url限制長度：
答：IIS 7 對(duì) Query String 有長度限制；默認(rèn)：2048
IE瀏覽器對(duì)URL的長度現(xiàn)限制為2048字節(jié)(自己測試最多為2047字節(jié))。
360極速瀏覽器對(duì)URL的長度限制為2118字節(jié)。
Firefox(Browser)對(duì)URL的長度限制為65536字節(jié)。
Safari(Browser)對(duì)URL的長度限制為80000字節(jié)。
Opera(Browser)對(duì)URL的長度限制為190000字節(jié)。
Google(chrome)對(duì)URL的長度限制為8182字節(jié)。
2.常見的狀態(tài)碼有哪些？
200：這個(gè)是最常見的http狀態(tài)碼，表示服務(wù)器已經(jīng)成功接受請(qǐng)求，并將返回客戶端所請(qǐng)求的最終結(jié)果
202：表示服務(wù)器已經(jīng)接受了請(qǐng)求，但是還沒有處理，而且這個(gè)請(qǐng)求最終會(huì)不會(huì)處理還不確定
204：服務(wù)器成功處理了請(qǐng)求，但沒有返回任何實(shí)體內(nèi)容 ，可能會(huì)返回新的頭部元信息
301：客戶端請(qǐng)求的網(wǎng)頁已經(jīng)永久移動(dòng)到新的位置，當(dāng)鏈接發(fā)生變化時(shí)，返回301代碼告訴客戶端鏈接的變化，客戶端保存新的鏈接，并向新的鏈接發(fā)出請(qǐng)求，已返回請(qǐng)求結(jié)果
404：請(qǐng)求失敗，客戶端請(qǐng)求的資源沒有找到或者是不存在
500：服務(wù)器遇到未知的錯(cuò)誤，導(dǎo)致無法完成客戶端當(dāng)前的請(qǐng)求。
503：服務(wù)器由于臨時(shí)的服務(wù)器過載或者是維護(hù)，無法解決當(dāng)前的請(qǐng)求，以上http狀態(tài)碼是服務(wù)器經(jīng)常返回的狀態(tài)代碼，用戶只能通過瀏覽器的狀態(tài)了解服務(wù)器是否正常運(yùn)行，一般除了錯(cuò)誤的狀態(tài)碼，都不會(huì)看到服務(wù)器的狀態(tài)碼的，新SEOer你們了解到了嗎？內(nèi)容編輯來自51特色購SEO優(yōu)化人員，想了解更過狀態(tài)碼的知識(shí)可以加我好友，一起相互交流學(xué)習(xí) ```
#3.vue的性能優(yōu)化？
答：1、代碼模塊化，咱們可以把很多常用的地方封裝成單獨(dú)的組件，在需要用到的地方引用，而不是寫過多重復(fù)的代碼，每一個(gè)組件都要明確含義，復(fù)用性越高越好，可配置型越強(qiáng)越好，包括咱們的css也可以通過less和sass的自定義css變量來減少重復(fù)代碼。
2、for循環(huán)設(shè)置key值，在用v-for進(jìn)行數(shù)據(jù)遍歷渲染的時(shí)候，為每一項(xiàng)都設(shè)置唯一的key值，為了讓Vue內(nèi)部核心代碼能更快地找到該條數(shù)據(jù)，當(dāng)舊值和新值去對(duì)比的時(shí)候，可以更快的定位到diff。
3、Vue路由設(shè)置成懶加載，當(dāng)首屏渲染的時(shí)候，能夠加快渲染速度。
4、更加理解Vue的生命周期，不要造成內(nèi)部泄漏，使用過后的全局變量在組件銷毀后重新置為null。
5、可以使用keep-alive，keep-alive是Vue提供的一個(gè)比較抽象的組件，用來對(duì)組件進(jìn)行緩存，從而節(jié)省性能。
二．打包優(yōu)化
1、修改vue.config.js中的配置項(xiàng)，把productionSourceMap設(shè)置為false，不然最終打包過后會(huì)生成一些map文件，如果不關(guān)掉，生成環(huán)境是可以通過map去查看源碼的，并且可以開啟gzip壓縮，使打包過后體積變小。
2、使用cdn的方式外部加載一些資源，比如vue-router、axios等Vue的周邊插件，在webpack.config.js里面，externals里面設(shè)置一些不必要打包的外部引用模塊。然后在入門文件index.html里面通過cdn的方式去引入需要的插件。
3、減少圖片使用，因?yàn)閷?duì)于網(wǎng)頁來說，圖片會(huì)占用很大一部分體積，所以，優(yōu)化圖片的操作可以有效的來加快加載速度?？梢杂靡恍ヽss3的效果來代替圖片效果，或者使用雪碧圖來減少圖片的體積。
4、按需引入，咱們使用的一些第三方庫可以通過按需引入的方式加載。避免引入不需要使用的部分，無端增加項(xiàng)目體積。比如在使用element-ui庫的時(shí)候，可以只引入需要用到的組件。
***
#3.移動(dòng)端的兼容性？
答：1、安卓瀏覽器看背景圖片，有些設(shè)備會(huì)模糊。
用同等比例的圖片在PC機(jī)上很清楚，但是手機(jī)上很模糊，原因是什么呢？
經(jīng)過研究，是devicePixelRatio作怪，因?yàn)槭謾C(jī)分辨率太小，如果按照分辨率來顯示網(wǎng)頁，這樣字會(huì)非常小，所以蘋果當(dāng)初就把iPhone 4的960*640分辨率，在網(wǎng)頁里只顯示了480*320，這樣devicePixelRatio＝2。現(xiàn)在android比較亂，有1.5的，有2的也有3的。
想讓圖片在手機(jī)里顯示更為清晰，必須使用2x的背景圖來代替img標(biāo)簽（一般情況都是用2倍）。例如一個(gè)div的寬高是100*100，背景圖必須得200*200，然后background-size:contain;，這樣顯示出來的圖片就比較清晰了。
代碼可以如下：
```background:url(../images/icon/all.png) no-repeat center center;
-webkit-background-size:50px 50px;
background-size: 50px 50px;display:inline-block; width:100%; height:50px;
或者指定 background-size:contain;都可以，大家試試！
2、圖片加載
下面舉例說明一個(gè)canvas的例子：
js動(dòng)態(tài)加載圖片和li 總共舉例17張圖片！
vartotal=17;
varzWin=$(window);
varrender=function(){
varpadding=2;
varwinWidth=zWin.width();
varpicWidth=Math.floor((winWidth-padding*3)/4);
vartmpl ='';
for(vari=1;i<=totla;i++){
varp=padding;
varimgSrc='img/'+i+'.jpg';
if(i%4==1){
p=0;
}
tmpl +='
';
varimageObj = newImage();
imageObj.index = i;
imageObj.onload = function(){
varcvs =$('#cvs_'+this.index)[0].getContext('2d');
cvs.width = this.width;
cvs.height=this.height;
cvs.drawImage(this,0,0);
}
imageObj.src=imgSrc;
}
}
render();
3、假如手機(jī)網(wǎng)站不用兼容IE瀏覽器，一般我們會(huì)使用zeptojs。
zeptojs內(nèi)置Touch events方法，具體可以看http://zeptojs.com/#Touch events
看了一下zeptio新版的API，已經(jīng)支持IE10以上瀏覽器，對(duì)zeptojs可以選擇使用！
4、防止手機(jī)中網(wǎng)頁放大和縮小。
這點(diǎn)是最基本的，最為手機(jī)網(wǎng)站開發(fā)者來說應(yīng)該都知道的，就是設(shè)置meta中的viewport
還有就是，有些手機(jī)網(wǎng)站我們看到如下聲明：
代碼如下:
設(shè)置了DTD的方式是XHTML的寫法，假如我們頁面運(yùn)用的是html5，可以不用設(shè)置DTD,直接聲明。
使用viewport使頁面禁止縮放。 通常把user-scalable設(shè)置為0來關(guān)閉用戶對(duì)頁面視圖縮放的行為。
但是為了更好的兼容，我們會(huì)使用完整的viewport設(shè)置。
當(dāng)然，user-scalable=0,有的人也寫成user-scalable=no，都可以的。
5、apple-mobile-web-app-capable
apple-mobile-web-app-capable是設(shè)置Web應(yīng)用是否以全屏模式運(yùn)行。
語法：
說明：
如果content設(shè)置為yes，Web應(yīng)用會(huì)以全屏模式運(yùn)行，反之，則不會(huì)。content的默認(rèn)值是no，表示正常顯示。你可以通過只讀屬性window.navigator.standalone來確定網(wǎng)頁是否以全屏模式顯示。
6、format-detection
format-detection 啟動(dòng)或禁用自動(dòng)識(shí)別頁面中的電話號(hào)碼。
語法：
說明：
默認(rèn)情況下，設(shè)備會(huì)自動(dòng)識(shí)別任何可能是電話號(hào)碼的字符串。設(shè)置telephone=no可以禁用這項(xiàng)功能。
7、html5調(diào)用安卓或者ios的撥號(hào)功能
html5提供了自動(dòng)調(diào)用撥號(hào)的標(biāo)簽，只要在a標(biāo)簽的href中添加tel:就可以了。
如下：
400-810-6999 轉(zhuǎn) 1034
撥打手機(jī)直接如下
點(diǎn)擊撥打15677776767
8、html5GPS定位功能
具體請(qǐng)看：
http://www.jb51.net/post/html5_GPS_getCurrentPosition```
9、上下拉動(dòng)滾動(dòng)條時(shí)卡頓、慢
body {-webkit-overflow-scrolling:
touch;overflow-scrolling: touch;}
Android3+和iOS5+支持CSS3的新屬性為overflow-scrolling```
10、禁止復(fù)制、選中文本
Element {-webkit-user-select:none;
-moz-user-select:none;
-khtml-user-select:none;
user-select:none;
}
解決移動(dòng)設(shè)備可選中頁面文本(視產(chǎn)品需要而定)
11、長時(shí)間按住頁面出現(xiàn)閃退
element {
-webkit-touch-callout:none;
}
12、iphone及ipad下輸入框默認(rèn)內(nèi)陰影
Element{
-webkit-appearance:none;
}
13、ios和android下觸摸元素時(shí)出現(xiàn)半透明灰色遮罩
Element {
-webkit-tap-highlight-color:rgba(255,255,255,0)
}
設(shè)置alpha值為0就可以去除半透明灰色遮罩，備注：transparent的屬性值在android下無效。
后面一篇文章有詳細(xì)介紹，地址：
http://www.jb51.net/post/phone_web_ysk```
14、active兼容處理 即 偽類 :active 失效
方法一：body添加ontouchstart
方法二：js給 document 綁定 touchstart 或 touchend 事件
a {
color:#000;
}
a:active {
color:#fff;
}
bar
document.addEventListener('touchstart',function(){},false);
15、動(dòng)畫定義3D啟用硬件加速
Element {
-webkit-transform:translate3d(0,0,0)
transform: translate3d(0,0,0);
}
注意：3D變形會(huì)消耗更多的內(nèi)存與功耗
16、Retina屏的1px邊框
Element{
border-width:thin;
}
17、webkit mask 兼容處理
某些低端手機(jī)不支持css3 mask，可以選擇性的降級(jí)處理。
比如可以使用js判斷來引用不同class：
if('WebkitMask'indocument.documentElement.style){
alert('支持mask');
}else{
alert('不支持mask');
}
18、旋轉(zhuǎn)屏幕時(shí)，字體大小調(diào)整的問題
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6{
-webkit-text-size-adjust:100%;
}
19、transition閃屏
/設(shè)置內(nèi)嵌的元素在3D 空間如何呈現(xiàn)：保留3D /
-webkit-transform-style: preserve-3d;
/ 設(shè)置進(jìn)行轉(zhuǎn)換的元素的背面在面對(duì)用戶時(shí)是否可見：隱藏 /
-webkit-backface-visibility:hidden;
20、圓角bug
某些Android手機(jī)圓角失效
background-clip: padding-box;
21、頂部狀態(tài)欄背景色
說明：
除非你先使用apple-mobile-web-app-capable指定全屏模式，否則這個(gè)meta標(biāo)簽不會(huì)起任何作用。
如果content設(shè)置為default，則狀態(tài)欄正常顯示。如果設(shè)置為blank，則狀態(tài)欄會(huì)有一個(gè)黑色的背景。如果設(shè)置為blank-translucent，則狀態(tài)欄顯示為黑色半透明。如果設(shè)置為default或blank，則頁面顯示在狀態(tài)欄的下方，即狀態(tài)欄占據(jù)上方部分，頁面占據(jù)下方部分，二者沒有遮擋對(duì)方或被遮擋。如果設(shè)置為blank-translucent，則頁面會(huì)充滿屏幕，其中頁面頂部會(huì)被狀態(tài)欄遮蓋住（會(huì)覆蓋頁面20px高度，而iphone4和itouch4的Retina屏幕為40px）。默認(rèn)值是default。
22、設(shè)置緩存
手機(jī)頁面通常在第一次加載后會(huì)進(jìn)行緩存，然后每次刷新會(huì)使用緩存而不是去重新向服務(wù)器發(fā)送請(qǐng)求。如果不希望使用緩存可以設(shè)置no-cache。
23、桌面圖標(biāo)
iOS下針對(duì)不同設(shè)備定義不同的桌面圖標(biāo)。如果不定義則以當(dāng)前屏幕截圖作為圖標(biāo)。
上面的寫法可能大家會(huì)覺得會(huì)有默認(rèn)光澤，下面這種設(shè)置方法可以去掉光澤效果，還原設(shè)計(jì)圖的效果！
圖片尺寸可以設(shè)定為5757（px）或者Retina可以定為114114（px），ipad尺寸為72*72（px)
24、啟動(dòng)畫面
iOS下頁面啟動(dòng)加載時(shí)顯示的畫面圖片，避免加載時(shí)的白屏。
可以通過madia來指定不同的大?。?br>
25、瀏覽器私有及其它meta
以下屬性在項(xiàng)目中沒有應(yīng)用過，可以寫一個(gè)demo測試以下！
QQ瀏覽器私有
全屏模式
強(qiáng)制豎屏
強(qiáng)制橫屏
應(yīng)用模式
UC瀏覽器私有
全屏模式
強(qiáng)制豎屏
強(qiáng)制橫屏
應(yīng)用模式
其它
針對(duì)手持設(shè)備優(yōu)化，主要是針對(duì)一些老的不識(shí)別viewport的瀏覽器，比如黑莓
微軟的老式瀏覽器
windows phone 點(diǎn)擊無高光
26、 IOS中input鍵盤事件keyup、keydown、keypress支持不是很好
問題是這樣的，用input search做模糊搜索的時(shí)候，在鍵盤里面輸入關(guān)鍵詞，會(huì)通過ajax后臺(tái)查詢，然后返回?cái)?shù)據(jù)，然后再對(duì)返回的數(shù)據(jù)進(jìn)行關(guān)鍵詞標(biāo)紅。用input監(jiān)聽鍵盤keyup事件，在安卓手機(jī)瀏覽器中是可以的，但是在ios手機(jī)瀏覽器中變紅很慢，用輸入法輸入之后，并未立刻相應(yīng)keyup事件，只有在通過刪除之后才能相應(yīng)！
解決辦法：
可以用html5的oninput事件去代替keyup
document.getElementById('testInput').addEventListener('input',function(e){
varvalue = e.target.value;
});
