web試題

一、js中如何檢驗一個變量是一個string類型？

if(typeof str === 'string'){
    return true
}

二、js去除字符串空格？

str = str.replace(/\s*/g,'') // 去除全部空格
str = str.replace(/^\s*|\s*$/g,'') // 去除兩頭空格
str = str.replace(/^\s*/,'') // 去除左側空格
str = str.replace(/(\s*$)/g,'') // 去除右邊的空格

三、獲取瀏覽器URL中查詢字符串中的參數

測試地址爲：http://www.runoob.com/jquery/misc-trim.html?channelid=12333&name=xiaoming&age=23
function showWindowHref() {
   const sHref = window.location.href
   const args = sHref.split('?')
   if(args[0] == sHref){
      return ''
   }
   const arr = args[1].split('&')
   var  obj = {}
   for(var i = 0; i < arr.length; i++){
      var arg = arr.split('=')
      obj[arg[0]] = arg[1]
   }
   return obj
}

四、js字符串操做函數

 a、concat() // 將兩個或多個字符的文本組合起來，返回一個新的字符串

b、indexOf() // 返回字符串中一個子串第一次出現的索引，若是沒有匹配，則返回－1

c 、charAt() // 返回指定位置的字符

d、lastIndexOf() – 返回字符串中一個子串最後一處出現的索引，若是沒有匹配項，返回 -1 

• match() – 檢查一個字符串是否匹配一個正則表達式。

• substr() 函數 -- 返回從string的startPos位置，長度爲length的字符串

• substring() – 返回字符串的一個子串。傳入參數是起始位置和結束位置。

• slice() – 提取字符串的一部分，並返回一個新字符串。

• replace() – 用來查找匹配一個正則表達式的字符串，而後使用新字符串代替匹配的字符串。

• search() – 執行一個正則表達式匹配查找。若是查找成功，返回字符串中匹配的索引值。不然返回 -1 。

• split() – 經過將字符串劃分紅子串，將一個字符串作成一個字符串數組。

• length – 返回字符串的長度，所謂字符串的長度是指其包含的字符的個數。

• toLowerCase() – 將整個字符串轉成小寫字母。

• toUpperCase() – 將整個字符串轉成大寫字母。

五、怎樣添加、移除、移動、複製、建立和查找節點？

createDocumentFragment() // 建立一個DOM片
createEelement() // 建立一個具體的元素
createTextNode() // 建立一個文本節點
appendChild() // 添加
removeChild() // 刪除
replaceChild() // 替換
insertBefore() // 插入
getElementsByTagName() // 經過標籤名查找
getElementsByClassName() // 經過class 查找
getEelementById() // 經過ID查找

六、比較typeof與instanceof？

相同點：JavaScript 中 typeof 和 instanceof 經常使用來判斷一個變量是否爲空，或者是什麼類型的。

typeof的定義和用法：返回值是一個字符串，用來講明變量的數據類型。

細節：

(1)、typeof 通常只能返回以下幾個結果：number,boolean,string,function,object,undefined。

(2)、typeof 來獲取一個變量是否存在，如 if(typeof a!="undefined"){alert("ok")}，而不要去使用 if(a) 由於若是 a 不存在（未聲明）則會出錯。

(3)、對於 Array,Null 等特殊對象使用 typeof 一概返回 object，這正是 typeof 的侷限性。

Instanceof定義和用法：instanceof 用於判斷一個變量是否屬於某個對象的實例。

實例演示：

a instanceof b?alert("true"):alert("false"); //a是b的實例？真:假

var a = new Array(); 
alert(a instanceof Array);  // true
alert(a instanceof Object)  // true

如上，會返回 true，同時 alert(a instanceof Object) 也會返回 true;這是由於 Array 是 object 的子類。

function test(){};
var a = new test();
alert(a instanceof test)   // true

細節：

(1)、以下，獲得的結果爲‘N’,這裏的 instanceof 測試的 object 是指 js 語法中的 object，不是指 dom 模型對象。

if (window instanceof Object){ alert('Y')} else {  alert('N');}  // 'N'

七、如何理解閉包？

一、定義和用法：當一個函數的返回值是另一個函數，而返回的那個函數若是調用了其父函數內部的其它變量，若是返回的這個函數在外部被執行，就產生了閉包。

二、表現形式：使函數外部可以調用函數內部定義的變量。

三、實例以下：

(1)、根據做用域鏈的規則，底層做用域沒有聲明的變量，會向上一級找，找到就返回，沒找到就一直找，直到window的變量，沒有就返回undefined。這裏明顯count 是函數內部的flag2 的那個count 。

var count=10;   //全局做用域 標記爲flag1
function add(){
    var count=0;    //函數全局做用域 標記爲flag2
    return function(){
        count+=1;   //函數的內部做用域
        alert(count);
    }
}
var s = add()
s();//輸出1
s();//輸出2

四、變量的做用域

要理解閉包，首先必須理解Javascript特殊的變量做用域。

變量的做用域分類：全局變量和局部變量。

特色：

一、函數內部能夠讀取函數外部的全局變量；在函數外部沒法讀取函數內的局部變量。

二、函數內部聲明變量的時候，必定要使用var命令。若是不用的話，你實際上聲明瞭一個全局變量！

 五、使用閉包的注意點

1）濫用閉包，會形成內存泄漏：因爲閉包會使得函數中的變量都被保存在內存中，內存消耗很大，因此不能濫用閉包，不然會形成網頁的性能問題，在IE中可能致使內存泄露。解決方法是，在退出函數以前，將不使用的局部變量所有刪除。

2）會改變父函數內部變量的值。因此，若是你把父函數看成對象（object）使用，把閉包看成它的公用方法（Public Method），把內部變量看成它的私有屬性（private value），這時必定要當心，不要隨便改變父函數內部變量的值。

八、什麼是跨域？跨域請求資源的方法有哪些？

一、什麼是跨域？

因爲瀏覽器同源策略，凡是發送請求url的協議、域名、端口三者之間任意一與當前頁面地址不一樣即爲跨域。存在跨域的狀況：

• 網絡協議不一樣，如http協議訪問https協議。

• 端口不一樣，如80端口訪問8080端口。

• 域名不一樣，如qianduanblog.com訪問baidu.com。

• 子域名不一樣，如abc.qianduanblog.com訪問def.qianduanblog.com。

• 域名和域名對應ip,如www.a.com訪問20.205.28.90.

二、跨域請求資源的方法：

(1)、porxy代理

定義和用法：proxy代理用於將請求發送給後臺服務器，經過服務器來發送請求，而後將請求的結果傳遞給前端。

實現方法：經過nginx代理；

注意點：一、若是你代理的是https協議的請求，那麼你的proxy首先須要信任該證書（尤爲是自定義證書）或者忽略證書檢查，不然你的請求沒法成功。

(2)、CORS 【Cross-Origin Resource Sharing】

定義和用法：是現代瀏覽器支持跨域資源請求的一種最經常使用的方式。

使用方法：通常須要後端人員在處理請求數據的時候，添加容許跨域的相關操做。以下：

res.writeHead(200, {
    "Content-Type": "text/html; charset=UTF-8",
    "Access-Control-Allow-Origin":'http://localhost',
    'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
    'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type'
});

(3)、jsonp

定義和用法：經過動態插入一個script標籤。瀏覽器對script的資源引用沒有同源限制，同時資源加載到頁面後會當即執行（沒有阻塞的狀況下）。

特色：經過狀況下，經過動態建立script來讀取他域的動態資源，獲取的數據通常爲json格式。

實例以下：

<script>
    function testjsonp(data) {
       console.log(data.name); // 獲取返回的結果
    }
</script>
<script>
    var _script = document.createElement('script');
    _script.type = "text/javascript";
    _script.src = "http://localhost:8888/jsonp?callback=testjsonp";
    document.head.appendChild(_script);
</script>

缺點：

　　一、這種方式沒法發送post請求（這裏）

　　二、另外要肯定jsonp的請求是否失敗並不容易，大多數框架的實現都是結合超時時間來斷定。

九、談談垃圾回收機制方式及內存管理

回收機制方式

一、定義和用法：垃圾回收機制(GC:Garbage Collection),執行環境負責管理代碼執行過程當中使用的內存。

二、原理：垃圾收集器會按期（週期性）找出那些不在繼續使用的變量，而後釋放其內存。可是這個過程不是實時的，由於其開銷比較大，因此垃圾回收器會按照固定的時間間隔週期性的執行。

三、實例以下：

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的環境，那麼該塊內存會被js引擎中的垃圾回收器自動釋放；在fn2被調用的過程當中，返回的對象被全局變量b所指向，因此該塊內存並不會被釋放。

 四、垃圾回收策略：標記清除(較爲經常使用)和引用計數。

標記清除：

　　定義和用法：當變量進入環境時，將變量標記"進入環境"，當變量離開環境時，標記爲："離開環境"。某一個時刻，垃圾回收器會過濾掉環境中的變量，以及被環境變量引用的變量，剩下的就是被視爲準備回收的變量。

　　到目前爲止，IE、Firefox、Opera、Chrome、Safari的js實現使用的都是標記清除的垃圾回收策略或相似的策略，只不過垃圾收集的時間間隔互不相同。

引用計數：

　　定義和用法：引用計數是跟蹤記錄每一個值被引用的次數。

　　基本原理：就是變量的引用次數，被引用一次則加1，當這個引用計數爲0時，被視爲準備回收的對象。

 內存管理

一、何時觸發垃圾回收？

垃圾回收器週期性運行，若是分配的內存很是多，那麼回收工做也會很艱鉅，肯定垃圾回收時間間隔就變成了一個值得思考的問題。

IE6的垃圾回收是根據內存分配量運行的，當環境中的變量，對象，字符串達到必定數量時觸發垃圾回收。垃圾回收器一直處於工做狀態，嚴重影響瀏覽器性能。

IE7中，垃圾回收器會根據內存分配量與程序佔用內存的比例進行動態調整，開始回收工做。

二、合理的GC方案：(1)、遍歷全部可訪問的對象; (2)、回收已不可訪問的對象。

三、GC缺陷：(1)、中止響應其餘操做；

四、GC優化策略：(1)、分代回收（Generation GC）;(2)、增量GC

十、開發過程當中遇到的內存泄露狀況，如何解決的？

一、定義和用法：

內存泄露是指一塊被分配的內存既不能使用，又不能回收，直到瀏覽器進程結束。C#和Java等語言採用了自動垃圾回收方法管理內存，幾乎不會發生內存泄露。咱們知道，瀏覽器中也是採用自動垃圾回收方法管理內存，但因爲瀏覽器垃圾回收方法有bug，會產生內存泄露。

二、內存泄露的幾種狀況:

(1)、當頁面中元素被移除或替換時，若元素綁定的事件仍沒被移除，在IE中不會做出恰當處理，此時要先手工移除事件，否則會存在內存泄露。

實例以下:

<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)、因爲是函數內定義函數，而且內部函數--事件回調的引用外暴了，造成了閉包。閉包能夠維持函數內局部變量，使其得不到釋放。

實例以下：

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;
}

十一、判斷一個字符串中出現次數最多的字符，統計這個次數

var str = 'asbdsgdgfdgfdgfgr'
var json = {}
for(var i = 0; i < str.length; i++){
   if(!json[str.charAt(i)]){
      json[str.charAt(i)] = 1
   }else{
      json[str.charAt(i)]++
   }
}
var max = 0
var index = ''
for (var j in json){
   if(json[j] > max){
      max = json[j]
      index = j
   }
}

十二、編寫一個方法 去掉一個數組的重複元素

var arr = [1,4,6,7,4,3,5]
var obj = {}
var tmp = []
for (var i = 0; i < arr.length; i++){
   if(!obj[arr[i]]){
      obj[arr[i]] = 1
      tmp.push(arr[i])
   }
}

1三、$(document).ready()方法和window.onload有什麼區別？

 (1)、window.onload方法是在網頁中全部的元素(包括元素的全部關聯文件)徹底加載到瀏覽器後才執行的。

 (2)、$(document).ready() 方法能夠在DOM載入就緒時就對其進行操縱，並調用執行綁定的函數。

1四、什麼是盒子模型？

在網頁中，一個元素佔有空間的大小由幾個部分構成，其中包括元素的內容（content），元素的內邊距（padding），元素的邊框（border），元素的外邊距（margin）四個部分。這四個部分佔有的空間中，有的部分能夠顯示相應的內容，而有的部分只用來分隔相鄰的區域或區域。4個部分一塊兒構成了css中元素的盒模型。

1五、簡述一下src與href的區別

href 是指向網絡資源所在位置，創建和當前元素（錨點）或當前文檔（連接）之間的連接，用於超連接。

src是指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和frame等元素。

當瀏覽器解析到該元素時，會暫停其餘資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，相似於將所指向資源嵌入當前標籤內。這也是爲何將js腳本放在底部而不是頭部。

1六、px和em的區別

相同點：px和em都是長度單位；

異同點：px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，而且em會繼承父級元素的字體大小。
瀏覽器的默認字體高都是16px。因此未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em。

16、sessionStorage 、localStorage 和 cookie 之間的區別

 共同點：用於瀏覽器端存儲的緩存數據

不一樣點：

(1)、存儲內容是否發送到服務器端：當設置了Cookie後，數據會發送到服務器端，形成必定的寬帶浪費；

        web storage,會將數據保存到本地，不會形成寬帶浪費；

(2)、數據存儲大小不一樣：Cookie數據不能超過4K,適用於會話標識；web storage數據存儲能夠達到5M;

(3)、數據存儲的有效期限不一樣：cookie只在設置了Cookid過時時間以前一直有效，即便關閉窗口或者瀏覽器；

        sessionStorage,僅在關閉瀏覽器以前有效；localStorage,數據存儲永久有效；

(4)、做用域不一樣：cookie和localStorage是在同源同學口中都是共享的；sessionStorage不在不一樣的瀏覽器窗口中共享，即便是同一個頁面；

1八、Web Storage與Cookie相比存在的優點：

(1)、存儲空間更大：IE8下每一個獨立的存儲空間爲10M，其餘瀏覽器實現略有不一樣，但都比Cookie要大不少。

(2)、存儲內容不會發送到服務器：當設置了Cookie後，Cookie的內容會隨着請求一併發送的服務器，這對於本地存儲的數據是一種帶寬浪費。而Web Storage中的數據則僅僅是存在本地，不會與服務器發生任何交互。

(3)、更多豐富易用的接口：Web Storage提供了一套更爲豐富的接口，如setItem,getItem,removeItem,clear等,使得數據操做更爲簡便。cookie須要本身封裝。

(4)、獨立的存儲空間：每一個域（包括子域）有獨立的存儲空間，各個存儲空間是徹底獨立的，所以不會形成數據混亂。

開發及性能優化

一、規避javascript多人開發函數重名問題

• 命名空間
• 封閉空間
• js模塊化mvc（數據層、表現層、控制層）
• seajs
• 變量轉換成對象的屬性
• 對象化

二、請說出三種減低頁面加載時間的方法

• 壓縮css、js文件
• 合併js、css文件，減小http請求
• 外部js、css文件放在最底下
• 減小dom操做，儘量用變量替代沒必要要的dom操做

三、你所瞭解到的Web攻擊技術

（1）XSS（Cross-Site Scripting，跨站腳本攻擊）：指經過存在安全漏洞的Web網站註冊用戶的瀏覽器內運行非法的HTML標籤或者JavaScript進行的一種攻擊。
（2）SQL注入攻擊
（3）CSRF（Cross-Site Request Forgeries，跨站點請求僞造）：指攻擊者經過設置好的陷阱，強制對已完成的認證用戶進行非預期的我的信息或設定信息等某些狀態更新。

 四、web前端開發，如何提升頁面性能優化？

內容方面：

1.減小 HTTP 請求 (Make Fewer HTTP Requests)

2.減小 DOM 元素數量 (Reduce the Number of DOM Elements)

3.使得 Ajax 可緩存 (Make Ajax Cacheable)

針對CSS：

1.把 CSS 放到代碼頁上端 (Put Stylesheets at the Top)

2.從頁面中剝離 JavaScript 與 CSS (Make JavaScript and CSS External)

3.精簡 JavaScript 與 CSS (Minify JavaScript and CSS)

4.避免 CSS 表達式 (Avoid CSS Expressions)

針對JavaScript ：

1. 腳本放到 HTML 代碼頁底部 (Put Scripts at the Bottom)

2. 從頁面中剝離 JavaScript 與 CSS (Make JavaScript and CSS External)

3. 精簡 JavaScript 與 CSS (Minify JavaScript and CSS)

4. 移除重複腳本 (Remove Duplicate Scripts)

面向圖片(Image)：

1.優化圖片

2 不要在 HTML 中使用縮放圖片

3 使用恰當的圖片格式

4 使用 CSS Sprites 技巧對圖片優化

五、前端開發中，如何優化圖像？圖像格式的區別？

優化圖像：

一、不用圖片，儘可能用css3代替。 好比說要實現修飾效果，如半透明、邊框、圓角、陰影、漸變等，在當前主流瀏覽器中均可以用CSS達成。

二、 使用矢量圖SVG替代位圖。對於絕大多數圖案、圖標等，矢量圖更小，且可縮放而無需生成多套圖。如今主流瀏覽器都支持SVG了，因此可放心使用！

3.、使用恰當的圖片格式。咱們常見的圖片格式有JPEG、GIF、PNG。

基本上，內容圖片多爲照片之類的，適用於JPEG。

而修飾圖片一般更適合用無損壓縮的PNG。

GIF基本上除了GIF動畫外不要使用。且動畫的話，也更建議用video元素和視頻格式，或用SVG動畫取代。

四、按照HTTP協議設置合理的緩存。

五、使用字體圖標webfont、CSS Sprites等。

六、用CSS或JavaScript實現預加載。

七、WebP圖片格式能給前端帶來的優化。WebP支持無損、有損壓縮，動態、靜態圖片，壓縮比率優於GIF、JPEG、JPEG2000、PG等格式，很是適合用於網絡等圖片傳輸。

 圖像格式的區別：

矢量圖：圖標字體，如 font-awesome；svg 

位圖：gif,jpg(jpeg),png

區別：

　　一、gif:是是一種無損，8位圖片格式。具備支持動畫，索引透明，壓縮等特性。適用於作色彩簡單(色調少)的圖片，如logo,各類小圖標icons等。

　　二、JPEG格式是一種大小與質量相平衡的壓縮圖片格式。適用於容許輕微失真的色彩豐富的照片，不適合作色彩簡單(色調少)的圖片，如logo,各類小圖標icons等。

　　三、png:PNG能夠細分爲三種格式:PNG8，PNG24，PNG32。後面的數字表明這種PNG格式最多能夠索引和存儲的顏色值。

關於透明：PNG8支持索引透明和alpha透明;PNG24不支持透明;而PNG32在24位的PNG基礎上增長了8位（256階）的alpha通道透明;

優缺點：

　　一、能在保證最不失真的狀況下儘量壓縮圖像文件的大小。

　　二、對於須要高保真的較複雜的圖像，PNG雖然能無損壓縮，但圖片文件較大，不適合應用在Web頁面上。 

六、瀏覽器是如何渲染頁面的？

渲染的流程以下：

1.解析HTML文件，建立DOM樹。

   自上而下，遇到任何樣式（link、style）與腳本（script）都會阻塞（外部樣式不阻塞後續外部腳本的加載）。

2.解析CSS。優先級：瀏覽器默認設置<用戶設置<外部樣式<內聯樣式<HTML中的style樣式；

3.將CSS與DOM合併，構建渲染樹（Render Tree）

4.佈局和繪製，重繪（repaint）和重排（reflow）

 

HTTP

一次完整的HTTP事務是怎樣的一個過程？

基本流程：

a. 域名解析

b. 發起TCP的3次握手

c. 創建TCP鏈接後發起http請求

d. 服務器端響應http請求，瀏覽器獲得html代碼

e. 瀏覽器解析html代碼，並請求html代碼中的資源

f. 瀏覽器對頁面進行渲染呈現給用戶