新浪前端面試

時間 2019-11-09

原文原文鏈接

一、什麼是Html語義化？

語義化 div ==> section，div ==> nav(語言本身能解釋)， input/(關閉符號) br/

相對於樣式標記，如 i（樣式）/ em（語義）；b（樣式）/ strong（語義）;javascript

爲何須要使用語義化標記？

一、HTML自己就是語義化標記語言，使用符合語義的標記，才談得上正確使用HTML

二、使用合適的標記，能夠合理應用瀏覽器默認樣式

三、有利於SEO（搜索引擎的查詢）

四、使用合適的標記是確保可訪問性的一個前提

五、更好的可維護性php

有哪些方法有利於SEO

漸進加強；

關鍵詞；

實行交換連接;

註冊一個通過優化了的關鍵字域名;

保持網站結構簡單

保持你的網站結構簡單，網站的瀏覽者就能夠很容易的從一個頁面跳到另外一個頁面。

同時，你的網站對搜索引擎越友好，搜索引擎蜘蛛就越容易抓取你網站內容。css

二、行內元素、行內塊元素、塊級元素分別有哪些標籤？分別列舉 3 個以上(越多越好)

塊級元素 div、p、h1-h六、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、textareahtml

塊級元素新開啓一行（即便是設置了width屬性也是獨佔一行）、儘量撐滿父級元素的寬度，能夠設置width和height屬性；table元素瀏覽器默認的display屬性爲table。

相鄰的行內元素不換行，寬度即爲內容的寬度、padding的4個方向都有效(但上下兩個方向不影響佈局)、margin只有水平方向有效、不能夠設置width和height屬性。

行內塊元素表現其實和塊元素同樣，只是能夠相互挨着；能設置4個方向的margin;java

三、請問如下代碼的 "標題" 是什麼顏色的？

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即可以清除浮動，這也是平時工做中最經常使用也是最受程序員喜歡的一種方法，只需添加一個類即可;bootstrap

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對象類型，則會替代構造函數返回該對象

四、如何對數組進行重排？如： [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');