零碎知識點總結

1、CSS hack

目的： 就是使你的CSS代碼兼容不一樣的瀏覽器，反過來也能夠利用CSS hack 爲不一樣版本瀏覽器定製
編寫不一樣的CSS效果。

概念：因爲不一樣廠商的瀏覽器或瀏覽器的不一樣版本對CSS的支持、解析不同，致使在不一樣瀏覽器的環境中呈現出
不一致的頁面展示效果。這時，未得到統一的頁面效果，就須要針對不一樣瀏覽器或不一樣版本寫特定的CSS樣式，
咱們把這個過程叫作CSS hack。

一、 CSS hack方式以：條件註釋法

這種方式是IE瀏覽器專有的Hack方式
只有在IE下生效

<!--[if IE]>

這段文字只在IE瀏覽器顯示
<![endif]-->

<!--[if IE 6]>
這段文字只在IE6瀏覽器顯示
<![endif]-->

<!--[if gte IE 6]>
這段文字只在IE6以上(包括)版本IE瀏覽器顯示
<![endif]-->

<!--[if ! IE 8]>
這段文字在非IE8瀏覽器顯示
<![endif]-->

<!--[if !IE]>
這段文字只在非IE瀏覽器顯示
<![endif]-->

二、CSS hack方式二：類內屬性前綴法
屬性前綴法是在CSS樣式屬性前加上一些特定瀏覽器才能識別的hack前綴，以達到
預期的頁面展現效果。
說明：在標準模式中
-″減號是IE6專有的hack
「\9″ IE6/IE7/IE8/IE9/IE10都生效
「\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
「\9\0″ 只對IE9/IE10生效，是IE9/10的hack
* IE六、IE7
+ IE六、IE7

*+background-color:pink;只有IE6和IE7認識。

三、 選擇器前綴法

*html *前綴只對IE6生效
*+html *+前綴只對IE7生效
@media screen\9{...}只對IE6/7生效
@media \0screen {body { background: red; }}只對IE8有效

2、bootstrap實現響應式佈局的原理
響應式佈局：就是一個網站可以兼容多個終端，而不是爲每一個終端作一個特定的版本。
這個概念爲解決移動互聯網瀏覽而誕生。

利用柵格系統實現響應式佈局：

首選，柵格系統用於經過一系列的行（row）與列（column）的組合來建立
佈局，「行」必須包含在.container（固定寬度）或 .container-fluid（寬度爲100%）中

在Bootstrap3中主要把屏幕分紅了三種（這裏以行（row）來講明）：
.col-xs-* 超小屏幕，手機（寬度<768px）
.col-sm-* 小屏幕，平板（寬度>=768px）
.col-md-* 中等屏幕，桌面顯示器（寬度>=992px）

無論在哪一種屏幕上，柵格系統都會自動的分12列

這裏實現了依據不一樣的寬度進行改變：
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {/*當寬度大於768px時觸發*/
.container {
width: 750px;
}
}
@media (min-width: 992px) {/*當寬度大於992px時觸發*/
.container {
width: 970px;
}
}
@media (min-width: 1200px) {/*當寬度大於1200px時觸發*/
.container {
width: 1170px;
}
}
.container-fluid { /*這個是寬度默認*/
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}

3、面試題目及答案：

一、瀏覽器的存儲技術有哪些？

答案：cookie localStorage sessionStorage UserData GlobalStorage
Google Gear Flash ShareObject

(1)Cookie
1)cookie是什麼：cookie 是指存儲在用戶本地終端上的數據，cookie數據會自動
在web瀏覽器和web服務器之間傳輸，也就是說HTTP請求發送時，會把
保存在該請求域名下的全部cookie值發送給web服務器，所以服務器監本是
能夠讀、寫存儲在客戶端的cookie的操做。
2) cookie 的有效期
cookie默認狀況下的有效期是很短暫的，一旦用戶關閉瀏覽器，cookie保存的
數據就會丟失。
延長有效期：1.設置http頭信息中的cache-control屬性的max-age值
2.修改HTTp頭信息中的expires屬性值來延長有效期
3)　cookie 的做用域：它是經過文檔源和文檔路徑來肯定的。該做用域經過
cookie的path和domain屬性也是能夠配置的。

4) cookie的數目和大小的限制:每一個web服務器保存的cookie數不能超過
50個，每一個cookie保存的數據不能超過4KB。若是超過4KB，服務器會處理不了。

cookie的有點：能用於和服務器通訊；當cookie快要過時時，能夠從新設置而不是刪除。
cookie的缺點：它會隨着http頭信息一塊兒發送，增長了網絡流量（文檔傳輸的負載）
它只能存儲少許的數據；它只能存儲字符串；有潛在的安全問題。

（2） LocalStorage（sessionStorage）

主要是用來做爲本地存儲來使用的，解決了cookie存儲空間不足的問題，localStorage
中通常瀏覽器支持的是5M大小，不一樣瀏覽器中會有所不一樣。

localStorage優勢：

1）localStorage 拓展了cookie的4K 限制
2）localStorage能夠將第一次請求的數據直接存儲到本地，這個至關於一個
5M大小的針對於前端頁面的數據庫，相比於cookie能夠節約帶寬，可是高版本
的瀏覽器才支持
3）localstorage 方法存儲的數據沒有時間限制。

localStorage的缺點：

1）瀏覽器的大小不一樣意，而且在IE8以上的版本才支持這個屬性
2）目前全部瀏覽器中都會把localStorage 的值類型限定爲
string類型，這個在對咱們平常比較常見JSON對象類型須要一些轉換。
3）在瀏覽器的隱私模式下面不可讀取
4）localStorage 本質上是對字符串的讀取，若是存儲內容多的話會消耗內存空間，
會致使頁面變卡
5）localStorage不能被爬蟲抓取到
sessionStorage與localStorage的惟一一點區別就是localStorage屬於永久性存儲，而sessionStorage屬於當會話結束的時候，sessionStorage中的鍵值對就會被清空。
（3）、UserData、GlobalStorage、Google Gear

這三種的使用都有必定的侷限性，例如userData是IE瀏覽器專屬，它的容量能夠達到640K，這種方案可靠，不須要安裝額外插件，只不過它僅在IE下有效~

globalStorage適用於Firefox 2+的瀏覽器，相似於IE的userData~

google gear是谷歌開發出的一種本地存儲技術，須要安裝Gear組件。

（4）Flash ShareObject
這種方式能能解決上面提到的cookie存儲的兩個弊端，並且可以跨瀏覽器，應該說是目前最好的本地存儲方案。不過，須要在頁面中插入一個Flash，當瀏覽器沒有安裝Flash控件時就不能用了。所幸的是，沒有安裝Flash的用戶極少。

強調一下：cookie,localStorage和sessionStorage的異同：

共同點：都是保存在瀏覽器端，且同源的。

區別：

1）cookie數據始終在同源的http請求中攜帶（即便不須要），即cookie在瀏覽器和服務器間來回傳遞；而sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存；

2）cookie數據有路徑（path）的概念，能夠限制cookie只屬於某個路徑下；

3）存儲大小限制也不一樣，cookie數據不能超過4k，同時由於每次http請求都會攜帶cookie，因此cookie只適合保存很小的數據，如會話標識；sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大；

4）數據有效期不一樣，sessionStorage：僅在當前瀏覽器窗口關閉前有效，天然也就不可能持久保持；localStorage：始終有效，窗口或瀏覽器關閉也一直保存，所以用做持久數據；cookie只在設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉；

5）做用域不一樣，sessionStorage不在不一樣的瀏覽器窗口中共享，即便是同一個頁面；localStorage 在全部同源窗口中都是共享的；cookie也是在全部同源窗口中都是共享的；

二、arguments 對象

arguments 對象是全部（非箭頭）函數中均可用的局部變量，此對象
包含傳遞給函數的每一個參數的條目。
arguments對象不是一個 Array 。它相似於Array，但除了length屬性和索引元素以外沒有任何Array屬性。

(function(){return typeof arguments})(); //object

三、如何判斷js中的數據類型：typeof、instanceof、 constructor、 prototype方法比較
如何判斷js中的類型呢，先舉幾個例子：
var a = "iamstring.";
var b = 222;
var c= [1,2,3];
var d = new Date();
var e = function(){alert(111);};
var f = function(){this.name="22";};

最多見的判斷方法：typeof
alert(typeof a) ------------> string
alert(typeof b) ------------> number
alert(typeof c) ------------> object
alert(typeof d) ------------> object
alert(typeof e) ------------> function
alert(typeof f) ------------> function
其中typeof返回的類型都是字符串形式，需注意，例如：
alert(typeof a == "string") -------------> true
alert(typeof a == String) ---------------> false
另外typeof 能夠判斷function的類型；在判斷除Object類型的對象時比較方便。

判斷已知對象類型的方法： instanceof
alert(c instanceof Array) ---------------> true
alert(d instanceof Date) ------------> true
alert(f instanceof Function) ------------> true
alert(f instanceof function) ------------> false
注意：instanceof 後面必定要是對象類型，而且大小寫不能錯，該方法適合一些條件選擇或分支。

根據對象的constructor判斷： constructor
alert(c.constructor === Array) ----------> true
alert(d.constructor === Date) -----------> true
alert(e.constructor === Function) -------> true
注意： constructor 在類繼承時會出錯
eg,
function A(){};
function B(){};
A.prototype = new B(); //A繼承自B
var aObj = new A();
alert(aobj.constructor === B) -----------> true;
alert(aobj.constructor === A) -----------> false;
而instanceof方法不會出現該問題，對象直接繼承和間接繼承的都會報true：
alert(aobj instanceof B) ----------------> true;
alert(aobj instanceof B) ----------------> true;
言歸正傳，解決construtor的問題一般是讓對象的constructor手動指向本身：
aobj.constructor = A; //將本身的類賦值給對象的constructor屬性
alert(aobj.constructor === A) -----------> true;
alert(aobj.constructor === B) -----------> false; //基類不會報true了;

通用但很繁瑣的方法： prototype
alert(Object.prototype.toString.call(a) === ‘[object String]’) -------> true;
alert(Object.prototype.toString.call(b) === ‘[object Number]’) -------> true;
alert(Object.prototype.toString.call(c) === ‘[object Array]’) -------> true;
alert(Object.prototype.toString.call(d) === ‘[object Date]’) -------> true;
alert(Object.prototype.toString.call(e) === ‘[object Function]’) -------> true;
alert(Object.prototype.toString.call(f) === ‘[object Function]’) -------> true;
大小寫不能寫錯，比較麻煩，但勝在通用。
一般狀況下用typeof 判斷就能夠了，遇到預知Object類型的狀況能夠選用instanceof或constructor方法

function fn(){
return fn
}
new fn() instanceof fn //false

function Foo(){}
new Foo() instanceof Foo //true

// 判斷 foo 是不是 Foo 類的實例 , 而且是不是其父類型的實例
function Aoo(){}
function Foo(){}
Foo.prototype = new Aoo();//JavaScript 原型繼承

var foo = new Foo();
console.log(foo instanceof Foo)//true
console.log(foo instanceof Aoo)//true

四、下面哪一個屬性不會讓div 脫離文檔流（c）
A. position:absolute B.position:fixed C.position:relative
D.float:left

五、flexbox 佈局

（1）基礎

1）建立一個flex容器

要建立一個 flex 容器，您只須要將一個 display: flex 屬性添加到一個元素上。默認狀況下，全部的直接子元素都被認爲是 flex 項，並從左到右依次排列在一行中。若是 flex 項的寬度總和大於容器，那麼 flex 項將按比例縮小，直到它們適應 flex 容器寬度。
2）將flex項排成一列

能夠經過(在 flex 容器中)設置 flex-direction: column 使 flex 項垂直佈局。也能夠經過設置 flex-direction: column-reverse 或 flex-direction: row-reverse 來使 flex 項以相反的順序排列。
（2）新手

1）靠右對齊的flex項
每一個 Flexbox 模型都有 flex 方向（主軸）。justify-content 用於指定 flex 項在 flex 方向（direction）上的對齊位置。在上面的例子中，justify-content:flex-end 表示 flex 項在水平方向上靠 flex 容器的末端對齊。這就是爲何他們被放在了右邊
.flex-container {
display: flex;
justify-content: flex-end;
}
2）居中對齊flex項
.flex-container {
display: flex;
justify-content: center;
}

六、正則表達式/^\d*\*[^\d]*[\w]{6}$/,下面的字符串中哪一個能正確匹配？（A）
A. ***abcABCD_89 B.abc*abcABCDEF C.123*abcABCD-89 D. 123*ABCabcd-89

七、(function(){var a=b=5})();console.log(b)console.log(a);

上述代碼輸出結果是（程序拋錯）

(function(){
var a=b=5;
console.log(b);
console.log(a)
})()
結果爲//5 5

js中連等賦值的執行順序是 從右向左

八、http 狀態碼有哪些，分別表明什麼意思？

1**(信息類)：表示接收到請求而且繼續處理

100——客戶必須繼續發出請求
101——客戶要求服務器根據請求轉換HTTp協議版本
2** (響應成功)：表示動做被成功接收、理解和接受

200——代表該請求被成功地完成，所請求的資源發送回客戶端
201——提示知道新文件的URL
202——接受和處理、但處理未完成
203——返回信息不肯定或不完整
204——請求收到，但返回信息爲空
205——服務器完成了請求，用戶代理必須復位當前已經瀏覽過的文件
206——服務器已經完成部分用戶的GET請求

3**(重定向類)：爲了完成指定的動做，必須接受進一步處理
300——請求的資源可在多處獲得
301——本網頁被永久性轉移到另外一個URL
302——請求的網頁被轉移到一個新的地址，但客戶訪問仍繼續經過原始URL地址，重定向，新的URL會在response中的Location中返回，瀏覽器將會使用新的URL發出新的Request。
303——建議客戶訪問其餘URL或訪問方式
304——自從上次請求後，請求的網頁未修改過，服務器返回此響應時，不會返回網頁內容，表明上次的文檔已經被緩存了，還能夠繼續使用
305——請求的資源必須從服務器指定的地址獲得
306——前一版本HTTP中使用的代碼，現行版本中再也不使用
307——申明請求的資源臨時性刪除

4**(客戶端錯誤類)：請求包含錯誤語法或不能正確執行
400——客戶端請求有語法錯誤，不能被服務器所理解
401——請求未經受權，這個狀態代碼必須和WWW-Authenticate報頭域一塊兒使用
HTTP 401.1 - 未受權：登陸失敗
　　HTTP 401.2 - 未受權：服務器配置問題致使登陸失敗
　　HTTP 401.3 - ACL 禁止訪問資源
　　HTTP 401.4 - 未受權：受權被篩選器拒絕
HTTP 401.5 - 未受權：ISAPI 或 CGI 受權失敗
402——保留有效ChargeTo頭響應
403——禁止訪問，服務器收到請求，可是拒絕提供服務
HTTP 403.1 禁止訪問：禁止可執行訪問
　　HTTP 403.2 - 禁止訪問：禁止讀訪問
　　HTTP 403.3 - 禁止訪問：禁止寫訪問
　　HTTP 403.4 - 禁止訪問：要求 SSL
　　HTTP 403.5 - 禁止訪問：要求 SSL 128
　　HTTP 403.6 - 禁止訪問：IP 地址被拒絕
　　HTTP 403.7 - 禁止訪問：要求客戶證書
　　HTTP 403.8 - 禁止訪問：禁止站點訪問
　　HTTP 403.9 - 禁止訪問：鏈接的用戶過多
　　HTTP 403.10 - 禁止訪問：配置無效
　　HTTP 403.11 - 禁止訪問：密碼更改
　　HTTP 403.12 - 禁止訪問：映射器拒絕訪問
　　HTTP 403.13 - 禁止訪問：客戶證書已被吊銷
　　HTTP 403.15 - 禁止訪問：客戶訪問許可過多
　　HTTP 403.16 - 禁止訪問：客戶證書不可信或者無效
HTTP 403.17 - 禁止訪問：客戶證書已經到期或者還沒有生效
404——一個404錯誤代表可鏈接服務器，但服務器沒法取得所請求的網頁，請求資源不存在。eg：輸入了錯誤的URL
405——用戶在Request-Line字段定義的方法不容許
406——根據用戶發送的Accept拖，請求資源不可訪問
407——相似401，用戶必須首先在代理服務器上獲得受權
408——客戶端沒有在用戶指定的餓時間內完成請求
409——對當前資源狀態，請求不能完成
410——服務器上再也不有此資源且無進一步的參考地址
411——服務器拒絕用戶定義的Content-Length屬性請求
412——一個或多個請求頭字段在當前請求中錯誤
413——請求的資源大於服務器容許的大小
414——請求的資源URL長於服務器容許的長度
415——請求資源不支持請求項目格式
416——請求中包含Range請求頭字段，在當前請求資源範圍內沒有range指示值，請求也不包含If-Range請求頭字段
417——服務器不知足請求Expect頭字段指定的指望值，若是是代理服務器，多是下一級服務器不能知足請求長
5**(服務端錯誤類)：服務器不能正確執行一個正確的請求
HTTP 500 - 服務器遇到錯誤，沒法完成請求
　　HTTP 500.100 - 內部服務器錯誤 - ASP 錯誤
　　HTTP 500-11 服務器關閉
　　HTTP 500-12 應用程序從新啓動
　　HTTP 500-13 - 服務器太忙
　　HTTP 500-14 - 應用程序無效
　　HTTP 500-15 - 不容許請求 global.asa
　　Error 501 - 未實現
HTTP 502 - 網關錯誤
HTTP 503：因爲超載或停機維護，服務器目前沒法使用，一段時間後可能恢復正常

十、PNG、GIF、JPG 的區別即及如何選？

Gif：色彩效果最低，可是體積小，有着幾號的壓縮效果，支持動畫，而且支持透明
的效果（不支持半透明哦），若是圖片只是很單調的色彩，沒有漸變色，選Gif最好。

JPG：是數碼相機最經常使用的格式，色彩還原好，能夠在招聘不明顯失真狀況下，大福下降體積。
缺點是不支持透明

PNG：是最適合網絡的圖片！PNG的優勢是，清晰，無損壓縮，壓縮比率很高，
可漸變透明，具有幾乎全部GIF的特色，缺點是沒有JPG的顏色豐富。一樣的
圖片體積也比JPG略大，8位的PNG徹底能夠替代掉GIF。

十一、如何判斷一個對象是否屬於某個類

例子：
class Animal {
constructor(){
this.type = 'animal'
}
says(say){

setTimeout(()=>{

console.log(this.type + ' says ' + say)
}, 1000)
}
}
var animal = new Animal();
判斷animal 這個對象是否屬於Animal 的方法：
animal instanceof Animal
animal.constructor === Animal

十二、請儘量多的列舉瀏覽器兼容性問題

問題一：不一樣瀏覽器，標籤默認的外間距和內間距不一樣
問題症狀：隨便寫幾個標籤，不加樣式控制的狀況下，各自的margin 和padding差別較大。
碰到頻率:100%
解決方案：CSS裏 *{margin:0;padding:0;}
備註：這個是最多見的也是最易解決的一個瀏覽器兼容性問題，幾乎全部的CSS文件開頭都會用通配符*來設置各個標籤的內外補丁是0。

問題二：行內屬性標籤，設置display:block後採用float佈局，又有橫行的margin的狀況，IE6間距bug
問題症狀：IE6裏的間距比超過設置的間距
碰到概率：20%
解決方案：在display:block;後面加入display:inline;display:table;
備註：行內屬性標籤，爲了設置寬高，咱們須要設置display:block;(除了input標籤比較特殊)。在用float佈局並有橫向的margin後，在IE6下，他就具備了塊屬性float後的橫向margin的bug。不過由於它自己就是行內屬性標籤，因此咱們再加上display:inline的話，它的高寬就不可設了。這時候咱們還須要在display:inline後面加入display:talbe。

問題三：設置較小高度標籤（通常小於10px），在IE6，IE7中高度超出本身設置高度

問題症狀：IE六、7裏這個標籤的高度不受控制，超出本身設置的高度
碰到頻率：60%
解決方案：給超出高度的標籤設置overflow:hidden;或者設置行高line-height 小於你設置的高度。
備註：這種狀況通常出如今咱們設置小圓角背景的標籤裏。出現這個問題的緣由是IE8以前的瀏覽器都會給標籤一個最小默認的行高的高度。即便你的標籤是空的，這個標籤的高度仍是會達到默認的行高。

問題四：圖片默認有間距
問題症狀：幾個img標籤放在一塊兒的時候，有些瀏覽器會有默認的間距，加了問題一中提到的通配符也不起做用。
碰到概率：20%
解決方案：使用float屬性爲img佈局
備註：由於img標籤是行內屬性標籤，因此只要不超出容器寬度，img標籤都會排在一行裏，可是部分瀏覽器的img標籤之間會有個間距。去掉這個間距使用float是正道。

1三、請用css實現一個100x100的div橫向和縱向的居中

.div{
width:100px;
height: 100px;
border:4px solid red;
position:absolute;
text-align: center;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}

1四、有一個數組，var a= ['1','2','3'...];a的長度是100，內容填充隨機整數的字符串，請
先構造此數組a，而後將其內容去重
const a = new Set();
function random(){
var num = Math.floor(Math.random()*100+1);
return ''+num;
}

for(var i=0;i<100;i++){
a.add(random());
}

console.log(a)

1五、編寫一個函數，將列表子元素順序反轉

<ul id='list'>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
var ul = $('#list');
var lis = $('li');
console.log(lis);
var arr=[];
for(var i =0;i<lis.length;i++){
arr.push(lis[i].innerText);
}
console.log(arr);
arr = arr.reverse();
console.log(arr);
ul.empty();
for(var i=0;i<arr.length;i++){
ul.append(`<li>${arr[i]}</li>`)
}

1六、input的屬性爲placeholder時，怎樣改變placeholder裏字體的顏色？
<style>
input::-webkit-input-placeholder{
color:red;
}
input::-moz-placeholder{ /* Mozilla Firefox 19+ */
color:red;
}
input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */
color:red;
}
input:-ms-input-placeholder{ /* Internet Explorer 10-11 */
color:red;
}
</style>

1七、寫出下面代碼的輸出結果

class Junjia{
static fn(){
console.log(this.age+'28');
}
constructor(age){
this.age = age;
this.fn = function(){
console.log(this.age);
}
}
}
let test = new Junjia('28');
test.fn() // 28
Junjia.fn();// undefined28

1八、輸出一下代碼的運行結果

var bar = 0;
var obj = {
bar:1,
foo:function(){
console.log(this.bar);
}
}
var obj2 = {
Bar:2,
foo:obj.foo
}
var obj3 = {
bar:3,
foo:function(){
return obj.foo
}
}
var tempFoo = obj2.foo;
obj.foo(); //1
obj2.foo(); //undefined
obj3.foo() //function(){console.log(this.bar)}
tempFoo(); // 0

 

1九、圖片懶加載原理

  1) 什麼是圖片懶加載

   就是當訪問一個頁面的時候，先把img元素或其餘元素的背景圖片路徑替換成一張大小爲1*1px圖片的路徑（這樣就只需請求一次），只有

當圖片出如今瀏覽器的但是區域內時，才設置圖片真正的路徑，讓圖片顯示出來。這就是圖片懶加載

 2）爲何使用圖片懶加載

     好比一個頁面中有不少圖片，如淘寶、京東首頁等，若是一上來就發送那麼多請求，頁面加載就會很漫長，更要命的是一上來就發送百八十個請求，服務可能就吃不消了（由於不是一兩我的在訪問這個頁面），所以圖片懶加載不只能夠減輕服務器壓力，並且可讓加載好的頁面更快的呈如今用戶面前（用戶體驗好）