Web前端開發筆試題和面試題答案(四)

　　25，請設計一套方案，用于確保頁面中JS加載完全。

　　var n = document.createElement("script");

　　n.type = "text/javascript";

　　//以上省略部分代碼

　　//ie支持script的readystatechange屬性(IE support the readystatechange event for script and css nodes)

　　if(ua.ie){

　　n.onreadystatechange = function(){

　　var rs = this.readyState;

　　if('loaded' === rs || 'complete'===rs){

　　n.onreadystatechange = null;

　　f(id,url); //回調函數

　　}

　　};

　　//省略部分代碼

　　//safari 3.x supports the load event for script nodes(DOM2)

　　n.addEventListener('load',function(){

　　f(id,url);

　　});

　　//firefox and opera support onload(but not dom2 in ff) handlers for

　　//script nodes. opera, but no ff, support the onload event for link

　　//nodes.

　　}else{

　　n.onload = function(){

　　f(id,url);

　　};

　　}

　　26，js中如何定義class,如何擴展prototype?

　　Ele.className = “”; //在css中定義，形式如下：. {…}

　　A.prototype.B = C;

　　A是某個構造函數的名字

　　B是這個構造函數的屬性

　　C是想要定義的屬性的值

　　27，如何添加html元素的事件,有幾種方法.

　　(1) 為HTML元素的事件屬性賦值

　　(2) 在JS中使用ele.on = function() {…}

　　(3) 使用DOM2的添加事件的方法 addEventListener或attachEvent

　　28，documen.write和 innerHTML的區別

　　document.write只能重繪整個頁面

　　innerHTML可以重繪頁面的一部分

　　29，多瀏覽器檢測通過什么?

　　(1) navigator.userAgent

　　(2) 不同瀏覽器的特性，如addEventListener

　　30，js的基礎對象有那些, window和document的常用的方法和屬性列出來

　　String,Number,Boolean

　　Window:

　　方法：setInterval,setTimeout,clearInterval,clearTimeout,alert,confirm,open

　　屬性：name,parent,screenLeft,screenTop,self,top,status

　　Document

　　方法：createElement,execCommand,getElementById,getElementsByName,getElementByTagName,write,writeln

　　屬性：cookie,doctype,domain,documentElement,readyState,URL,

　　31，前端開發的優化問題

　　(1) 減少http請求次數：css spirit,data uri

　　(2) JS，CSS源碼壓縮

　　(3) 前端模板 JS+數據，減少由于HTML標簽導致的帶寬浪費，前端用變量保存AJAX請求結果，每次操作本地變量，不用請求，減少請求次數

　　(4) 用innerHTML代替DOM操作，減少DOM操作次數，優化javascript性能

　　(5) 用setTimeout來避免頁面失去響應

　　(6) 用hash-table來優化查找

　　(7) 當需要設置的樣式很多時設置className而不是直接操作style

　　(8) 少用全局變量

　　(9) 緩存DOM節點查找的結果

　　(10) 避免使用CSS Expression

　　(11) 圖片預載

　　(12) 避免在頁面的主體布局中使用table，table要等其中的內容完全下載之后才會顯示出來，顯示比span+css布局慢

　　32，如何控制網頁在網絡傳輸過程中的數據量

　　啟用GZIP壓縮

　　保持良好的編程慣，避免重復的CSS，JavaScript代碼，多余的HTML標簽和屬性

　　33，Flash、Ajax各自的優缺點，在使用中如何取舍?

　　Ajax的優勢

　　(1) 可搜索型

　　(2) 開放性

　　(3) 費用

　　(4) 易用性

　　(5) 易于開發

　　Flash的優勢

　　(1) 多媒體處理

　　(2) 兼容性

　　(3) 矢量圖形 比SVG，Canvas優勢大很多

　　(4) 客戶端資源調度，比如麥克風，攝像頭