1、什么是Html語義化？
語義化 div ==> section，div ==> nav(語言自己能解釋)， input/(關閉符號) br/
相對于樣式標記，如 i（樣式）/ em（語義）；b（樣式）/ strong（語義）;
為什么需要使用語義化標記？
1、HTML本身就是語義化標記語言，使用符合語義的標記，才談得上正確使用HTML
2、使用合適的標記，可以合理應用瀏覽器默認樣式
3、有利于SEO（搜索引擎的查詢）
4、使用合適的標記是確保可訪問性的一個前提
5、更好的可維護性
有哪些方法有利于SEO
漸進增強；
關鍵詞；
實行交換鏈接;
注冊一個經過優化了的關鍵字域名;
保持網站結構簡單
保持你的網站結構簡單，網站的瀏覽者就可以很容易的從一個頁面跳到另一個頁面。
同時，你的網站對搜索引擎越友好，搜索引擎蜘蛛就越容易抓取你網站內容。
2、行內元素、行內塊元素、塊級元素分別有哪些標簽？分別列舉 3 個以上(越多越好)
塊級元素 div、p、h1-h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5新增的header、section、aside、footer
行內元素 span、label、a、b、lable、input、abbr（縮寫）、em（強調）、big、small、cite（引用）、strong、i（斜體）、q（短引用）、textarea、select、sub、sup，u（下劃線）
行內塊元素 button、img、video、input、textarea
塊級元素新開啟一行（即使是設置了width屬性也是獨占一行）、盡可能撐滿父級元素的寬度，可以設置width和height屬性；table元素瀏覽器默認的display屬性為table。
相鄰的行內元素不換行，寬度即為內容的寬度、padding的4個方向都有效(但上下兩個方向不影響布局)、margin只有水平方向有效、不可以設置width和height屬性。
行內塊元素表現其實和塊元素一樣，只是可以相互挨著；能設置4個方向的margin;
3、請問以下代碼的 "標題" 是什么顏色的？
1.head?span{color:red;}?#head?span{color:blue;}?#title{color:yellow;}?span{color:green;}<br>
2<div?id="head"?class="head"><span?id="title">標題</span></div>??<br>
blue
選擇器包含id嗎(每個id加1分)；選擇器包含類或偽類嗎(每個類或偽類加1分);選擇器包含元素名嗎(一個元素名加一分)
4.請寫出你知道的清除浮動的方法?
1.父級div定義height;
2.最后一個浮動元素后加空div標簽 并添加樣式clear:both;
3.包含浮動元素的父標簽添加樣式 overflow 為 hidden或auto。(創建可以管理浮動元素的BFC)
通過設置父元素overflow值設置為hidden；在IE6中還需要觸發 hasLayout ，例如 zoom：1；
4.父元素也設置浮動
5.父元素設置display:table;
6.clearfix；如果你的頁面使用bootstrap框架，引入css文件，給父元素添加clearfix便可以清除浮動，這也是平時工作中最常用也是最受程序員喜歡的一種方法，只需添加一個類便可;
5.定位方式有幾種？分別是相對什么元素定位的？
1.static 2.float 3.relative 4.absolute 5.fixed
1.static定位(普通流定位) -------------- 默認定位
2.float定位(浮動定位) 例：float:left;
有兩個取值：left(左浮動)和right(右浮動)。浮動元素會在沒有浮動元素的上方，效果上看是遮擋住了沒有浮動的元素，
有float樣式規則的元素是脫離文檔流的，它的父元素的高度并不能有它撐開。
3.relative定位(相對定位)
相對定位最大的作用是為了實現某個元素相對于本元素的左上角絕對定位，本元素需要設置position為relative。
4.absolute定位(絕對定位)
相對于祖代中有relative(相對定位)并且離本元素層級關系上是最近的元素的左上角進行定位，如果在祖代元素中沒有有relative定位的，就默認相對于body進行定位。
注意：當同時有浮動元素和絕對定位元素出現并且浮動元素沒有設置z-index，浮動元素是壓在絕對定位元素上的，即離用戶的視線更近。
5.fixed
6.請實現右圖的設計
JavaScript
1.JavaScript 的數據類型有哪些？如何準確檢測數據類型？
基本數據類型, 引用數據類型
1.typeof
1typeof?1;//'number'
2typeof?true;//'boolean'
3typeof?'';//'string'
4typeof?undefined;//'undefined'
5typeof?function?(){};//'function'
typeof是基本數據類型檢測利器(但是不包括null) // "object"
2.instanceof是檢測引用數據類型，而不能檢測引用數據類型
1var?arr?=?[];
2arr?instanceof?Array;//true
但是只要是在原型鏈上出現過構造函數都會返回true，所以這個檢測結果不很準確
1arr?instanceof?Object;//true
2Array.isArray(a)?//?true?準確
3.constructor 構造函數
1var?arr?=?[];
2console.log(arr.constructor?===?Array);??//?true
3console.log(arr.constructor?==?Object);??//?false
4var?num?=?1;
5console.log(num.constructor?===?Number);?//?true
局限性：若把類的原型進行重寫，覆蓋掉，檢測結果就不準確
4.Object.prototype.toString.call();
在Object基本類定義的這個toString()方法，是用來檢測數據類型的；
跟字符串、數字、布爾等原型上定義的toString()方法基本用法都是轉換字符串的。
1console.log(Object.prototype.toString.call(1));????????????????//?[object?Number]
2console.log(Object.prototype.toString.call(''));???????????????//?[object?String]
3console.log(Object.prototype.toString.call(true));?????????????//?[object?Boolean]
4console.log(Object.prototype.toString.call(null));?????????????//?[object?Null]
5console.log(Object.prototype.toString.call(undefined));????????//?[object?Undefined]
6console.log(Object.prototype.toString.call([]));???????????????//?[object?Array]
7console.log(Object.prototype.toString.call({}));???????????????//?[object?Object]
8console.log(Object.prototype.toString.call(/^$/));?????????????//?[object?RegExp]
9console.log(Object.prototype.toString.call((function?()?{})));?//?[object?Function]
2.以下代碼執行結果分別是什么？
11)?3?+?'3'????????????????????//?'33'
22)?"23"?>?"3"?????????????????//?false(字符串比較規則)???"23"?>?3?//?true????
44)?"abc123".slice(2,?-1)??????//?"c12"?(負數就是倒數第幾個，這里是倒數第一個，但不包含);?"abc123".slice(2,?0)//'';?"abc123".slice(2,?1)//'';
55)?"abc123".substring(2,?-1)??//?"ab";??substring()方法會把所有負值參數都轉換為0;?substring(2,?0)?==?substring(0,?2)
slice 和 substring 第二個數都不包含
3 以下代碼執行結果是什么？
11)?
2var?foo?=?1,?bar?=?2,?j,?test
3test?=?function(j)?{
4????j?=?5;
5????var?bar?=?5;
6????foo?=?5;
7}
8test(10);
9console.log(foo);?//?5
10console.log(bar);?//?2
11console.log(j);???//?undefined?!!!
JavaScript 中局部變量只可能通過兩種方式聲明，一個是作為函數參數，另一個是通過 var 關鍵字聲明。
使用var聲明的變量會自動被添加到最接近的環境中。在函數內部，最接近的環境就是函數的局部環境;
bar 和 j（函數參數） 是函數 test 內的局部變量，而對 foo 的賦值將會覆蓋全局作用域內的同名變量
12)
2for(var?i=0;i<10;i++){
3????window.setTimeout(function(){
4????????console.log(i);?//?10個10(后)
5????},?100);
6}
7console.log(i);?//?10?(先)
8
93)
10var?length?=?10;
11function?fn(){
12????alert(this.length);
13}
14
15var?obj?=?{
16????length:5,
17????method:function(){
18????????fn();
19????}
20}
21
22obj.method()?//?10
23
244)
25function?foo(){this.value?=?42;};
26foo.prototype?=?{method:function(){return?true;}};
27function?bar(){
28????var?value?=?1;
29????return?{method:function(){return?value;}};
30};
31foo.prototype?=?new?bar();???????????????????//?new?bar();由于return?是對象類型，則返回該對象；?foo.prototype?=?{method:function(){return?value;}}?相當于重寫了原型！！！
32console.log(foo.prototype.constructor);??????//?Object?
33console.log(foo.prototype?instanceof?bar)????//?false??正確應該是?foo.prototype?instanceof?Object?//?true
34var?test?=?new?foo();????????????????????????//?由于是重寫原型之后的實例，因此與重寫的原型進行連接
35console.log(test?instanceof?foo)?????????????//?true
36console.log(test?instanceof?bar)?????????????//?false
37console.log(test.method())???????????????????//?1;?與重寫的原型進行連接
在構造函數中return基本類型，不會影響構造函數的值；而return對象類型，則會替代構造函數返回該對象
4、如何對數組進行重排？如： [2, [1, 2], 3, "2", "a", "b", "a", [1, 2]]，重排后[2, [1,2], 3, "2", "a", b]
1var?arr?=?[2,?[1,?2],?3,?"2",?"a",?"b",?"a",?[1,?2]];
2var?arr1?=?[],
3????len?=?arr.length;
4for(let?i?=?0;?i?<?len;?i++)?{
5????arr1.push(JSON.stringify(arr[i]));
6}
7
8var?arr2?=?Array.from(new?Set(arr1)),
9????length?=?arr2.length,
10????arr3?=?[];
11for(let?i?=?0;?i?<?length;?i++)?{
12????arr3.push(JSON.parse(arr2[i]));
13}
14
15arr3?//?[2,?[1,?2],?3,?"2",?"a",?"b"]
16//?[1,?2]?!==?[1,?2]
5.要給下面所有 li 元素綁定 click 事件，在鼠標點擊每個 li 的時候 alert 該 li 里面的內容；且在鼠標離開外部 ul 元素
范圍的時候彈出一個 alert 提示。（實現時請注意代碼執行效率即瀏覽器兼容性、不要使用現成的框架庫，用原生 js 編寫完成)
1<ul?id="ul">
2????<li>內容1</li>
3????......此處省略?1000+?個對象(注：不要使用循環綁定，如果使用循環綁定?1000+?的綁定事件會很慢)......
4????<li>內容n</li>
5<ul>
6//?委托
7var?ul?=?document.getElementById('ul');
8var?items?=?ul.querySelectorAll('li');
9ul.addEventListener('click',?evt=>{
10??var?self?=?evt.target;
11??var?inx?=?Array.from(items).indexOf(self);
12??console.log(items[inx].innerHTML);
13})
14//?另一種實現方式就是閉包；循環綁定
15ul.addEventListener('mouseleave',?()=>{?//?使用mouseleave而不是mouseout
16????alert('離開組件');
17})
綜合
1.請從編碼和項目實施兩個角度談談對JS的優化
1.編碼
減少DOM訪問,避免全局查找；使用事件代理，而不是綁定在每一個子元素上
避免不必要的屬性查找(提取)
避免 with 語句（with語句會創建自己的作用域，因此會增加其中執行的代碼的作用域鏈長度）
優化循環
最小化語句數
使用數組和對象字面量而不是構造函數
2.項目實施
減少HTTP請求
打包壓縮
本地緩存
將腳本放到頁面底部(減少首屏加載時間)
預加載
本地緩存哪幾種方式，優勢劣勢？
2.請談談如何對 CSS 性能方面做優化
1.繼承
2.集合寫 border{solid 1px black};
3.壓縮工具
4.高性能選擇器
3.頁面圖片加載太多，一般如何處理？請寫出你的代碼？如何延遲和預先加載？
懶加載;
懶加載原理
將資源路徑賦值到img標簽的data-xx屬性中，而非直接賦值在src屬性
持續判斷圖片是否在用戶當前窗口的可視范圍內，從而動態將data-xx的值(url)賦值到src里去
1//圖片懶加載類<br>
2class?LazyLoad?{
3????constructor(selector)?{
4????????this.imglis?=?Array.from(document.querySelectorAll(selector));
5????????this.init();?//?初始化
6????}
7
8????//?判斷圖片是否需要加載
9????load()?{
10????????let?imglis?=?this.imglis;
11????????for?(let?i?=?imglis.length;?i--;)?{
12????????????if(this.canSeen(imglis[i]))?{
13????????????????this.show(imglis[i]);
14????????????????this.del(i);
15????????????}
16????????}
17????}???
18
19????//?判斷圖片是否在瀏覽器可視范圍內
20????canSeen(el)?{
21????????let?bound?=?el.getBoundingClientRect();??//?元素相對于視窗的位置集合；有top,?right,?bottom,?left等等屬性
22????????let?clientHeight?=?window.innerHeight;
23????????return?bound.top?<=?clientHeight?-?200;??//?為了看效果，加懶加載的圖片提前
24????}
25
26????//?顯示圖片
27????show(el)?{
28????????let?src?=el.getAttribute('data-src');
29????????el.src?=?src;
30????}
31
32????//?移除imglis里面已經加載的圖片(避免重復判斷,減少開銷)
33????del(idx)?{
34????????this.imglis.splice(idx,?1);???????????????????
35????}
36
37????//?當瀏覽器滾動的時候，繼續判斷(持續運行load)
38????bindEvent()?{
39????????window.addEventListener('scroll',?()=>{
40????????????this.load();
41????????})
42????}
43
44????//?初始化
45????init()?{?
46????????this.load();
47????????this.bindEvent();
48????}
49}
50
51//?實例化對象(以懶加載的圖片類為選擇參數)
52const?lazy?=?new?LazyLoad('.lazyload');
