網(wǎng)上有很多關(guān)于pos機分享png格式,干貨分享— Web前端經(jīng)典面試題及答案的知識，也有很多人為大家解答關(guān)于pos機分享png格式的問(wèn)題，今天pos機之家(www.xjcwpx.cn)為大家整理了關(guān)于這方面的知識，讓我們一起來(lái)看下吧!
本文目錄一覽：
pos機分享png格式
之前的文章中跟大家分享了關(guān)于Java的面試題，今天千鋒重慶小編又來(lái)了給大家分享干貨了，本篇收錄了一些面試前端崗位時(shí)，經(jīng)常會(huì )遇到的經(jīng)典面試題，通過(guò)對本篇知識的整理以及經(jīng)驗的總結，希望能幫到更多的前端面試者。
一、javascript
1、JavaScript中如何檢測一個(gè)變量是一個(gè)String類(lèi)型？請寫(xiě)出函數實(shí)現
方法1、
function isString(obj){
return typeof(obj) === "string"? true: false;
// returntypeof obj === "string"? true: false;
}
方法2、
function isString(obj){return obj.constructor === String? true: false;}
方法3、
function isString(obj){
return Object.prototype.toString.call(obj) === "[object String]"?true:false;
}
如：
var isstring = isString(\'xiaoming\');
console.log(isstring); // true
2、請用js去除字符串空格？
方法一：使用replace正則匹配的方法
去除所有空格： str = str.replace(/\\s*/g,"");
去除兩頭空格： str = str.replace(/^\\s*|\\s*$/g,"");
去除左空格： str = str.replace( /^\\s*/, “”);
去除右空格： str = str.replace(/(\\s*$)/g, "");
str為要去除空格的字符串，實(shí)例如下：
var str = " 23 23 ";
var str2 = str.replace(/\\s*/g,"");
console.log(str2); // 2323
方法二：使用str.trim()方法
str.trim()局限性：無(wú)法去除中間的空格，實(shí)例如下：
var str = " xiao ming ";var str2 = str.trim();console.log(str2); //xiao ming
同理，str.trimLeft()，str.trimRight()分別用于去除字符串左右空格。
方法三：使用jQuery,$.trim(str)方法
$.trim(str)局限性：無(wú)法去除中間的空格，實(shí)例如下：
var str = " xiao ming ";
var str2 = $.trim(str)
console.log(str2); // xiao ming
實(shí)例如下：
function showWindowHref(){var sHref = window.location.href;var args = sHref.split(\'?\');if(args[0] == sHref){return "";}var arr = args[1].split(\'&\');var obj = {};for(var i = 0;i< arr.length;i++){var arg = arr[i].split(\'=\');obj[arg[0]] = arg[1];}return obj;}var href = showWindowHref(); // objconsole.log(href[\'name\']); // xiaoming
3、js 字符串操作函數
concat() – 將兩個(gè)或多個(gè)字符的文本組合起來(lái)，返回一個(gè)新的字符串。
indexOf() – 返回字符串中一個(gè)子串第一處出現的索引。如果沒(méi)有匹配項，返回 -1 。
charAt() – 返回指定位置的字符。
lastIndexOf() – 返回字符串中一個(gè)子串最后一處出現的索引，如果沒(méi)有匹配項，返回 -1 。
match() – 檢查一個(gè)字符串是否匹配一個(gè)正則表達式。
substr() 函數 -- 返回從string的startPos位置，長(cháng)度為length的字符串
substring() – 返回字符串的一個(gè)子串。傳入參數是起始位置和結束位置。
slice() – 提取字符串的一部分，并返回一個(gè)新字符串。
replace() – 用來(lái)查找匹配一個(gè)正則表達式的字符串，然后使用新字符串代替匹配的字符串。
search() – 執行一個(gè)正則表達式匹配查找。如果查找成功，返回字符串中匹配的索引值。否則返回 -1 。
split() – 通過(guò)將字符串劃分成子串，將一個(gè)字符串做成一個(gè)字符串數組。
length – 返回字符串的長(cháng)度，所謂字符串的長(cháng)度是指其包含的字符的個(gè)數。
toLowerCase() – 將整個(gè)字符串轉成小寫(xiě)字母。
toUpperCase() – 將整個(gè)字符串轉成大寫(xiě)字母。
4、怎樣添加、移除、移動(dòng)、復制、創(chuàng )建和查找節點(diǎn)？
1）創(chuàng )建新節點(diǎn)
createDocumentFragment() //創(chuàng )建一個(gè)DOM片段
createElement() //創(chuàng )建一個(gè)具體的元素
createTextNode() //創(chuàng )建一個(gè)文本節點(diǎn)
2）添加、移除、替換、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替換
insertBefore() //插入
3）查找
getElementsByTagName() //通過(guò)標簽名稱(chēng)
getElementsByName() //通過(guò)元素的Name屬性的值
getElementById() //通過(guò)元素Id，唯一性
5、寫(xiě)出3個(gè)使用this的典型應用
1）、在html元素事件屬性中使用，如：
<input type=”button” onclick=”showInfo(this);” value=”點(diǎn)擊一下”/>
2）、構造函數
function Animal(name, color) { this.name = name; this.color = color;}
3）、input點(diǎn)擊，獲取值
<input type="button" id="text" value="點(diǎn)擊一下" />
<script type="text/Javascript">
var btn = document.getElementById("text");
btn.onclick = function() {
alert(this.value); //此處的this是按鈕元素
}
</script>
4）、apply()/call()求數組最值
var numbers = [5, 458 , 120 , -215 ];
var maxInNumbers = Math.max.apply(this, numbers);
console.log(maxInNumbers); // 458
var maxInNumbers = Math.max.call(this,5, 458 , 120 , -215);
console.log(maxInNumbers); // 458
6、比較typeof與instanceof？
相同點(diǎn)：JavaScript 中 typeof 和 instanceof 常用來(lái)判斷一個(gè)變量是否為空，或者是什么類(lèi)型的。
typeof的定義和用法：返回值是一個(gè)字符串，用來(lái)說(shuō)明變量的數據類(lèi)型。
細節：
1）、typeof 一般只能返回如下幾個(gè)結果：
number,boolean,string,function,object,undefined。
2）、typeof 來(lái)獲取一個(gè)變量是否存在，如 if(typeof a!="undefined"){alert("ok")}，而不要去使用 if(a) 因為如果 a 不存在（未聲明）則會(huì )出錯。
3）、對于 Array,Null 等特殊對象使用 typeof 一律返回 object，這正是 typeof 的局限性。
Instanceof定義和用法：instanceof 用于判斷一個(gè)變量是否屬于某個(gè)對象的實(shí)例。
實(shí)例演示：
a instanceof b?alert("true"):alert("false"); //a是b的實(shí)例？真:假var a = new Array(); alert(a instanceof Array); // truealert(a instanceof Object) // true
如上，會(huì )返回 true，同時(shí) alert(a instanceof Object) 也會(huì )返回 true;這是因為 Array 是 object 的子類(lèi)。
function test(){};
var a = new test();
alert(a instanceof test) // true
細節：
(1)、如下，得到的結果為‘N’,這里的 instanceof 測試的 object 是指 js 語(yǔ)法中的 object，不是指 dom 模型對象。
if (window instanceof Object){ alert(\'Y\')} else { alert(\'N\');} // \'N\'
7、如何理解閉包？
1）定義和用法：當一個(gè)函數的返回值是另外一個(gè)函數，而返回的那個(gè)函數如果調用了其父函數內部的其它變量，如果返回的這個(gè)函數在外部被執行，就產(chǎn)生了閉包。
2）表現形式：使函數外部能夠調用函數內部定義的變量。
3）實(shí)例如下：
(1)、根據作用域鏈的規則，底層作用域沒(méi)有聲明的變量，會(huì )向上一級找，找到就返回，沒(méi)找到就一直找，直到window的變量，沒(méi)有就返回undefined。這里明顯count 是函數內部的flag2 的那個(gè)count 。
var count=10; //全局作用域 標記為flag1function add(){var count=0; //函數全局作用域 標記為flag2return function(){count+=1; //函數的內部作用域alert(count);}}var s = add()s();//輸出1s();//輸出2
4）變量的作用域
要理解閉包，首先必須理解Javascript特殊的變量作用域。
變量的作用域分類(lèi)：全局變量和局部變量。
特點(diǎn)：
1、函數內部可以讀取函數外部的全局變量，在函數外部無(wú)法讀取函數內的局部變量。
2、函數內部聲明變量的時(shí)候，一定要使用var命令。如果不用的話(huà)，你實(shí)際上聲明了一個(gè)全局變量！
5）使用閉包的注意點(diǎn)
（1）濫用閉包，會(huì )造成內存泄漏：由于閉包會(huì )使得函數中的變量都被保存在內存中，內存消耗很大，所以不能濫用閉包，否則會(huì )造成網(wǎng)頁(yè)的性能問(wèn)題，在IE中可能導致內存泄露。解決方法是，在退出函數之前，將不使用的局部變量全部刪除。
（2）會(huì )改變父函數內部變量的值。所以，如果你把父函數當作對象（object）使用，把閉包當作它的公用方法（Public Method），把內部變量當作它的私有屬性（private value），這時(shí)一定要小心，不要隨便改變父函數內部變量的值。
8、談?wù)劺厥諜C制方式及內存管理
回收機制方式
1、定義和用法：垃圾回收機制(GC:Garbage Collection),執行環(huán)境負責管理代碼執行過(guò)程中使用的內存。
2、原理：垃圾收集器會(huì )定期（周期性）找出那些不在繼續使用的變量，然后釋放其內存。但是這個(gè)過(guò)程不是實(shí)時(shí)的，因為其開(kāi)銷(xiāo)比較大，所以垃圾回收器會(huì )按照固定的時(shí)間間隔周期性的執行。
3、實(shí)例如下：
function fn1() {
var obj = {name: \'hanzichi\', age: 10};
}
function fn2() {
var obj = {name:\'hanzichi\', age: 10};
return obj;
}
var a = fn1();
var b = fn2();
fn1中定義的obj為局部變量，而當調用結束后，出了fn1的環(huán)境，那么該塊內存會(huì )被js引擎中的垃圾回收器自動(dòng)釋放；在fn2被調用的過(guò)程中，返回的對象被全局變量b所指向，所以該塊內存并不會(huì )被釋放。
4、垃圾回收策略：標記清除(較為常用)和引用計數。
標記清除：
定義和用法：當變量進(jìn)入環(huán)境時(shí)，將變量標記"進(jìn)入環(huán)境"，當變量離開(kāi)環(huán)境時(shí)，標記為："離開(kāi)環(huán)境"。某一個(gè)時(shí)刻，垃圾回收器會(huì )過(guò)濾掉環(huán)境中的變量，以及被環(huán)境變量引用的變量，剩下的就是被視為準備回收的變量。
到目前為止，IE、Firefox、Opera、Chrome、Safari的js實(shí)現使用的都是標記清除的垃圾回收策略或類(lèi)似的策略，只不過(guò)垃圾收集的時(shí)間間隔互不相同。
引用計數：
定義和用法：引用計數是跟蹤記錄每個(gè)值被引用的次數。
基本原理：就是變量的引用次數，被引用一次則加1，當這個(gè)引用計數為0時(shí)，被視為準備回收的對象。
內存管理
1、什么時(shí)候觸發(fā)垃圾回收？
垃圾回收器周期性運行，如果分配的內存非常多，那么回收工作也會(huì )很艱巨，確定垃圾回收時(shí)間間隔就變成了一個(gè)值得思考的問(wèn)題。
IE6的垃圾回收是根據內存分配量運行的，當環(huán)境中的變量，對象，字符串達到一定數量時(shí)觸發(fā)垃圾回收。垃圾回收器一直處于工作狀態(tài)，嚴重影響瀏覽器性能。
IE7中，垃圾回收器會(huì )根據內存分配量與程序占用內存的比例進(jìn)行動(dòng)態(tài)調整，開(kāi)始回收工作。
2、合理的GC方案：(1)、遍歷所有可訪(fǎng)問(wèn)的對象； (2)、回收已不可訪(fǎng)問(wèn)的對象。
3、GC缺陷：(1)、停止響應其他操作。
4、GC優(yōu)化策略：(1)、分代回收（Generation GC）；(2)、增量GC。
9、開(kāi)發(fā)過(guò)程中遇到的內存泄露情況，如何解決的？
1、定義和用法：
內存泄露是指一塊被分配的內存既不能使用，又不能回收，直到瀏覽器進(jìn)程結束。C#和Java等語(yǔ)言采用了自動(dòng)垃圾回收方法管理內存，幾乎不會(huì )發(fā)生內存泄露。我們知道，瀏覽器中也是采用自動(dòng)垃圾回收方法管理內存，但由于瀏覽器垃圾回收方法有bug，會(huì )產(chǎn)生內存泄露。
2、內存泄露的幾種情況：
(1)、當頁(yè)面中元素被移除或替換時(shí)，若元素綁定的事件仍沒(méi)被移除，在IE中不會(huì )作出恰當處理，此時(shí)要先手工移除事件，不然會(huì )存在內存泄露。
實(shí)例如下：
<div id="myDiv"><input type="button" value="Click me" id="myBtn"></div><script type="text/javascript">var btn = document.getElementById("myBtn");btn.onclick = function(){document.getElementById("myDiv").innerHTML = "Processing...";}</script>
解決方法如下：
<div id="myDiv">
<input type="button" value="Click me" id="myBtn">
</div>
<script type="text/javascript">
var btn = document.getElementById("myBtn");
btn.onclick = function(){
btn.onclick = null;
document.getElementById("myDiv").innerHTML = "Processing...";
}
</script>
(2)、由于是函數內定義函數，并且內部函數--事件回調的引用外暴了，形成了閉包。閉包可以維持函數內局部變量，使其得不到釋放。
實(shí)例如下：
function bindEvent(){var obj=document.createElement("XXX");obj.onclick=function(){//Even if it\'s a empty function}}
解決方法如下：
function bindEvent(){
var obj=document.createElement("XXX");
obj.onclick=function(){
//Even if it\'s a empty function
}
obj=null;
}
二、jquery相關(guān)
1、 jQuery 庫中的 $() 是什么？
$() 函數是 jQuery() 函數的別稱(chēng)。$() 函數用于將任何對象包裹成 jQuery 對象，接著(zhù)你就被允許調用定義在 jQuery 對象上的多個(gè)不同方法。你可以將一個(gè)選擇器字符串傳入 $() 函數，它會(huì )返回一個(gè)包含所有匹配的 DOM 元素數組的 jQuery 對象。
2、如何找到所有 HTML select 標簽的選中項？
$(\'[name=selectname] :selected\')
3、$(this) 和 this 關(guān)鍵字在 jQuery 中有何不同？
$(this) 返回一個(gè) jQuery 對象，你可以對它調用多個(gè) jQuery 方法，比如用 text() 獲取文本，用val() 獲取值等等。
而 this 代表當前元素，它是 JavaScript 關(guān)鍵詞中的一個(gè)，表示上下文中的當前 DOM 元素。你不能對它調用 jQuery 方法，直到它被 $() 函數包裹，例如 $(this)。
4、jquery怎么移除標簽onclick屬性？
獲得a標簽的onclick屬性: $("a").attr("onclick")
刪除onclick屬性：$("a").removeAttr("onclick")
設置onclick屬性：$("a").attr("onclick","test();")
5、jquery中addClass、removeClass、toggleClass的使用。
$(selector).addClass(class)：為每個(gè)匹配的元素添加指定的類(lèi)名
$(selector).removeClass(class)：從所有匹配的元素中刪除全部或者指定的類(lèi)，刪除class中某個(gè)值；
$(selector).toggleClass(class)：如果存在（不存在）就刪除（添加）一個(gè)類(lèi)
$(selector).removeAttr(class);刪除class這個(gè)屬性；
6、JQuery有幾種選擇器？
(1)、基本選擇器：#id，class,element,*;
(2)、層次選擇器：parent > child，prev + next ，prev ~ siblings
(3)、基本過(guò)濾器選擇器：:first，:last ，:not ，:even ，:odd ，:eq ，:gt ，:lt
(4)、內容過(guò)濾器選擇器： :contains ，:empty ，:has ，:parent
(5)、可見(jiàn)性過(guò)濾器選擇器：:hidden ，:visible
(6)、屬性過(guò)濾器選擇器：[attribute] ，[attribute=value] ，[attribute!=value] ，[attribute^=value] ，[attribute$=value] ，[attribute*=value]
(7)、子元素過(guò)濾器選擇器：:nth-child ，:first-child ，:last-child ，:only-child
(8)、表單選擇器： :input ，:text ，:password ，:radio ，:checkbox ，:submit 等；
(9)、表單過(guò)濾器選擇器：:enabled ，:disabled ，:checked ，:selected
7、jQuery中的Delegate()函數有什么作用？
delegate()會(huì )在以下兩個(gè)情況下使用到：
1）、如果你有一個(gè)父元素，需要給其下的子元素添加事件，這時(shí)你可以使用delegate()了，代碼如下：
$("ul").delegate("li", "click", function(){ $(this).hide(); });
2）、當元素在當前頁(yè)面中不可用時(shí)，可以使用delegate()
8、$(document).ready()方法和window.onload有什么區別？
(1)、window.onload方法是在網(wǎng)頁(yè)中所有的元素(包括元素的所有關(guān)聯(lián)文件)完全加載到瀏覽器后才執行的。
(2)、$(document).ready() 方法可以在DOM載入就緒時(shí)就對其進(jìn)行操縱，并調用執行綁定的函數。
9、如何用jQuery禁用瀏覽器的前進(jìn)后退按鈕？
實(shí)現代碼如下：
<script type="text/javascript" language="javascript">
$(document).ready(function() {
window.history.forward(1);
//OR window.history.forward(-1);
});
</script>
10、 jquery中$.get()提交和$.post()提交有區別嗎？
相同點(diǎn)：都是異步請求的方式來(lái)獲取服務(wù)端的數據；
異同點(diǎn)：
1、請求方式不同：$.get() 方法使用GET方法來(lái)進(jìn)行異步請求的。$.post() 方法使用POST方法來(lái)進(jìn)行異步請求的。
2、參數傳遞方式不同：get請求會(huì )將參數跟在URL后進(jìn)行傳遞，而POST請求則是作為HTTP消息的實(shí)體內容發(fā)送給Web服務(wù)器的，這種傳遞是對用戶(hù)不可見(jiàn)的。
3、數據傳輸大小不同：get方式傳輸的數據大小不能超過(guò)2KB 而POST要大的多
4、安全問(wèn)題： GET 方式請求的數據會(huì )被瀏覽器緩存起來(lái)，因此有安全問(wèn)題。
11、寫(xiě)出一個(gè)簡(jiǎn)單的$.ajax()的請求方式？
$.ajax({url:\'http://www.baidu.com\',type:\'POST\',data:data,cache:true,headers:{},beforeSend：function(){},success:function(){},error:function(){},complete:function(){}});
三、HTML & CSS
1、什么是盒子模型？
在網(wǎng)頁(yè)中，一個(gè)元素占有空間的大小由幾個(gè)部分構成，其中包括元素的內容（content），元素的內邊距（padding），元素的邊框（border），元素的外邊距（margin）四個(gè)部分。這四個(gè)部分占有的空間中，有的部分可以顯示相應的內容，而有的部分只用來(lái)分隔相鄰的區域或區域。4個(gè)部分一起構成了css中元素的盒模型。
2、行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
行內元素：a、b、span、img、input、strong、select、label、em、button、textarea
塊級元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素：即系沒(méi)有內容的HTML元素，例如：br、meta、hr、link、input、img
3、CSS實(shí)現垂直水平居中
一道經(jīng)典的問(wèn)題，實(shí)現方法有很多種，以下是其中一種實(shí)現：
HTML結構：
<div class="wrapper"><div class="content"></div></div>
CSS：
.wrapper {position: relative;width="360px",height="auto" />
效果如下：
4、簡(jiǎn)述一下src與href的區別
href 是指向網(wǎng)絡(luò )資源所在位置，建立和當前元素（錨點(diǎn)）或當前文檔（鏈接）之間的鏈接，用于超鏈接。
src是指向外部資源的位置，指向的內容將會(huì )嵌入到文檔中當前標簽所在位置；在請求src資源時(shí)會(huì )將其指向的資源下載并應用到文檔內，例如js腳本，img圖片和frame等元素。
當瀏覽器解析到該元素時(shí)，會(huì )暫停其他資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，類(lèi)似于將所指向資源嵌入當前標簽內。這也是為什么將js腳本放在底部而不是頭部。
5、簡(jiǎn)述同步和異步的區別
同步是阻塞模式，異步是非阻塞模式。
同步就是指一個(gè)進(jìn)程在執行某個(gè)請求的時(shí)候，若該請求需要一段時(shí)間才能返回信息，那么這個(gè)進(jìn)程將會(huì )一直等待下去，直到收到返回信息才繼續執行下去；
異步是指進(jìn)程不需要一直等下去，而是繼續執行下面的操作，不管其他進(jìn)程的狀態(tài)。當有消息返回時(shí)系統會(huì )通知進(jìn)程進(jìn)行處理，這樣可以提高執行的效率。
6、px和em的區別
相同點(diǎn)：px和em都是長(cháng)度單位；
異同點(diǎn)：px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，并且em會(huì )繼承父級元素的字體大小。
瀏覽器的默認字體高都是16px。所以未經(jīng)調整的瀏覽器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。
7、瀏覽器的內核分別是什么?
IE: trident內核
Firefox：gecko內核
Safari：webkit內核
Opera：以前是presto內核，Opera現已改用Google Chrome的Blink內核
Chrome：Blink(基于webkit，Google與Opera Software共同開(kāi)發(fā))
8、什么叫優(yōu)雅降級和漸進(jìn)增強？
漸進(jìn)增強 progressive enhancement：
針對低版本瀏覽器進(jìn)行構建頁(yè)面，保證最基本的功能，然后再針對高級瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達到更好的用戶(hù)體驗。
優(yōu)雅降級 graceful degradation：
一開(kāi)始就構建完整的功能，然后再針對低版本瀏覽器進(jìn)行兼容。
區別：
a. 優(yōu)雅降級是從復雜的現狀開(kāi)始，并試圖減少用戶(hù)體驗的供給
b. 漸進(jìn)增強則是從一個(gè)非?；A的，能夠起作用的版本開(kāi)始，并不斷擴充，以適應未來(lái)環(huán)境的需要
c. 降級（功能衰減）意味著(zhù)往回看；而漸進(jìn)增強則意味著(zhù)朝前看，同時(shí)保證其根基處于安全地帶
9、sessionStorage 、localStorage 和 Cookie 之間的區別
共同點(diǎn)：用于瀏覽器端存儲的緩存數據
不同點(diǎn)：
(1)、存儲內容是否發(fā)送到服務(wù)器端：當設置了Cookie后，數據會(huì )發(fā)送到服務(wù)器端，造成一定的寬帶浪費；web storage，會(huì )將數據保存到本地，不會(huì )造成寬帶浪費；
(2)、數據存儲大小不同：Cookie數據不能超過(guò)4K,適用于會(huì )話(huà)標識；web storage數據存儲可以達到5M；
(3)、數據存儲的有效期限不同：cookie只在設置了Cookid過(guò)期時(shí)間之前一直有效，即使關(guān)閉窗口或者瀏覽器；
sessionStorage：僅在關(guān)閉瀏覽器之前有效；localStorage：數據存儲永久有效；
(4)、作用域不同：cookie和localStorage是在同源同窗口中都是共享的；sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個(gè)頁(yè)面。
10、Web Storage與Cookie相比存在的優(yōu)勢：
(1)、存儲空間更大：IE8下每個(gè)獨立的存儲空間為10M，其他瀏覽器實(shí)現略有不同，但都比Cookie要大很多。
(2)、存儲內容不會(huì )發(fā)送到服務(wù)器：當設置了Cookie后，Cookie的內容會(huì )隨著(zhù)請求一并發(fā)送的服務(wù)器，這對于本地存儲的數據是一種帶寬浪費。而Web Storage中的數據則僅僅是存在本地，不會(huì )與服務(wù)器發(fā)生任何交互。
(3)、更多豐富易用的接口：Web Storage提供了一套更為豐富的接口，如setItem,getItem,removeItem,clear等,使得數據操作更為簡(jiǎn)便。cookie需要自己封裝。
(4)、獨立的存儲空間：每個(gè)域（包括子域）有獨立的存儲空間，各個(gè)存儲空間是完全獨立的，因此不會(huì )造成數據混亂。
四、開(kāi)發(fā)及性能優(yōu)化
1、規避javascript多人開(kāi)發(fā)函數重名問(wèn)題
命名空間
封閉空間
js模塊化mvc（數據層、表現層、控制層）
seajs
變量轉換成對象的屬性
對象化
2、請說(shuō)出三種減低頁(yè)面加載時(shí)間的方法
壓縮css、js文件
合并js、css文件，減少http請求
外部js、css文件放在最底下
減少dom操作，盡可能用變量替代不必要的dom操作
3、你所了解到的Web攻擊技術(shù)
（1）XSS（Cross-Site Scripting，跨站腳本攻擊）：指通過(guò)存在安全漏洞的Web網(wǎng)站注冊用戶(hù)的瀏覽器內運行非法的HTML標簽或者JavaScript進(jìn)行的一種攻擊。
（2）SQL注入攻擊
（3）CSRF（Cross-Site Request Forgeries，跨站點(diǎn)請求偽造）：指攻擊者通過(guò)設置好的陷阱，強制對已完成的認證用戶(hù)進(jìn)行非預期的個(gè)人信息或設定信息等某些狀態(tài)更新。
4、web前端開(kāi)發(fā)，如何提高頁(yè)面性能優(yōu)化？
內容方面：
1）減少 HTTP 請求 (Make Fewer HTTP Requests)
2）減少 DOM 元素數量 (Reduce the Number of DOM Elements)
3）使得 Ajax 可緩存 (Make Ajax Cacheable)
針對CSS：
1）把 CSS 放到代碼頁(yè)上端 (Put Stylesheets at the Top)
2）從頁(yè)面中剝離 JavaScript 與 CSS (Make JavaScript and CSS External)
3）精簡(jiǎn) JavaScript 與 CSS (Minify JavaScript and CSS)
4）避免 CSS 表達式 (Avoid CSS Expressions)
針對JavaScript ：
1）腳本放到 HTML 代碼頁(yè)底部 (Put Scripts at the Bottom)
2）從頁(yè)面中剝離 JavaScript 與 CSS (Make JavaScript and CSS External)
3）精簡(jiǎn) JavaScript 與 CSS (Minify JavaScript and CSS)
4）移除重復腳本 (Remove Duplicate Scripts)
面向圖片(Image)：
1）優(yōu)化圖片
2）不要在 HTML 中使用縮放圖片
3）使用恰當的圖片格式
4）使用 CSS Sprites 技巧對圖片優(yōu)化
5、前端開(kāi)發(fā)中，如何優(yōu)化圖像？圖像格式的區別？
優(yōu)化圖像：
1）不用圖片，盡量用css3代替。 比如說(shuō)要實(shí)現修飾效果，如半透明、邊框、圓角、陰影、漸變等，在當前主流瀏覽器中都可以用CSS達成。
2）使用矢量圖SVG替代位圖。對于絕大多數圖案、圖標等，矢量圖更小，且可縮放而無(wú)需生成多套圖?，F在主流瀏覽器都支持SVG了，所以可放心使用！
3）使用恰當的圖片格式。我們常見(jiàn)的圖片格式有JPEG、GIF、PNG。
基本上，內容圖片多為照片之類(lèi)的，適用于JPEG。
而修飾圖片通常更適合用無(wú)損壓縮的PNG。
GIF基本上除了GIF動(dòng)畫(huà)外不要使用。且動(dòng)畫(huà)的話(huà)，也更建議用video元素和視頻格式，或用SVG動(dòng)畫(huà)取代。
4）按照HTTP協(xié)議設置合理的緩存。
5）使用字體圖標webfont、CSS Sprites等。
6）用CSS或JavaScript實(shí)現預加載。
7）WebP圖片格式能給前端帶來(lái)的優(yōu)化。WebP支持無(wú)損、有損壓縮，動(dòng)態(tài)、靜態(tài)圖片，壓縮比率優(yōu)于GIF、JPEG、JPEG2000、PG等格式，非常適合用于網(wǎng)絡(luò )等圖片傳輸。
圖像格式的區別：
矢量圖：圖標字體，如 font-awesome；svg
位圖：gif,jpg(jpeg),png
區別：
1）gif：是一種無(wú)損，8位圖片格式。具有支持動(dòng)畫(huà)，索引透明，壓縮等特性。適用于做色彩簡(jiǎn)單(色調少)的圖片，如logo,各種小圖標icons等。
2）JPEG格式：是一種大小與質(zhì)量相平衡的壓縮圖片格式。適用于允許輕微失真的色彩豐富的照片，不適合做色彩簡(jiǎn)單(色調少)的圖片，如logo、各種小圖標icons等。
3）png：PNG可以細分為三種格式:PNG8，PNG24，PNG32。后面的數字代表這種PNG格式最多可以索引和存儲的顏色值。
關(guān)于透明：PNG8支持索引透明和alpha透明；PNG24不支持透明；而PNG32在24位的PNG基礎上增加了8位（256階）的alpha通道透明。
優(yōu)缺點(diǎn)：
1）能在保證最不失真的情況下盡可能壓縮圖像文件的大小。
2）對于需要高保真的較復雜的圖像，PNG雖然能無(wú)損壓縮，但圖片文件較大，不適合應用在Web頁(yè)面上。
6、瀏覽器是如何渲染頁(yè)面的？
渲染的流程如下：
1）解析HTML文件，創(chuàng )建DOM樹(shù)；
自上而下，遇到任何樣式（link、style）與腳本（script）都會(huì )阻塞（外部樣式不阻塞后續外部腳本的加載）。
2）解析CSS。優(yōu)先級：瀏覽器默認設置<用戶(hù)設置<外部樣式<內聯(lián)樣式<HTML中的style樣式；
3）將CSS與DOM合并，構建渲染樹(shù)（Render Tree）；
4）布局和繪制，重繪（repaint）和重排（reflow）。
想要了解更多的面試題，可以關(guān)注千鋒重慶官網(wǎng)，web前端開(kāi)發(fā)學(xué)習視頻教程，了解更多的面試題解析。
以上就是關(guān)于pos機分享png格式,干貨分享— Web前端經(jīng)典面試題及答案的知識，后面我們會(huì )繼續為大家整理關(guān)于pos機分享png格式的知識，希望能夠幫助到大家！
