web前端開發面試遇到的題目

時間 2019-11-16

標籤 web 前端開發面試遇到題目欄目 HTML 简体版

原文原文鏈接

每次面試的題目都總結在一個小本本上，很不方便，有小夥伴推薦寫博客，我就來總結一下近期遇到的面試題目。javascript

一、解釋html語義化？css

回答：用正確的標籤作正確的事情。html語義化讓頁面的內容結構化、結構更清晰、便於對瀏覽器、搜索引擎解析；html

　　　即便在沒有css樣式的狀況下，也以一種文檔格式顯示，而且是容易閱讀的；前端

　　　搜索引擎的爬蟲也依賴於html標記來肯定上下文和各個關鍵字的權重，利於SEO;html5

　　使閱讀代碼的人對網站更容易對網站分塊，便於閱讀維護理解。java

二、塊級元素與行內元素的區別？各自有哪些？nginx

回答：css規範規定，每一個元素都有一個display屬性,肯定該元素的類型，如div的display默認值爲「block」，則爲「塊級」元素；span默認display屬性值爲「inline」，是「行內」元素。web

　　　　區別：第一：塊級元素會獨佔一行，其寬度自動填充父元素寬度；行內元素不會獨佔一行，相鄰的行內元素會排列在一行裏，直到一行拍不下，纔會換行。面試

　　　　　　第二：塊級元素能夠設置width、height，行內元素設置無效。（塊級元素即便設置了width寬度，也是獨佔一行）。ajax

　　　　　　第三：塊級元素能夠設置margin、padding，行內元素水平方向有效，豎直方向無效。（例如：margin-left,margin-right、padding-left、padding-right有效）。

　　　塊級元素：div、ul、li、ol、dl、dt、dd、h一、h二、h三、h4...p、table form fieldset dir-目錄列表 menu

　　　　行內元素：a b span img strong select label sub sup textarea input

　　　　空元素：br hr img input link meta

三、DOCTYPE的做用？標準模式和兼容模式各有什麼區別？爲何html5只須要寫<!doctype html>?

回答：（1）、<!doctype>聲明位於html文檔中的第一行，處於<html>標籤以前。告知瀏覽器的解析器用什麼文檔標準解析這個文檔。DOCTYPE不存在或者格式不正確會致使文檔以兼容模式呈現。

　　　（2）、標準模式的排版和js運做模式都是以該瀏覽器支持的最高標準運行；在兼容模式下，頁面以寬鬆的向後兼容的方式顯示，模擬老式瀏覽器的行爲以防止站點沒法工做。

　　（3）、HTML不基於SGML，所以不須要對DTD進行引用，可是須要doctype來規範瀏覽器的行爲（讓瀏覽器按照他們應該的方式來運行）；

　　　　　　而html4.01基於SGML，因此須要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。

四、link和@import的區別？

回答：（1）、link屬於xhtml標籤，除了加載css以外，還能用於定義rss,定義rel鏈接屬性等做用；而@import是css提供的，只能用於加載css;

　　　（2）、頁面被加載時，link會同時被加載；而@import引用的css會等到頁面被加載完後再加載。　　　　

　　　（3）、@import是css2.1提出的，只有在IE5以上才能被識別，而link是xhtml標籤，無兼容問題。

五、HTML5有哪些新特性？移除了哪些元素？如何處理html5新標籤的瀏覽器兼容問題？如何區分html和html5?

回答：（1）、h5不是SGML的子集，主要是關於圖像、位置、存儲、多任務等功能的增長。

　　　　　　　繪畫canvas；用於媒介回放的video和audio元素；語義化更好的內容元素：article、footer、header、nav、section；本地離線存儲localStorage長期存儲數據，瀏覽器關閉後數據不丟失；sessionStorage的數據在瀏覽器關閉後自動刪除；表單控件增添calendar、date、time、email、url、search;新的技術Webworker,Websocket,Geolocation。

　　　（2）、移除的元素：純表現的元素：basefont\big\center\font\s\u;對可用性產生負面影響的元素：frame\frameset\noframes;

　　　（3）、處理和html5新標籤的瀏覽器兼容問題：

　　　　　　當在頁面中使用html5新標籤時，可能獲得三種不一樣的狀況：

　　　　　　　　1>結果1：新標籤被當作錯誤處理而且忽略，在DOM構建時會看成這個標籤不存在；

　　　　　　　　2>結果2：新標籤看成錯誤處理，並在DOM構建時，這個新標籤會被構形成行內元素；

　　　　　　　　3>結果3：新標籤被識別爲html5標籤，而後用DOM節點對其進行替換。

　　　　　　不能識別html5標籤而不能使用，解決辦法以下：

　　　　　　　　1>方法1：實現標籤被識別

　　　　　　　　　經過document.creatElement(tagname)方法讓瀏覽器識別新標籤，瀏覽器支持標籤後，還能夠爲新標籤增添css樣式。

　　　　　　　　2>方法2：javascript解決方案

　　　　　　　　 a)使用html5shim:

　　　　　　　　　　在head中調用一下代碼：(也能夠下載到本身的網站上進行調用，可是必須在head中)

                 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

　　　　　　　　 b)使用kill IE6

　　　　　　　　　　在</body>以前調用如下代碼：　　　　　　

              <script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.zh_CN.pack.js"></script>

　　　（4）、區分html和html5:doctype聲明、新增的結構元素|功能元素。

六、css選擇符？優先級算法？哪些屬性能夠繼承？

回答：（1）、id選擇器；（2）、類選擇器；（3）、標籤選擇器；（4）、相鄰選擇器（h1+p）;（5）、子選擇器（ul>li）;（6）、後代選擇器（li a）；（7）、通配符選擇器（*）；（8）、屬性選擇器（a[rel="external"]）;（9）、僞類選擇器（a:hover）;

　　　　可繼承的屬性：font-size/font-family/color/UL LI Dl DD DT;

　　　　不可繼承的樣式：border/margin/padding/height/width/display/position/float/left...;

　　　　優先級：！important>id>class>tag>*; !important比內聯優先級高；內聯樣式表（標籤內部）>嵌入樣式表（當前文件中）>外部樣式表（外部文件中）

七、描述cookies,sessionStorage,localStorage的區別？

回答：（1）、cookie是網站用於標識用戶的身份而儲存在用戶本地終端（client side）上的數據（一般通過加密）；cookie數據始終在同源的http中攜帶（即便不須要），即會在瀏覽器和服務器間來回傳遞；（2）、sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。

　　　（3）、存儲大小：cookie數據大小不能超過4k;sessionStorage和localStorage雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。

　　　（4）、有效時間：localStorage存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據；

　　　　　　　　　　　sessionStorage數據在當前瀏覽器關閉後刪除；

　　　　　　　　　　　cookie 設置的cookie過時時間以前一直有效，即便窗口或者瀏覽器關閉。

八、javascript有幾種數據類型？劃一下他們的內存圖？

回答：棧:原始數據類型（number、string、Boolean、null、undefined）;

　　　堆：引用數據類型（對象、數組、和函數）；

　　　兩種類型的區別：存儲位置不一樣：原始數據類型存儲在棧中的簡單數據段，佔據空間小，大小固定，屬於被頻繁使用數據，因此放入棧中存儲；

　　　　　　　　　　　引用數據類型存儲在堆中的對象，佔據空間大，大小不固定。若是存儲在棧中將會影響程序運行的性能；引用數據類型在棧中存儲了指針，該指針指向堆中該實體的起始地址。當解釋器尋找引用值時，會首先檢索其在棧中的地址，取得地址後從堆中得到實體。

九、href和src的區別？

回答：(1)、href表示超文本引用，用於創建當前元素和文檔之間的連接。經常使用的有link、a上使用，當前文檔和引用資源之間確立聯繫，並行下載資源。

　　 (2)、src是sourse的縮寫，src指向的文檔會嵌入到文檔中當前標籤所在的位置。主要是引入，經常使用與img,script等元素上，替換當前元素，當瀏覽器解析該元素時，會暫停其餘資源的下載和處理，直到完畢。

十、javascript中call()和apply()方法的區別？

回答：ECMAScript規範給全部函數都定義了這兩個方法call()和apply()。

call()方法定義：調用一個對象的一個方法，以另外一個對象替換當前對象。

apply()方法定義：應用某一對象的一個方法，用另外一個對象替換當前對象。

二者的區別在與參數：call()和apply()的第一個參數都是要調用的函數的對象，call()的剩餘參數是傳遞給要調用的函數的值，而apply()只有兩個參數，第一個是對象，第二個是數組，這個數組就是該函數的參數。

十一、javascript原型？原型鏈？以及如何實現繼承？

回答：每一個對象都會在內部初始化一個屬性，就是prototype（原型），當咱們訪問一個對象的屬性時，若是這個對象內部不存在這個屬性，那麼他就會去prototype裏面找這個屬性，這個prototype又會有本身的prototype，因而就這樣一直找下去，就是原型鏈的概念。

如何實現繼承：

1》構造繼承：好比：如今有一個」動物「對象的構造函數

　function Animal(){
　　　　this.species = "動物";
　　}

還有一個」貓「對象的構造函數

　　function Cat(name,color){
　　　　this.name = name;
　　　　this.color = color;
　　}

」貓「繼承」動物「

構造函數綁定：使用call()或者apply()方法，將父對象的構造函數綁定在子對象上，即在子對象構造函數中加一行：

　function Cat(name,color){
　　　　Animal.apply(this, arguments);
　　　　this.name = name;
　　　　this.color = color;
　　}
　　var cat1 = new Cat("大毛","黃色");
　　alert(cat1.species); // 動物

2》原型繼承：若是」貓「的prototype對象，指向一個animal的實例，那麼全部貓的實例就能夠繼承animal了。

　Cat.prototype = new Animal();
　　Cat.prototype.constructor = Cat;
　　var cat1 = new Cat("大毛","黃色");
　　alert(cat1.species); // 動物

3》實例繼承：

4》拷貝繼承：

原型prototype機制或apply和call方法去實現比較簡單，建議使用構造方式和原型混合方式。

    function Parent(){
         this.name = 'wang';
     }

     function Child(){
         this.age = 28;
     }
     Child.prototype = new Parent();//繼承了Parent，經過原型

     var demo = new Child();
     alert(demo.age);
     alert(demo.name);//獲得被繼承的屬性

十二、前端性能優化的方法？

回答：（1）、當須要設置的樣式不少時設置className而不是直接操做style。

　　　（2）、避免在頁面的主題佈局中使用table，table要等其中的內容徹底下載以後纔會顯示出來，顯示比div+css佈局慢。

　　　（3）、用innerHTML代替DOM操做，減小DOM操做次數，優化javascript性能。

　　　（4）、減小http請求次數：CSS Sprites，JS、CSS源碼壓縮，圖片大小控制合適；網頁GZIP壓縮，CDN託管，data緩存，圖片服務器。

　　　（5）、圖片預加載，將樣式表放在頂部，將腳本放在底部，加上時間戳。

　　　（6）、前端模板 JS+數據，減小因爲html標籤致使的貸款浪費，前端用變量保存AJAX請求結果，每次操做本地數據，減小請求次數。

　　　（7）、少用全局變量，緩存DOM節點查找的結果。減小IO（輸入/輸出）讀取操做。

　　　（8）、避免使用CSS Expression(css 表達式)又稱動態屬性（Dynamic properties）。

　　　（9）、減小DOM操做；部署前，圖片壓縮、代碼壓縮；優化js代碼結構，減小冗餘代碼；減小http請求，合理設置http緩存；使用內容分發cdn加速；靜態資源緩存；圖片延遲加載；

1三、介紹一下標準的CSS的盒子模型？低版本的IE的盒子模型有什麼不一樣？

回答：（1）、有兩種：IE盒子模型、w3c盒子模型；（2）、盒模型：content(內容)、padding（內邊距）、margin（外邊距）、 border（邊框）；（3）：區別：IE的content把padding和border計算了進去。

1四、如何居中div?

回答：（1）、水平居中：給DIV設置一個寬度，而後添加margin:0 auto屬性。

 div{
     width:200px;
     margin:0 auto;
  }

（2）、讓絕對定位的div居中：

div {
     position: absolute;
     width: 300px;
     height: 300px;
     margin: auto;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     background-color: pink;    /* 方便看效果 */
 }

（3）、水平垂直居中一：

 肯定容器的寬高 寬500 高 300 的層
 設置層的外邊距

 div {
     position: relative;        /* 相對定位或絕對定位都可 */
     width:500px;
     height:300px;
     top: 50%;
     left: 50%;
     margin: -150px 0 0 -250px;         /* 外邊距爲自身寬高的一半 */
     background-color: pink;         /* 方便看效果 */

  }

（4）、水平垂直居中二：

 未知容器的寬高，利用 `transform` 屬性

 div {
     position: absolute;        /* 相對定位或絕對定位都可 */
     width:500px;
     height:300px;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     background-color: pink;         /* 方便看效果 */

 }

（5）、水平垂直居中三：

 利用 flex 佈局
 實際使用時應考慮兼容性

 .container {
     display: flex;
     align-items: center;         /* 垂直居中 */
     justify-content: center;    /* 水平居中 */

 }
 .container div {
     width: 100px;
     height: 100px;
     background-color: pink;        /* 方便看效果 */
 }

1五、position的值定位原點是？

回答：（1）、absolute：生成絕對定位的元素，相對於值不爲static的第一個父元素進行定位。

　　　　（2）、relative：生成相對定位的元素，相對於元素正常位置進行定位。

　　　　（3）、fixed（老IE不支持）：生成絕對定位的元素，相對於瀏覽器窗口進行定位。

　　　　（4）、static：默認值，沒有定位，元素出如今正常的流中。

　　　　（5）、inherit:規定從父元素繼承position的值。

16：清除浮動的幾種方式？爲何要清除浮動呢？

回答：（1）、添加新的元素，應用clear:both;（額外標籤法）

.clear{clear:both; height: 0; line-height: 0; font-size: 0}

　　　　（2）、父級div定義overflow:auto;

　　　　（3）、使用：after方法，做用與浮動元素的父元素。（僞元素）

　.clearfix:after{

　　　　　　content:"";//設置內容爲空

　　　　　　height:0;//高度爲0

　　　　　　line-height:0;//行高爲0

　　　　　　display:block;//將文本轉爲塊級元素

　　　　　　visibility:hidden;//將元素隱藏

　　　　　　clear:both//清除浮動

　　　　　}

　　　　.clearfix{

　　　　　　zoom:1;爲了兼容IE(觸發IE的haslayout屬性) 　　　
　}

　　　　（4）、使用雙僞元素

.clearfix:before,.clearfix:after {

                  content: "";

                  display: block;

                  clear: both;

            }

            .clearfix {

                  zoom: 1;

            }

緣由：若是一個盒子中有一個子盒子，而且父盒子沒有設置高，子盒子在父盒子中設置了浮動，那麼未來父盒子的高度就是0，下面的元素就會自動部位。（因此能夠給父級DIV定義height；也能夠父級DIV一塊兒浮動）。

（當設置了zoom的值以後，所設置的元素就會就會擴大或者縮小，高度寬度就會從新計算了，這裏一旦改變zoom值時其實也會發生從新渲染，運用這個原理，也就解決了ie下子元素浮動時候父元素不隨着自動擴大的問題。）

1七、css定義的權重？

回答：權重的規則：標籤的權重爲1，class的權重爲10，id的權重爲100，以下所示：（ps:若是權重相同，則最後定義的樣式會起做用，可是要避免這樣的狀況）

/*權重爲1*/
  div{
  }
  /*權重爲10*/
  .class1{
  }
  /*權重爲100*/
  #id1{
  }
  /*權重爲100+1=101*/
  #id1 div{
  }
  /*權重爲10+1=11*/
  .class1 div{
  }
  /*權重爲10+10+1=21*/
  .class1 .class2 div{
  }

1八、javascript做用域和閉包？

回答：變量做用域：包括全局變量和局部變量（函數內部能夠直接讀取全局變量&函數外部天然不能讀取函數內部的局部變量）。

（1）、函數做用域：函數的局部變量僅對函數內部可見。

（2）、詞法做用域：函數的嵌套關係是定義的時候決定的，而不是調用的時候決定的，即嵌套關係是詞法分析時肯定的，而非運行時決定。

（3）、全局做用域：在最外層定義的變量，全局對象的變量，任何地方隱匿定義的變量。

（4）、沒有塊級做用域。

閉包：就是可以讀取其餘函數內部變量的函數。也能夠理解成」定義在一個函數內部的函數」；

閉包的用途就是一能夠讀取函數內部的變量，二就是讓這些變量的值始終保存在內存中。（內存會消耗過大，因此不能濫用閉包）。

簡單的閉包例子：

　function f1(){
　　　　var n=999;
　　　　function f2(){
　　　　　　alert(n); 
　　　　}
　　　　return f2;
　　}
　　var result=f1();
　　result(); // 999

1九、AJAX的步驟？

回答：（1）、建立ajax對象；（2）、發出HTTP請求；（3）、接收服務器傳回的數據；（4）、更新網頁數據。

20、一個頁面上兩個div左右鋪滿整個瀏覽器，要保證左邊的div一直爲100px，右邊的div跟隨瀏覽器大小變化（好比瀏覽器爲500，右邊就爲400；若是瀏覽器爲900，右邊爲800）？

回答：（1）、浮動佈局：

<div id="left">left sidebar</div>
<div id="content">Main Content</div>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    #left{
        float: left;
        width: 220px;
        background-color: green;
    }
    #content{
        background-color: orange;
        margin-left: 220px;
    }
</style>

2一、一個頁面從輸入URL到頁面加載顯示完成，這個過程發生了什麼？（流程說的越詳細越好）

回答：輸入地址

（1）、瀏覽器查找域名的IP地址，這一步包括DNS具體的查找過程（包括：瀏覽器緩存-》系統緩存-》路由器緩存...）（2）、瀏覽器向web服務器發送一個HTTP請求；（3）、服務器的永久重定向響應（從http://example.com到http://www.example.com）；（5）、瀏覽器跟蹤重定向地址；（6）、服務器處理請求；（7）、服務器返回一個HTTP響應；（8）、瀏覽器顯示HTML；（9）、瀏覽器發送請求獲取嵌入在HTML中的資源（如圖片、音頻、視頻、css、js等等）；（10）、瀏覽器發送異步請求。

2二、JS跨域請求的方式，能寫幾種寫幾種?

回答：（1）、經過jsonp跨域；

（2）、經過修改document.domain來跨子域；

（3）、使用window.name來進行跨域；

（4）、使用HTML5新引進的window.postMessage方法來進行跨域（ie6 7不支持）；

（5）、CORS須要服務器設置header:Access-Control-Allow-Origin；

（6）、nginx反向代理這個方法能夠不用目標服務器配合，不過須要搭建一箇中轉nginx服務器，用於轉發請求。