H5前端面試題及答案（2）

時間 2019-11-12

標籤 h5 端面試題答案简体版

原文原文鏈接

最近想着跳槽，但面試的邀約很少，心裏有點煩躁。梳理梳理心情，跳槽季競爭也大，努力作好本身...javascript

21.請設計一套方案，用於確保頁面中js加載徹底。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>alert標籤名</title>
</head>
<body>
    <script>
    //加載完成後執行回調
    function loadScript(url, callback){
        var script = document.createElement("script")
        script.type = "text/javascript";
        if (script.readyState){ //IE
            script.onreadystatechange = function(){
                if (script.readyState == "loaded" || script.readyState == "complete"){
                    script.onreadystatechange = null;
                    callback();
                }
            };
        } else { //Others: Firefox, Safari, Chrome, and Opera
            script.onload = function(){
                callback();
            };
        }
        script.src = url;
        document.body.appendChild(script);
    }

    loadScript('http://www.taojiaqu.com/resource/public/jquery/jquery-1.11.2.min.js',function(){
        alert('ok');
    })
    </script>
</body>
</html>

22.請優化某頁面的加載速度。

1.JS、CSS、HTML作gzip壓縮（不要對圖片進行Gzip壓縮）css

2.刪除js、css、html文件的註釋，回車符，以及無效字節html

3.javascript放置網頁底部，避免阻塞下載java

4.CSS放到header中，避免白屏jquery

5.合併JS和CSS；壓縮JS和CSS；css3

6.優化緩存：對沒有變化的css、js，圖片等網頁元素，直接利用客戶端的瀏覽器緩存讀取來有效減小http請求數。面試

6.經過增長expires header（給文件加上關於過時時間的header報文）能夠告訴瀏覽器，那些網頁元素能夠緩存和緩存多長時間。正則表達式

7.採用CSS sprites（CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中）技術來實現。算法

8.把腳本和圖片放在不一樣的服務器和域名，作成並行下載。瀏覽器

9.利用H5的緩存技術

23.對 string 對象進行擴展，使其具備刪除先後空格的方法。

1.用prototype添加方法

String.prototype.trim=function(){
    return this.replace(/(^\s*)|(\s*$)/g, "");
}

2.利用 substring() 函數

String.prototype.deletSpace = function(){  
    var str = this;  //提取須要操做的字符串  
    while(str[0] == " "){  //刪除前面的空格  
        str = str.substring(1);   
    }  
    while(str[str.length - 1] == " "){  //刪除後面的空格  
        str = str.substring(0,str.length-1);  
    }  
    return str;  
}

方法仍是有的，歡迎舉例

24.完成一個正則表達式，驗證用戶是否輸入正確的身份證號碼。

var string='35021119920102353X';
var stringExp=new RegExp(/^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/);
alert(stringExp.test(string)); //true

//15位或18位，若是是15位，必需全是數字
//若是是18位，最後一位能夠是數字或字母Xx，其他必需是數字

25.介紹一下CSS的盒子模型。

當IE6~8處於怪異模式下就會使用IE盒子模型，不然將使用W3C標準盒子模型

26.CSS選擇符有哪些？哪些屬性能夠繼承？優先級算法如何計算？CSS3新增僞類有哪些？

哪些元素可繼承（網站找的，供參考；大體經常使用的都有了）

不可繼承的：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi。

全部元素可繼承：visibility和cursor。

內聯元素可繼承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction。

終端塊狀元素可繼承：text-indent和text-align。

列表元素可繼承：list-style、list-style-type、list-style-position、list-style-image。

表格元素可繼承：border-collapse

優先級算法

1.選擇器都有一個權值，權值越大越優先；

2.當權值相等時，後出現的樣式表設置要優於先出現的樣式表設置；

3.創做者的規則高於瀏覽者：即網頁編寫者設置的CSS 樣式的優先權高於瀏覽器所設置的樣式；

4.繼承的CSS 樣式不如後來指定的CSS 樣式；

5.在同一組屬性設置中標有「!important」規則的優先級最大；

css3僞類：

27.如何居中 DIV ?如何居中一個浮動元素？

//絕對定位，負邊距（這種方式實際項目中不能夠）
.div{width:200px;height: 200px;position:absolute;left:50%;top:50%;margin:-100px 0 0 -100px}

//父元素和子元素同時左浮動，而後父元素相對左移動50%，再而後子元素相對右移動50%，或者子元素相對左移動-50%也就能夠了
.div{position: relative;left:50%;float: left;}
.con{width:200px;height: 200px;float:left;position:relative;right:50%;background: #000}

<div class="div"><div class="con"></div></div>

28.CSS3有哪些新特性？

新的選擇器：上方題目有例子

特效：圓角，陰影，漸變，背景，邊框背景，元素變形效果，動畫，過渡

29.一個滿屏品字佈局如何設計？

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>alert標籤名</title>
    <style>*{margin:0;padding:0}
    .top{position: absolute;top:0;bottom: 50%;background:red;width: 100%;}
    .con{position: absolute;top:50%;bottom: 0;width: 100%;}
    .left{position: absolute;left:0;top:0;height: 100%;width: 50%;background: #000}
    .right{position: absolute;right:0;top:0;height: 100%;width: 50%;background: yellow}
    </style>

</head>
<body>
    <div class="top"></div>
    <div class="con">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>