前端面試必知的50道題目彙總

1.XHTML和HTML有什麼區別

HTML是一種基本的WEB網頁設計語言,XHTML是一個基於XML的置標語言
最主要的不同:
XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關閉。
標籤名必須用小寫字母。
XHTML 文檔必須擁有根元素。
2.什麼是語義化的HTML?

直觀的認識標籤 對於搜索引擎的抓取有好處,用正確的標籤做正確的事情!
html語義化就是讓頁面的內容結構化,便於對瀏覽器、搜索引擎解析;
在沒有樣式CCS情況下也以一種文檔格式顯示,並且是容易閱讀的。搜索引擎的爬蟲依賴於標記來確定上下文和各個關鍵字的權重,利於 SEO。
使閱讀源代碼的人對網站更容易將網站分塊,便於閱讀維護理解。
3.常見的瀏覽器內核有哪些?
Trident內核:IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]Gecko內核:Netscape6及以上版本,FF,MozillaSuite/SeaMonkey等
Presto內核:Opera7及以上。      [Opera內核原爲:Presto,現爲:Blink;]Webkit內核:Safari,Chrome等。   [ Chrome的:Blink(WebKit的分支)]
4.HTML5有哪些新特性、移除了那些元素?如何處理HTML5新標籤的瀏覽器兼容問題?如何區分 HTML 和HTML5?

HTML5 現在已經不是 SGML 的子集,主要是關於圖像,位置,存儲,多任務等功能的增加。
繪畫 canvas
用於媒介回放的 video 和 audio 元素
本地離線存儲 localStorage 長期存儲數據,瀏覽器關閉後數據不丟失;
sessionStorage 的數據在瀏覽器關閉後自動刪除
語意化更好的內容元素,比如 article、footer、header、nav、section
表單控件,calendar、datetime、email、url、search
新的技術webworker, websockt, Geolocation
移除的元素
純表現的元素:basefont,big,center,font, s,strike,tt,u;
對可用性產生負面影響的元素:frame,frameset,noframes;
支持HTML5新標籤:
IE8/IE7/IE6支持通過document.createElement方法產生的標籤,
可以利用這一特性讓這些瀏覽器支持HTML5新標籤,
瀏覽器支持新標籤後,還需要添加標籤默認的樣式:
5.請描述一下 cookies,sessionStorage 和 localStorage 的區別?

cookie在瀏覽器和服務器間來回傳遞。 sessionStorage和localStorage不會
sessionStorage和localStorage的存儲空間更大;
sessionStorage和localStorage有更多豐富易用的接口;
sessionStorage和localStorage各自獨立的存儲空間;
6.如何實現瀏覽器內多個標籤頁之間的通信?

調用localstorge、cookies等本地存儲方式
7.HTML5 爲什麼只需要寫 !DOCTYPE HTMLHTML5 不基於 SGML,因此不需要對DTD進行引用,但是需要doctype來規範瀏覽器的行爲(讓瀏覽器按照它們應該的方式來運行);而HTML4.01基於SGML,所以需要對DTD進行引用,才能告知瀏覽器文檔所使用的文檔類型。
8.Doctype作用?標準模式與兼容模式各有什麼區別?

!DOCTYPE聲明位於位於HTML文檔中的第一行,處於html 標籤之前。告知瀏覽器的解析器用什麼文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現。
標準模式的排版 和JS運作模式都是以該瀏覽器支持的最高標準運行。在兼容模式中,頁面以寬鬆的向後兼容的方式顯示,模擬老式瀏覽器的行爲以防止站點無法工作。
9.Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式,區分它們有何意義?
用於聲明文檔使用那種規範(html/Xhtml)一般爲 嚴格 過度 基於框架的html文檔。
加入XMl聲明可觸發,解析方式更改爲IE5.5 擁有IE5.5的Bug。
10.請描述一下 cookies,sessionStorage 和 localStorage 的區別?

cookie在瀏覽器和服務器間來回傳遞。 sessionStorage和localStorage不會
sessionStorage和localStorage的存儲空間更大;
sessionStorage和localStorage有更多豐富易用的接口;
sessionStorage和localStorage各自獨立的存儲空間;
11.如何實現瀏覽器內多個標籤頁之間的通信?

調用localstorge、cookies等本地存儲方式

CSS相關問題

1.CSS實現垂直水平居中

一道經典的問題,實現方法有很多種,以下是其中一種實現:
HTML結構:

<div class="wrapper">
    <div class="content"></div>
</div>

CSS:

.wrapper{position:relative;}
    .content{
        background-color:#6699FF;
        width:200px;
        height:200px;
        position: absolute;        //父元素需要相對定位
        top: 50%;
        left: 50%;
        margin-top:-100px ;   //二分之一的height,width
        margin-left: -100px;
    }
2.display有哪些值?說明他們的作用。

block         塊類型。默認寬度爲父元素寬度,可設置寬高,換行顯示。
  none          缺省值。象行內元素類型一樣顯示。
  inline        行內元素類型。默認寬度爲內容寬度,不可設置寬高,同行顯示。
  inline-block  默認寬度爲內容寬度,可以設置寬高,同行顯示。
  list-item     象塊類型元素一樣顯示,並添加樣式列表標記。
  table         此元素會作爲塊級表格來顯示。
  inherit       規定應該從父元素繼承 display 屬性的值。
3.行內元素有哪些?塊級元素有哪些?CSS的盒模型?
塊級元素:div,p,h1,form,ul,li;
行內元素 : span>,a,label,input,img,strong,em;
CSS盒模型:內容,border ,margin,padding
4.CSS引入的方式有哪些? link和@import的區別是?
內聯 內嵌 外鏈 導入
區別 :同時加載
前者無兼容性,後者CSS2.1以下瀏覽器不支持
Link 支持使用javascript改變樣式,後者不可
5.CSS選擇符有哪些?哪些屬性可以繼承?優先級算法如何計算?內聯和important哪個優先級高?
標籤選擇符 類選擇符 id選擇符
繼承不如指定 Id>class>標籤選擇
後者優先級高
6.CSS清除浮動的幾種方法(至少兩種)

使用帶clear屬性的空元素
使用CSS的overflow屬性;
使用CSS的:after僞元素;
使用鄰接元素處理;
7.CSS居中(包括水平居中和垂直居中)

內聯元素居中方案
水平居中設置:
1.行內元素

設置 text-align:center;
2.Flex佈局

設置display:flex;justify-content:center;(靈活運用,支持Chroime,Firefox,IE9+)
垂直居中設置:
1.父元素高度確定的單行文本(內聯元素)

設置 height = line-height2.父元素高度確定的多行文本(內聯元素)

a:插入 table (插入方法和水平居中一樣),然後設置 vertical-align:middle;
b:先設置 display:table-cell 再設置 vertical-align:middle;
塊級元素居中方案
水平居中設置:
1.定寬塊狀元素
設置 左右 margin 值爲 auto;

2.不定寬塊狀元素

a:在元素外加入 table 標籤(完整的,包括 table、tbody、tr、td),該元素寫在 td 內,然後設置 margin 的值爲 auto;
b:給該元素設置 displa:inine 方法;
c:父元素設置 position:relative 和 left:50%,子元素設置 position:relative 和 left:50%;
垂直居中設置:

使用position:absolute(fixed),設置left、top、margin-left、margin-top的屬性;
利用position:fixed(absolute)屬性,margin:auto這個必須不要忘記了;
利用display:table-cell屬性使內容垂直居中;
使用css3的新屬性transform:translate(x,y)屬性;
使用:before元素;
8.在書寫高效 CSS 時會有哪些問題需要考慮?
reset。參照上題“描述下 “reset” CSS 文件的作用和使用它的好處”的答案。
規範命名。尤其對於沒有語義化的html標籤,例如div,所賦予的class值要特別注意。
抽取可重用的部件,注意層疊樣式表的“優先級”。

JS相關問題

1.談一談JavaScript作用域鏈
當執行一段JavaScript代碼(全局代碼或函數)時,JavaScript引擎會創建爲其創建一個作用域又稱爲執行上下文(Execution Context),在頁面加載後會首先創建一個全局的作用域,然後每執行一個函數,會建立一個對應的作用域,從而形成了一條作用域鏈。每個作用域都有一條對應的作用域鏈,鏈頭是全局作用域,鏈尾是當前函數作用域。

作用域鏈的作用是用於解析標識符,當函數被創建時(不是執行),會將thisarguments、命名參數和該函數中的所有局部變量添加到該當前作用域中,當JavaScript需要查找變量X的時候(這個過程稱爲變量解析),它首先會從作用域鏈中的鏈尾也就是當前作用域進行查找是否有X屬性,如果沒有找到就順着作用域鏈繼續查找,直到查找到鏈頭,也就是全局作用域鏈,仍未找到該變量的話,就認爲這段代碼的作用域鏈上不存在x變量,並拋出一個引用錯誤(ReferenceError)的異常。
2.如何理解JavaScript原型鏈
JavaScript中的每個對象都有一個prototype屬性,我們稱之爲原型,而原型的值也是一個對象,因此它也有自己的原型,這樣就串聯起來了一條原型鏈,原型鏈的鏈頭是object,它的prototype比較特殊,值爲null。

原型鏈的作用是用於對象繼承,函數A的原型屬性(prototype property)是一個對象,當這個函數被用作構造函數來創建實例時,該函數的原型屬性將被作爲原型賦值給所有對象實例,比如我們新建一個數組,數組的方法便從數組的原型上繼承而來。

當訪問對象的一個屬性時, 首先查找對象本身, 找到則返回; 若未找到, 則繼續查找其原型對象的屬性(如果還找不到實際上還會沿着原型鏈向上查找, 直至到根). 只要沒有被覆蓋的話, 對象原型的屬性就能在所有的實例中找到,若整個原型鏈未找到則返回undefined
3.JavaScript如何實現繼承?
構造繼承
原型繼承
實例繼承
拷貝繼承
原型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);//得到被繼承的屬性
4.JavaScript的typeof返回哪些數據類型

Object number function boolean underfind;
5.例舉3種強制類型轉換和2種隱式類型轉換?

強制(parseInt,parseFloat,number)隱式(== – ===);
6.split() join() 的區別

前者是切割成數組的形式,後者是將數組轉換成字符串
7.數組方法pop() push() unshift() shift()

Push()尾部添加 pop()尾部刪除
Unshift()頭部添加 shift()頭部刪除
8.IE和DOM事件流的區別
執行順序不一樣、
參數不一樣
事件加不加on
this指向問題
9.ajax請求的時候getpost方式的區別
一個在url後面 一個放在虛擬載體裏面
有大小限制
安全問題
應用不同 一個是論壇等只需要請求的,一個是類似修改密碼的
10.IE和標準下有哪些兼容性的寫法
Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target
11.ajax請求時,如何解釋json數據

使用eval parse,鑑於安全性考慮 使用parse更靠譜;
12.事件委託是什麼

讓利用事件冒泡的原理,讓自己的所觸發的事件,讓他的父元素代替執行!
13.閉包是什麼,有什麼特性,對頁面有什麼影響?簡要介紹你理解的閉包

閉包就是能夠讀取其他函數內部變量的函數

14.添加 刪除 替換 插入到某個接點的方法

obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild
15..”==”和“===”的不同

前者會自動轉換類型,後者不會
16.編寫一個b繼承a的方法

function A(name){
    this.name = name;
    this.sayHello = function(){alert(this.name+” say Hello!”);};
}
function B(name,id){
    this.temp = A;
    this.temp(name);        //相當於new A();
    delete this.temp;       
     this.id = id;   
    this.checkId = function(ID){alert(this.id==ID)};
}
17.如何阻止事件冒泡和默認事件

function stopBubble(e)
{
    if (e && e.stopPropagation)
        e.stopPropagation()
    else
        window.event.cancelBubble=true
}
return false
18.下面程序執行後彈出什麼樣的結果?

function fn() {
    this.a = 0;
    this.b = function() {
        alert(this.a)
    }
}
fn.prototype = {
    b: function() {
        this.a = 20;
        alert(this.a);
    },
    c: function() {
        this.a = 30;
        alert(this.a);
    }
}
var myfn = new fn();
myfn.b();
myfn.c();
19.談談This對象的理解。

this是js的一個關鍵字,隨着函數使用場合不同,this的值會發生變化。
但是有一個總原則,那就是this指的是調用函數的那個對象。
this一般情況下:是全局對象Global。 作爲方法調用,那麼this就是指這個對象
20.下面程序的結果

function fun(n,o) {
  console.log(o)
  return {
    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);

//答案:

//a: undefined,0,0,0
//b: undefined,0,1,2
//c: undefined,0,1,1
21.下面程序的輸出結果

var name = 'World!';
(function () {
    if (typeof name === 'undefined') {
        var name = 'Jack';
        console.log('Goodbye ' + name);
    } else {
        console.log('Hello ' + name);
    }
})();
22.瞭解Node麼?Node的使用場景都有哪些?

高併發、聊天、實時消息推送
23.介紹下你最常用的一款框架

jquery,rn,angular等;
24.對於前端自動化構建工具有了解嗎?簡單介紹一下

Gulp,Grunt等;
25.說一下什麼是JavaScript的同源策略?

一段腳本只能讀取來自於同一來源的窗口和文檔的屬性,這裏的同一來源指的是主機名、協議和端口號的組合

代碼相關的問題

1.說說最近最流行的一些東西吧?常去哪些網站?

Node.js、MVVM、React-native,Angular,Weex等
CSDN,Segmentfault,博客園,掘金,Stackoverflow,伯樂在線等
2.如果今年你打算熟練掌握一項新技術,那會是什麼?

via開發單頁webapp的技術。
SAP能夠是頁面與頁面之間無縫連接,避免出現白頁,且帶有動態效果,提高用戶體驗。同時SAP,有JavaScript渲染頁面,然後在從服務器獲取小量的數據顯示,如此反覆,請求的數據無需要服務器處理,減少服務器負荷。
SAP對技術要求高。要考慮首屏加載事件過長;動畫效果要考慮低端手機;垃圾收集,需要自己釋放資源,避免頁面變卡。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章