1、什么是Html語(yǔ)義化？

語(yǔ)義化 div ==> section，div ==> nav(語(yǔ)言自己能解釋)， input/(關(guān)閉符號(hào)) br/

相對(duì)于樣式標(biāo)記，如 i（樣式）/ em（語(yǔ)義）；b（樣式）/ strong（語(yǔ)義）;

為什么需要使用語(yǔ)義化標(biāo)記？

1、HTML本身就是語(yǔ)義化標(biāo)記語(yǔ)言，使用符合語(yǔ)義的標(biāo)記，才談得上正確使用HTML

2、使用合適的標(biāo)記，可以合理應(yīng)用瀏覽器默認(rèn)樣式

3、有利于SEO（搜索引擎的查詢）

4、使用合適的標(biāo)記是確保可訪問(wèn)性的一個(gè)前提

5、更好的可維護(hù)性

有哪些方法有利于SEO

漸進(jìn)增強(qiáng)；

關(guān)鍵詞；

實(shí)行交換鏈接;

注冊(cè)一個(gè)經(jīng)過(guò)優(yōu)化了的關(guān)鍵字域名;

保持網(wǎng)站結(jié)構(gòu)簡(jiǎn)單

保持你的網(wǎng)站結(jié)構(gòu)簡(jiǎn)單，網(wǎng)站的瀏覽者就可以很容易的從一個(gè)頁(yè)面跳到另一個(gè)頁(yè)面。

同時(shí)，你的網(wǎng)站對(duì)搜索引擎越友好，搜索引擎蜘蛛就越容易抓取你網(wǎng)站內(nèi)容。

2、行內(nèi)元素、行內(nèi)塊元素、塊級(jí)元素分別有哪些標(biāo)簽？分別列舉 3 個(gè)以上(越多越好)

塊級(jí)元素 div、p、h1-h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5新增的header、section、aside、footer

行內(nèi)元素 span、label、a、b、lable、input、abbr（縮寫(xiě)）、em（強(qiáng)調(diào)）、big、small、cite（引用）、strong、i（斜體）、q（短引用）、textarea、select、sub、sup，u（下劃線）

行內(nèi)塊元素 button、img、video、input、textarea

塊級(jí)元素新開(kāi)啟一行（即使是設(shè)置了width屬性也是獨(dú)占一行）、盡可能撐滿父級(jí)元素的寬度，可以設(shè)置width和height屬性；table元素瀏覽器默認(rèn)的display屬性為table。

相鄰的行內(nèi)元素不換行，寬度即為內(nèi)容的寬度、padding的4個(gè)方向都有效(但上下兩個(gè)方向不影響布局)、margin只有水平方向有效、不可以設(shè)置width和height屬性。

行內(nèi)塊元素表現(xiàn)其實(shí)和塊元素一樣，只是可以相互挨著；能設(shè)置4個(gè)方向的margin;

3、請(qǐng)問(wèn)以下代碼的 "標(biāo)題" 是什么顏色的？

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">標(biāo)題</span></div>??<br>

blue

選擇器包含id嗎(每個(gè)id加1分)；選擇器包含類(lèi)或偽類(lèi)嗎(每個(gè)類(lèi)或偽類(lèi)加1分);選擇器包含元素名嗎(一個(gè)元素名加一分)

4.請(qǐng)寫(xiě)出你知道的清除浮動(dòng)的方法?

1.父級(jí)div定義height;

2.最后一個(gè)浮動(dòng)元素后加空div標(biāo)簽 并添加樣式clear:both;

3.包含浮動(dòng)元素的父標(biāo)簽添加樣式 overflow 為 hidden或auto。(創(chuàng)建可以管理浮動(dòng)元素的BFC)

通過(guò)設(shè)置父元素overflow值設(shè)置為hidden；在IE6中還需要觸發(fā) hasLayout ，例如 zoom：1；

4.父元素也設(shè)置浮動(dòng)

5.父元素設(shè)置display:table;

6.clearfix；如果你的頁(yè)面使用bootstrap框架，引入css文件，給父元素添加clearfix便可以清除浮動(dòng)，這也是平時(shí)工作中最常用也是最受程序員喜歡的一種方法，只需添加一個(gè)類(lèi)便可;

5.定位方式有幾種？分別是相對(duì)什么元素定位的？

1.static 2.float 3.relative 4.absolute 5.fixed

1.static定位(普通流定位) -------------- 默認(rèn)定位

2.float定位(浮動(dòng)定位) 例：float:left;

有兩個(gè)取值：left(左浮動(dòng))和right(右浮動(dòng))。浮動(dòng)元素會(huì)在沒(méi)有浮動(dòng)元素的上方，效果上看是遮擋住了沒(méi)有浮動(dòng)的元素，
有float樣式規(guī)則的元素是脫離文檔流的，它的父元素的高度并不能有它撐開(kāi)。

3.relative定位(相對(duì)定位)

相對(duì)定位最大的作用是為了實(shí)現(xiàn)某個(gè)元素相對(duì)于本元素的左上角絕對(duì)定位，本元素需要設(shè)置position為relative。

4.absolute定位(絕對(duì)定位)

相對(duì)于祖代中有relative(相對(duì)定位)并且離本元素層級(jí)關(guān)系上是最近的元素的左上角進(jìn)行定位，如果在祖代元素中沒(méi)有有relative定位的，就默認(rèn)相對(duì)于body進(jìn)行定位。

注意：當(dāng)同時(shí)有浮動(dòng)元素和絕對(duì)定位元素出現(xiàn)并且浮動(dòng)元素沒(méi)有設(shè)置z-index，浮動(dòng)元素是壓在絕對(duì)定位元素上的，即離用戶的視線更近。

5.fixed

6.請(qǐng)實(shí)現(xiàn)右圖的設(shè)計(jì)

JavaScript

1.JavaScript 的數(shù)據(jù)類(lèi)型有哪些？如何準(zhǔn)確檢測(cè)數(shù)據(jù)類(lèi)型？

基本數(shù)據(jù)類(lèi)型, 引用數(shù)據(jù)類(lèi)型

1.typeof

1typeof?1;//'number'
2typeof?true;//'boolean'
3typeof?'';//'string'
4typeof?undefined;//'undefined'
5typeof?function?(){};//'function'

typeof是基本數(shù)據(jù)類(lèi)型檢測(cè)利器(但是不包括null) // "object"

2.instanceof是檢測(cè)引用數(shù)據(jù)類(lèi)型，而不能檢測(cè)引用數(shù)據(jù)類(lèi)型

1var?arr?=?[];
2arr?instanceof?Array;//true

但是只要是在原型鏈上出現(xiàn)過(guò)構(gòu)造函數(shù)都會(huì)返回true，所以這個(gè)檢測(cè)結(jié)果不很準(zhǔn)確

1arr?instanceof?Object;//true
2Array.isArray(a)?//?true?準(zhǔn)確

3.constructor 構(gòu)造函數(shù)

1var?arr?=?[];
2console.log(arr.constructor?===?Array);??//?true
3console.log(arr.constructor?==?Object);??//?false
4var?num?=?1;
5console.log(num.constructor?===?Number);?//?true

局限性：若把類(lèi)的原型進(jìn)行重寫(xiě)，覆蓋掉，檢測(cè)結(jié)果就不準(zhǔn)確

4.Object.prototype.toString.call();

在Object基本類(lèi)定義的這個(gè)toString()方法，是用來(lái)檢測(cè)數(shù)據(jù)類(lèi)型的；

跟字符串、數(shù)字、布爾等原型上定義的toString()方法基本用法都是轉(zhuǎn)換字符串的。

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.以下代碼執(zhí)行結(jié)果分別是什么？

11)?3?+?'3'????????????????????//?'33'
22)?"23"?>?"3"?????????????????//?false(字符串比較規(guī)則)???"23"?>?3?//?true????
44)?"abc123".slice(2,?-1)??????//?"c12"?(負(fù)數(shù)就是倒數(shù)第幾個(gè)，這里是倒數(shù)第一個(gè)，但不包含);?"abc123".slice(2,?0)//'';?"abc123".slice(2,?1)//'';
55)?"abc123".substring(2,?-1)??//?"ab";??substring()方法會(huì)把所有負(fù)值參數(shù)都轉(zhuǎn)換為0;?substring(2,?0)?==?substring(0,?2)

slice 和 substring 第二個(gè)數(shù)都不包含

3 以下代碼執(zhí)行結(jié)果是什么？

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 中局部變量只可能通過(guò)兩種方式聲明，一個(gè)是作為函數(shù)參數(shù)，另一個(gè)是通過(guò) var 關(guān)鍵字聲明。

使用var聲明的變量會(huì)自動(dòng)被添加到最接近的環(huán)境中。在函數(shù)內(nèi)部，最接近的環(huán)境就是函數(shù)的局部環(huán)境;

bar 和 j（函數(shù)參數(shù)） 是函數(shù) test 內(nèi)的局部變量，而對(duì) foo 的賦值將會(huì)覆蓋全局作用域內(nèi)的同名變量

12)
2for(var?i=0;i<10;i++){
3????window.setTimeout(function(){
4????????console.log(i);?//?10個(gè)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?是對(duì)象類(lèi)型，則返回該對(duì)象；?foo.prototype?=?{method:function(){return?value;}}?相當(dāng)于重寫(xiě)了原型！！！
32console.log(foo.prototype.constructor);??????//?Object?
33console.log(foo.prototype?instanceof?bar)????//?false??正確應(yīng)該是?foo.prototype?instanceof?Object?//?true
34var?test?=?new?foo();????????????????????????//?由于是重寫(xiě)原型之后的實(shí)例，因此與重寫(xiě)的原型進(jìn)行連接
35console.log(test?instanceof?foo)?????????????//?true
36console.log(test?instanceof?bar)?????????????//?false
37console.log(test.method())???????????????????//?1;?與重寫(xiě)的原型進(jìn)行連接

在構(gòu)造函數(shù)中return基本類(lèi)型，不會(huì)影響構(gòu)造函數(shù)的值；而return對(duì)象類(lèi)型，則會(huì)替代構(gòu)造函數(shù)返回該對(duì)象

4、如何對(duì)數(shù)組進(jìn)行重排？如： [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 事件，在鼠標(biāo)點(diǎn)擊每個(gè) li 的時(shí)候 alert 該 li 里面的內(nèi)容；且在鼠標(biāo)離開(kāi)外部 ul 元素

范圍的時(shí)候彈出一個(gè) alert 提示。（實(shí)現(xiàn)時(shí)請(qǐng)注意代碼執(zhí)行效率即瀏覽器兼容性、不要使用現(xiàn)成的框架庫(kù)，用原生 js 編寫(xiě)完成)

1<ul?id="ul">
2????<li>內(nèi)容1</li>
3????......此處省略?1000+?個(gè)對(duì)象(注：不要使用循環(huán)綁定，如果使用循環(huán)綁定?1000+?的綁定事件會(huì)很慢)......
4????<li>內(nèi)容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//?另一種實(shí)現(xiàn)方式就是閉包；循環(huán)綁定
15ul.addEventListener('mouseleave',?()=>{?//?使用mouseleave而不是mouseout
16????alert('離開(kāi)組件');
17})

綜合

1.請(qǐng)從編碼和項(xiàng)目實(shí)施兩個(gè)角度談?wù)剬?duì)JS的優(yōu)化

1.編碼

減少DOM訪問(wèn),避免全局查找；使用事件代理，而不是綁定在每一個(gè)子元素上

避免不必要的屬性查找(提取)

避免 with 語(yǔ)句（with語(yǔ)句會(huì)創(chuàng)建自己的作用域，因此會(huì)增加其中執(zhí)行的代碼的作用域鏈長(zhǎng)度）

優(yōu)化循環(huán)

最小化語(yǔ)句數(shù)

使用數(shù)組和對(duì)象字面量而不是構(gòu)造函數(shù)

2.項(xiàng)目實(shí)施

減少HTTP請(qǐng)求

打包壓縮

本地緩存

將腳本放到頁(yè)面底部(減少首屏加載時(shí)間)

預(yù)加載

本地緩存哪幾種方式，優(yōu)勢(shì)劣勢(shì)？

2.請(qǐng)談?wù)勅绾螌?duì) CSS 性能方面做優(yōu)化

1.繼承

2.集合寫(xiě) border{solid 1px black};

3.壓縮工具

4.高性能選擇器

3.頁(yè)面圖片加載太多，一般如何處理？請(qǐng)寫(xiě)出你的代碼？如何延遲和預(yù)先加載？

懶加載;

懶加載原理

將資源路徑賦值到img標(biāo)簽的data-xx屬性中，而非直接賦值在src屬性

持續(xù)判斷圖片是否在用戶當(dāng)前窗口的可視范圍內(nèi)，從而動(dòng)態(tài)將data-xx的值(url)賦值到src里去

1//圖片懶加載類(lèi)<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????//?判斷圖片是否在瀏覽器可視范圍內(nèi)
20????canSeen(el)?{
21????????let?bound?=?el.getBoundingClientRect();??//?元素相對(duì)于視窗的位置集合；有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里面已經(jīng)加載的圖片(避免重復(fù)判斷,減少開(kāi)銷(xiāo))
33????del(idx)?{
34????????this.imglis.splice(idx,?1);???????????????????
35????}
36
37????//?當(dāng)瀏覽器滾動(dòng)的時(shí)候，繼續(xù)判斷(持續(xù)運(yùn)行l(wèi)oad)
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//?實(shí)例化對(duì)象(以懶加載的圖片類(lèi)為選擇參數(shù))
52const?lazy?=?new?LazyLoad('.lazyload');

4.有無(wú)移動(dòng)端開(kāi)發(fā)經(jīng)驗(yàn)？

5.您平常看多哪些書(shū)：一般通過(guò)哪些方式解決問(wèn)題？

轉(zhuǎn)載于:https://www.cnblogs.com/rencoo/p/9531794.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的新浪前端面试的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。