整理總結(jié)的一些前端面試題講述

1、整理總結(jié)的一些前端面試題HTML面試題1.XHTML和HTML有什么區(qū)別· HTML是一種基本的WEB網(wǎng)頁設(shè)計語言，XHTML是一個基于XML的置標(biāo)語言最主要的不同：· XHTML 元素必須被正確地嵌套。· XHTML 元素必須被關(guān)閉。· 標(biāo)簽名必須用小寫字母。· XHTML 文檔必須擁有根元素。2.前端頁面有哪三層構(gòu)成，分別是什么?作用是什么?· 結(jié)構(gòu)層 Html 表示層 CSS 行為層 js;3.你做的頁面在哪些流覽器測試過?這些瀏覽器的內(nèi)核分別是什么?· Ie(Ie內(nèi)核) 火狐（Gecko） 谷歌（webkit,Bli

2、nk） opera(Presto),Safari(wbkit)4.什么是語義化的HTML?· 直觀的認(rèn)識標(biāo)簽 對于搜索引擎的抓取有好處，用正確的標(biāo)簽做正確的事情！· html語義化就是讓頁面的內(nèi)容結(jié)構(gòu)化，便于對瀏覽器、搜索引擎解析；在沒有樣式CCS情況下也以一種文檔格式顯示，并且是容易閱讀的。搜索引擎的爬蟲依賴于標(biāo)記來確定上下文和各個關(guān)鍵字的權(quán)重，利于 SEO。· 使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解。5.HTML5 為什么只需要寫 !DOCTYPE HTML？· HTML5 不基于 SGML，因此不需要對DTD進(jìn)行引用，但是需要do

3、ctype來規(guī)范瀏覽器的行為（讓瀏覽器按照它們應(yīng)該的方式來運行）；而HTML4.01基于SGML,所以需要對DTD進(jìn)行引用，才能告知瀏覽器文檔所使用的文檔類型。6.Doctype作用？標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別?· !DOCTYPE聲明位于位于HTML文檔中的第一行，處于html 標(biāo)簽之前。告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個文檔。DOCTYPE不存在或格式不正確會導(dǎo)致文檔以兼容模式呈現(xiàn)。· 標(biāo)準(zhǔn)模式的排版 和JS運作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運行。在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。7.html5有哪些新特性

4、、移除了那些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問題？如何區(qū)分 HTML 和HTML5？· HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲，多任務(wù)等功能的增加。· 繪畫 canvas· 用于媒介回放的 video 和 audio 元素· 本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；· sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除· 語意化更好的內(nèi)容元素，比如 article、footer、header、nav、section· 表單控件，calen

5、dar、date、time、email、url、search· 新的技術(shù)webworker, websockt, Geolocation移除的元素· 純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u；· 對可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes；支持HTML5新標(biāo)簽：· IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標(biāo)簽，· 可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽，· 瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣

6、式：8.請描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別？· cookie在瀏覽器和服務(wù)器間來回傳遞。 sessionStorage和localStorage不會· sessionStorage和localStorage的存儲空間更大；· sessionStorage和localStorage有更多豐富易用的接口；· sessionStorage和localStorage各自獨立的存儲空間；9.如何實現(xiàn)瀏覽器內(nèi)多個標(biāo)簽頁之間的通信?· 調(diào)用localstorge、cookies等本地存儲方式CSS面

7、試題1.簡要說一下CSS的元素分類· 塊級元素：div,p,h1,form,ul,li;· 行內(nèi)元素 : span>,a,label,input,img,strong,em;2.CSS隱藏元素的幾種方法（至少說出三種）· Opacity:元素本身依然占據(jù)它自己的位置并對網(wǎng)頁的布局起作用。它也將響應(yīng)用戶交互;· Visibility:與 opacity 唯一不同的是它不會響應(yīng)任何用戶交互。此外，元素在讀屏軟件中也會被隱藏;· Display:display 設(shè)為 none 任何對該元素直接打用戶交互操作都不可能生效。此外，讀屏軟件也不會讀到

8、元素的內(nèi)容。這種方式產(chǎn)生的效果就像元素完全不存在;· Position:不會影響布局，能讓元素保持可以操作;· Clip-path:clip-path 屬性還沒有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件，瀏覽器支持度還要低;3.CSS清除浮動的幾種方法（至少兩種）· 使用帶clear屬性的空元素· 使用CSS的overflow屬性；· 使用CSS的:after偽元素；· 使用鄰接元素處理；4.CSS居中（包括水平居中和垂直居中）內(nèi)聯(lián)元素居中方案水平居中設(shè)置：1.行內(nèi)元素

9、83; 設(shè)置 text-align:center；2.Flex布局· 設(shè)置display:flex;justify-content:center;(靈活運用,支持Chroime，F(xiàn)irefox，IE9+)垂直居中設(shè)置：1.父元素高度確定的單行文本（內(nèi)聯(lián)元素）· 設(shè)置 height = line-height；2.父元素高度確定的多行文本（內(nèi)聯(lián)元素）· a:插入 table （插入方法和水平居中一樣），然后設(shè)置 vertical-align:middle；· b:先設(shè)置 display:table-cell 再設(shè)置 vertical-align:middl

10、e；塊級元素居中方案水平居中設(shè)置：1.定寬塊狀元素· 設(shè)置 左右 margin 值為 auto；2.不定寬塊狀元素· a:在元素外加入 table 標(biāo)簽（完整的，包括 table、tbody、tr、td），該元素寫在 td 內(nèi)，然后設(shè)置 margin 的值為 auto；· b:給該元素設(shè)置 displa:inine 方法；· c:父元素設(shè)置 position:relative 和 left:50%，子元素設(shè)置 position:relative 和 left:50%；垂直居中設(shè)置：· 使用position:absolute（fixed）,設(shè)置l

11、eft、top、margin-left、margin-top的屬性;· 利用position:fixed（absolute）屬性，margin:auto這個必須不要忘記了;· 利用display:table-cell屬性使內(nèi)容垂直居中;· 使用css3的新屬性transform:translate(x,y)屬性;· 使用:before元素;5.寫出幾種IE6 BUG的解決方法· 雙邊距BUG float引起的 使用display· 3像素問題 使用float引起的 使用dislpay:inline -3px· 超鏈接hove

12、r 點擊后失效 使用正確的書寫順序 link visited hover active· Ie z-index問題 給父級添加position:relative· Png 透明 使用js代碼 改· Min-height 最小高度 ！Important 解決· select 在ie6下遮蓋 使用iframe嵌套· 為什么沒有辦法定義1px左右的寬度容器（IE6默認(rèn)的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）6.對于SASS或是Less的了解程度？喜歡那個？· 語法介紹7.Bootstra

13、p了解程度· 特點，排版，插件的使用;8.頁面導(dǎo)入樣式時，使用link和import有什么區(qū)別？· link屬于XHTML標(biāo)簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用；而import是CSS提供的，只能用于加載CSS;· 頁面被加載的時，link會同時被加載，而import引用的CSS會等到頁面被加載完再加載;· import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標(biāo)簽，無兼容問題;9.介紹一下CSS的盒子模型？· 有兩種， IE 盒子模型、標(biāo)準(zhǔn) W3C 盒子模型；IE的content部

14、分包含了 border 和 pading;· 盒模型： 內(nèi)容(content)、填充(padding)、邊界(margin)、 邊框(border).10.CSS 選擇符有哪些？哪些屬性可以繼承？優(yōu)先級算法如何計算？ CSS3新增偽類有那些？· id選擇器（ # myid）· 類選擇器（.myclassname）· 標(biāo)簽選擇器（div, h1, p）· 相鄰選擇器（h1 + p）· 子選擇器（ul > li）· 后代選擇器（li a）· 通配符選擇器（ * ）· 屬性選擇器（arel = “exte

15、rnal”）· 偽類選擇器（a: hover, li: nth child）· 可繼承的樣式： font-size font-family color, UL LI DL DD DT;· 不可繼承的樣式：border padding margin width height ;· 優(yōu)先級就近原則，同權(quán)重情況下樣式定義最近者為準(zhǔn);· 優(yōu)先級為:JavaScript12!important >  id > class > tagimportant 比 內(nèi)聯(lián)優(yōu)先級高11.CSS3有哪些新特性？· CSS3

16、實現(xiàn)圓角（border-radius:8px），陰影（box-shadow:10px），對文字加特效（text-shadow、），線性漸變（gradient），旋轉(zhuǎn)（transform）· transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);/旋轉(zhuǎn),縮放,定位,傾斜增加了更多的CSS選擇器 多背景 rgbaJavaScript面試題1.javascript的typeof返回哪些數(shù)據(jù)類型· bject number function boolean underfind;2.

17、例舉3種強制類型轉(zhuǎn)換和2種隱式類型轉(zhuǎn)換?· 強制（parseInt,parseFloat,number）隱式（= =）；3.數(shù)組方法pop() push() unshift() shift()· Push()尾部添加 pop()尾部刪除· Unshift()頭部添加 shift()頭部刪除4.ajax請求的時候get 和post方式的區(qū)別?· 一個在url后面 一個放在虛擬載體里面有大小限制· 安全問題應(yīng)用不同 一個是論壇等只需要請求的，一個是類似修改密碼的;5.call和apply的區(qū)別· Object.call(this,obj1

18、,obj2,obj3)· Object.apply(this,arguments)6.ajax請求時，如何解釋json數(shù)據(jù)· 使用eval parse,鑒于安全性考慮 使用parse更靠譜;7.事件委托是什么· 讓利用事件冒泡的原理，讓自己的所觸發(fā)的事件，讓他的父元素代替執(zhí)行！8.閉包是什么，有什么特性，對頁面有什么影響?簡要介紹你理解的閉包· 閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。9.添加 刪除 替換 插入到某個接點的方法obj.appendChidl()obj.innersetBeforeobj.replaceChildobj.removeChil

19、d10.說一下什么是javascript的同源策略？· 一段腳本只能讀取來自于同一來源的窗口和文檔的屬性，這里的同一來源指的是主機名、協(xié)議和端口號的組合11.編寫一個b繼承a的方法;JavaScript1234567891011function A(name)     = name;    this.sayHello = function()alert(+” say Hello!”);function B(name,id)    

20、this.temp = A;    this.temp(name);        /相當(dāng)于new A();    delete this.temp;            this.id = id;       this.checkId = function(ID)alert(

21、this.id=ID);12.如何阻止事件冒泡和默認(rèn)事件JavaScript12345678function stopBubble(e)    if (e && e.stopPropagation)        e.stopPropagation()    else        window.event.cancelBubble=true

22、return false13.下面程序執(zhí)行后彈出什么樣的結(jié)果?JavaScript12345678910111213141516171819function fn()     this.a = 0;    this.b = function()         alert(this.a)    totype =     b: function()

23、         this.a = 20;        alert(this.a);    ,    c: function()         this.a = 30;        alert(

24、this.a);    var myfn = new fn();myfn.b();myfn.c();14.談?wù)凾his對象的理解。this是js的一個關(guān)鍵字，隨著函數(shù)使用場合不同，this的值會發(fā)生變化。但是有一個總原則，那就是this指的是調(diào)用函數(shù)的那個對象。this一般情況下：是全局對象Global。 作為方法調(diào)用，那么this就是指這個對象15.下面程序的結(jié)果JavaScript1234567891011function fun(n,o)   console.log(o)  return  

25、0;  fun:function(m)      return fun(m,n);      var a = fun(0);  a.fun(1);  a.fun(2);  a.fun(3);var b = fun(0).fun(1).fun(2).fun(3);var c = fun(0).fun(1);  c.fun(2);  c.fun(3);/答案：/

26、a: undefined,0,0,0/b: undefined,0,1,2/c: undefined,0,1,116.下面程序的輸出結(jié)果JavaScript123456789var name = 'World!'(function ()     if (typeof name = 'undefined')         var name = 'Jack'      &

27、#160; console.log('Goodbye ' + name);     else         console.log('Hello ' + name);    )();17.了解Node么？Node的使用場景都有哪些？· 高并發(fā)、聊天、實時消息推送18.介紹下你最常用的一款框架· jquery,rn,angular等;19.對于前端自動化構(gòu)建工具有了解嗎？簡單

28、介紹一下· Gulp,Grunt等；20.介紹一下你了解的后端語言以及掌握程度其它1.對Node的優(yōu)點和缺點提出了自己的看法？(優(yōu)點）因為Node是基于事件驅(qū)動和無阻塞的，所以非常適合處理并發(fā)請求，因此構(gòu)建在Node上的代理服務(wù)器相比其他技術(shù)實現(xiàn)（如Ruby）的服務(wù)器表現(xiàn)要好得多。此外，與Node代理服務(wù)器交互的客戶端代碼是由javascript語言編寫的，因此客戶端和服務(wù)器端都用同一種語言編寫，這是非常美妙的事情。（缺點）Node是一個相對新的開源項目，所以不太穩(wěn)定，它總是一直在變，而且缺少足夠多的第三方庫支持?？雌饋恚拖袷荝uby/Rails當(dāng)年的樣子。2.你有哪些性能優(yōu)化的方

29、法？（1） 減少http請求次數(shù)：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網(wǎng)頁Gzip，CDN托管，data緩存 ，圖片服務(wù)器。（2）前端模板 JS+數(shù)據(jù)，減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費，前端用變量保存AJAX請求結(jié)果，每次操作本地變量，不用請求，減少請求次數(shù)（3） 用innerHTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化javascript性能。（4） 當(dāng)需要設(shè)置的樣式很多時設(shè)置className而不是直接操作style。（5） 少用全局變量、緩存DOM節(jié)點查找的結(jié)果。減少IO讀取操作。（6） 避免使用CSS Expression（css表達(dá)式)又稱Dynamic properties(動態(tài)屬性)。（7） 圖片預(yù)加載，將樣式表放在頂部，將腳本放在底部 加上時間戳。（8） 避免在頁面的主體布局中使用table，table要等其中的內(nèi)容完全下載之后才會顯示出來，顯示div+css布局慢。對普通的網(wǎng)站有一個統(tǒng)一的思路，就是盡量向前端優(yōu)化、減少數(shù)據(jù)庫操作、減少磁