最近想着跳槽，但面試的邀約不多，內心有點煩躁。梳理梳理心情，跳槽季競爭也大，努力做好自己...
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壓縮）
2.刪除js、css、html文件的注釋，回車符，以及無效字節
3.javascript放置網頁底部，避免阻塞下載
4.CSS放到header中，避免白屏
5.合並JS和CSS；壓縮JS和CSS；
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>
效果：
30.經常遇到CSS的兼容性有哪些？原因，解決方法是什么？
參考前一篇15題
31.為什么要初始化CSS樣式
防止不同瀏覽器，對標簽的默認樣式設置不同...