關於web前端面試題系列之必考面試題(面試官總結)

1.截取字符串abcdefg的efg

alert('abcdefg'.substring(4));

2.判斷一個字符串中出現次數最多的字符,統計這個次數
/*var str = 'asdfssaaasasasasaa';
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 iMax = 0;
var iIndex = '';
for(var i in json){
        if(json[i]>iMax){
                iMax = json[i];
                iIndex = i;
        }
}
alert('出現次數最多的是:'+iIndex+'出現'+iMax+'次');*/

4,IE與FF腳本兼容性問題
/*obj.addEventListener(sEv, fn, false);
obj.attachEvent('on'+sEv,fn);
detachevet
removeEventListener
DOMContentLoaded
onreadystatechange  complete
DOMMouseScroll FF
onmousewheel   非FF
event.wheelDelta 上滾120 下-120
event.detail     上滾-3   下3  
obj.getCurrentStyle[attr]
getComputedStyle(obj,false)[attr]
XMLHttpRequest
ActiveXObject('Mircorsoft.XMLHttp')
FF本地能設置讀取cookie 其他不行
event  ev
事件源
srcElement||target
toElement||relatedTarget
obj.setCapture();只有ie認
obj.releaseCapture();*/

5,規避javascript多人開發函數重名問題
/*命名空間
封閉空間
js模塊化mvc(數據層、表現層、控制層)
seajs
變量轉換成對象的屬性
對象化*/

6,javascript面向對象中繼承實現
/*function Person(name){
        this.name = name;
}

Person.prototype.showName = function(){
        alert(this.name);
}

function Worker(name, job){
        Person.apply(this,arguments)
        this.job = job;
}
for(var i in Person.prototype){
        Worker.prototype = Person.prototype;
}
new Worker('sl', 'coders').showName();*/

7,FF下面實現outerHTML
/*var oDiv = document.createElement('div');
var oDiv1 = document.getElementById('div1');
var oWarp = document.getElementById('warp');

oWarp.insertBefore(oDiv, oDiv1);
oDiv.appendChild(oDiv1);
var sOut = oDiv.innerHTML;
oWarp.insertBefore(oDiv1, oDiv);
oWarp.removeChild(oDiv);
alert(sOut);*/


8,編寫一個方法 求一個字符串的字節長度;
//假設一箇中文佔兩個字節
/*var str = '22兩是';

alert(getStrlen(str))

function getStrlen(str){
        var json = {len:0};
        var re = /[\u4e00-\u9fa5]/;
        for (var i = 0; i < str.length; i++) {
                if(re.test(str.charAt(i))){
                        json['len']++;
                }
        };
        return json['len']+str.length;
}*/

9,編寫一個方法 去掉一個數組的重複元素
/*var arr = [1,2,3,1,43,12,12,1];
var json = {};
var arr2 = [];
for (var i = 0; i < arr.length; i++) {
        if(!json[arr[i]]){
                json[arr[i]] = true;
        }else{
                json[arr[i]] = false;
        }

        if(json[arr[i]]){
                arr2.push(arr[i]);
        }
};

for (var i = 0; i < arr.length; i++) {
        if(!aa(arr[i], arr2)){
                arr2.push(arr[i])
        }
};
function aa(obj, arr){
        for (var i = 0; i < arr.length; i++) {
                if(arr[i] == obj) return true;
                else return false;
        };
}
alert(arr2)*/

10,寫出3個使用this的典型應用
/*
事件: 如onclick  this->發生事件的對象
構造函數          this->new 出來的object
call/apply        改變this*/

11、如何深度克隆
/*var arr = [1,2,43];
var json = {a:6,b:4,c:[1,2,3]};
var str = 'sdfsdf';

var json2 = clone(json);

alert(json['c'])
function clone(obj){
        var oNew = new obj.constructor(obj.valueOf());
        if(obj.constructor == Object){
                for(var i in obj){
                        oNew[i] = obj[i];
                        if(typeof(oNew[i]) == 'object'){
                                clone(oNew[i]);
                        }
                }
        }
        return oNew;
}*/

12,JavaScript中如何檢測一個變量是一個String類型?請寫出函數實現
// typeof(obj) == 'string'
// obj.constructor == String;

13,網頁中實現一個計算當年還剩多少時間的倒數計時程序,要求網頁上實時動態顯示“××年還剩××天××時××分××秒”
/*var oDate = new Date();
var oYear = oDate.getFullYear();

var oNewDate = new Date();
oNewDate.setFullYear(oYear, 11, 31, 23, 59, 59);
var iTime = oNewDate.getTime()-oDate.getTime();

var iS = iTime/1000;
var iM = oNewDate.getMonth()-oDate.getMonth();
var iDate =iS*/

14. 請解釋一下什麼是語義化的HTML。
//內容使用特定標籤,通過標籤就能大概瞭解整體頁面的佈局分佈

15. 你如何對網站的文件和資源進行優化?

16. 爲什麼利用多個域名來存儲網站資源會更有效?
//確保用戶在不同地區能用最快的速度打開網站,其中某個域名崩潰用戶也能通過其他鬱悶訪問網站

17.請說出三種減低頁面加載時間的方法
/*1、壓縮css、js文件
2、合併js、css文件,減少http請求
3、外部js、css文件放在最底下
4、減少dom操作,儘可能用變量替代不必要的dom操作*/

18.什麼是FOUC?你如何來避免FOUC?
/*由於css引入使用了@import 或者存在多個style標籤以及css文件在頁面底部引入使得css文件加載在html之後導致頁面閃爍、花屏
用link加載css文件,放在head標籤裏面*/

19.文檔類型的作用是什麼?你知道多少種文檔類型?
/*影響瀏覽器對html代碼的編譯渲染
html2.0
xHtml
html5*/

20.瀏覽器標準模式和怪異模式之間的區別是什麼?
//盒模型解釋不同

21.* 你使用過那些Javascript庫?
//jquery seajs yui

22.哈希表
//具有散列(映射)特性的數據模型

23.閉包
//子函數能被外部調用到,則該作用連上的所有變量都會被保存下來。

24.請解釋什麼是Javascript的模塊模式,並舉出實用實例。
/*js模塊化mvc(數據層、表現層、控制層)
seajs
命名空間*/

25.你如何組織自己的代碼?是使用模塊模式,還是使用經典繼承的方法?
/*對內:模塊模式
對外:繼承*/

26* 你如何優化自己的代碼?
/*代碼重用
避免全局變量(命名空間,封閉空間,模塊化mvc..)
拆分函數避免函數過於臃腫
註釋
*/

27.你能解釋一下JavaScript中的繼承是如何工作的嗎?
/*子構造函數中執行父構造函數,並用call\apply改變this
克隆父構造函數原型上的方法*/

28.useraget.nav

29.請儘可能詳盡的解釋AJAX的工作原理。
/*創建ajax對象(XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp))
判斷數據傳輸方式(GET/POST)
打開鏈接 open()
發送 send()
當ajax對象完成第四步(onreadystatechange)數據接收完成,判斷http響應狀態(status)200-300之間或者304(緩存)執行回調函數*/

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

31.Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式,區分它們有何意義? 
用於聲明文檔使用那種規範(html/Xhtml)一般爲 嚴格 過度 基於框架的html文檔
加入XMl聲明可觸發,解析方式更改爲IE5.5 擁有IE5.5的bug

32.行內元素有哪些?塊級元素有哪些?CSS的盒模型?
塊級元素:div p h1 h2 h3 h4 form ul
行內元素: a b br i span input select
Css盒模型:內容,border ,margin,padding

33..CSS引入的方式有哪些? link和@import的區別是?
內聯 內嵌 外鏈 導入
區別 :同時加載
前者無兼容性,後者CSS2.1以下瀏覽器不支持
Link 支持使用javascript改變樣式,後者不可

34.CSS選擇符有哪些?哪些屬性可以繼承?優先級算法如何計算?內聯和important哪個優先級高?
標籤選擇符 類選擇符 id選擇符
繼承不如指定 Id>class>標籤選擇
後者優先級高

35.前端頁面有哪三層構成,分別是什麼?作用是什麼?
結構層 Html 表示層 CSS 行爲層 js

36.寫出幾種IE6 BUG的解決方法
1.雙邊距BUG float引起的 使用display
2.3像素問題 使用float引起的 使用dislpay:inline -3px
3.超鏈接hover 點擊後失效 使用正確的書寫順序 link visited hover active
4.Ie z-index問題 給父級添加position:relative
5.Png 透明 使用js代碼 改
6.Min-height 最小高度 !Important 解決’
7.select 在ie6下遮蓋 使用iframe嵌套
8.爲什麼沒有辦法定義1px左右的寬度容器(IE6默認的行高造成的,使用over:hidden,zoom:0.08 line-height:1px)


37.瀏覽器標準模式和怪異模式之間的區別是什麼?
盒子模型 渲染模式的不同
使用 window.top.document.compatMode 可顯示爲什麼模式

以上都是我經歷以來和老師同時提供的一些問題及答案,可能答案有一些不全面的地方,希望大家提供意見。也希望對大家有所幫助!!!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章