哪吒人生信條：如果你所學的東西 處于喜歡 才會有強大的動力支撐。

把你的前端拿捏得死死的，每天學習得爽爽的，關(guān)注這個不一樣的程序員，如果你所學的東西 處于喜歡 才會有強大的動力支撐。

感謝不負每一份熱愛前端的程序員，不論前端技能有多奇葩，歡迎關(guān)注加我入群vx:xiaoda0423

前言

希望可以通過這篇文章，能夠給你得到幫助。(感謝一鍵三連)

1.css3有哪些新特性

圓角border-radius，陰影box-shadow，對文字加特效text-shadow，線性漸變gradient，變化transform，偽元素::selection，媒體查詢，多欄布局，圖片邊框border-image。

p:first-of-type，選擇屬于其父元素的首個<p>元素的每個<p>元素

p:last-of-type，選擇屬于其父元素的最后一個<p>元素的每個<p>元素

p:only-of-type，選擇屬于其父元素的唯一<p>元素的每個<p>元素

p:only-child，選擇屬于其父元素的唯一子元素的每個<p>元素

p:nth-child(2)，選擇屬于其父元素的第二個子元素的每個<p>元素

:enabled:disabled，控制表單控件的禁用狀態(tài)

:checked，單選框或復選框被選中

2.first-child與first-of-type的區(qū)別是

first-child匹配的是父元素的第一個子元素，可以說是結(jié)構(gòu)上的第一個子元素

first-of-type匹配的是該類型的第一個元素，類型就是指冒號前面匹配到的元素。（只要是該類型的元素第一個即可，不限制是第一子元素）

<div><p></p><span></span> </div>

• p:first-child匹配到p元素，因為p元素是div的第一個子元素
• span:first-child匹配不到span元素，因為span是div的第二個子元素
• p:first-of-type匹配到p元素，因為p是div所有為p的子元素中的第一個
• span:first-of-type匹配到span元素，因為span是div所有未span的子元素中的第一個。

3.解決使用transform:translate屬性時會出現(xiàn)閃爍現(xiàn)象

-webkit-backface-visibility: hidden; // 隱藏轉(zhuǎn)換的元素的背面 -webkit-transform-style: preserve-3d; // 使被轉(zhuǎn)換的元素的子元素保留其3d轉(zhuǎn)換 -webkit-transform: translated3d(0,0,0); // 開啟gpu硬件加速模式，使用gpu代替cpu渲染動畫

4.如何使用@keyframes使div元素移動200像素

div {widht:100px;height:100px;background: red;animation: move 3s; } @keyframes move{from{margin-left: 0px;}to{margin-left: 100px;} }

5.如何實現(xiàn)文本換行

使用word-wrap屬性：normal只在允許的斷字點換行；break-word在長單詞或url地址內(nèi)部進行換行。

6.超出文本省略

使用text-overflow:ellopsis：文本溢出時，為了不顯示省略標記...，通過clip直接將溢出的部分裁剪掉。

7.css3動畫如何在動作結(jié)束時保持狀態(tài)不變

使用animation-fill-mode，值為none，表示不改變默認行為；值為forwards，當動畫完成后，保持最后一個屬性值；backwards，在animation-delay所指定的一段時間內(nèi)，在動畫顯示之前，應(yīng)用開始屬性值；both，向前和向后填充模式都可以應(yīng)用。

css3動畫的優(yōu)點：在性能上會稍微好一些，瀏覽器會對css3的動畫做一些優(yōu)化，代碼相對簡單；css3動畫的缺點：在動畫控制上不夠靈活，兼容性不好，部分動畫功能無法實現(xiàn)。

8.實現(xiàn)某div元素以每秒50px的速度左移100px

$('div'),animate({'left': 100}, 2000); div {transition: all 2s linear; } div.style.left = {div.offsetLeft+100)+'px';

9.說說box-sizing屬性

box-sizing屬性用來控制元素盒模型的解析模式，默認是content-box

content-box讓元素維持w3c的標準盒模型，元素的寬度/高度由border+padding+content的寬度/高度決定，設(shè)置width/height屬性指的是指定content部分的寬度/高度。

border-box讓元素維持ie傳統(tǒng)盒模型，設(shè)置width/height屬性指的是指定border+padding+content的寬度/高度。標準瀏覽器下，按照w3c規(guī)范解析盒模型，一旦修改了元素的邊框或內(nèi)距，就會影響元素的盒子尺寸，就不得不重新計算元素的盒子尺寸，從而影響整個頁面的布局。

content-box盒模型：

布局所占寬度：

width=width + padding-left + paddiing-right + border-left + border-right

布局所占高度：

Height = height + padding-top + padding-bottom + border-top + border-bottom

padding-box盒模型：

布局所占寬度：

width = widht（包含padding-left + padding-right） + border-top + border-bottom

布局所占高度：

Height = height(包含padding-top + padding-bottom) + border-top + border-bottom

border-box盒模型：

布局所占寬度：

width = widht（包含padding-left + padding-right + border-left + border-right）

布局所占高度：

height = height(包含padding-top + padding-bottom + border-top + border-bottom)

10.如何實現(xiàn)把文本分隔為4列并使兩列之間間隔30像素

div {-moz-column-count: 3;-webkit-column-count: 3;column-count: 3;-moz-column-gap: 40px;-webkit-column-gap: 40px;column-gap: 40px;width: 600px; }

11.background-clip和background-orgin的區(qū)別

• background-clip規(guī)定背景，背景顏色和背景圖片的繪制區(qū)域。

它有三個屬性：

1. border-box表示背景從邊框開始繪制 2. padding-box表示背景在邊框內(nèi)部繪制 3. content-box表示背景從內(nèi)容部分繪制

• background-origin規(guī)定背景圖片的定位區(qū)域

它有三個屬性：border-box，padding-box，content-box（它只能對背景做樣式上的操作）

12.css3中transition屬性值以及含義是

transition屬性是一個簡寫屬性：

transition-property哪個屬性需要實現(xiàn)過渡

transition-duration完成過渡效果需要多少秒/毫秒

transition-timing-function速度效果的運動曲線，如linear,ease-in,ease,ease-out,ease-in-out,cube-bezier

transition-delay規(guī)定過渡開始前的延遲時間

13.當元素不面向屏幕時其可見性如何定義

backface-visibility: visible | hidden

14.如何實現(xiàn)css3倒影

-webkit-box-reflect設(shè)置方向，距離。方向可以設(shè)置為below,above,left,right。

.demo { height: 100px;widht: 100px;background: url(logo.png);-webkit-box-reflect: below 10px; }

15.css3實現(xiàn)背景顏色線性漸變

div{background: -webkit-linear-gradient(left,red,green 50%, blue) }

16.為盒子添加蒙版

.demo {height: 100px;width: 100px;-webkit-mask-image: url(shadow.png);-webkit-mask-position: 50% 50%;-webkit-mask-repeat: no-repeat; }

17.animation屬性值有哪些

animation-name就是動畫名稱；animation-duration就是動畫持續(xù)時間；animation-play-state是播放狀態(tài)(running表示播放，paused表示暫停)，可以用來控制動畫暫停;animation-delay就是動畫延遲時間;animation-timing-function就是動畫運動形式，animation-iteration-count就是重復次數(shù)；animation-direction就是播放前重置。

18.rem的原理是什么

在做響應(yīng)式布局時，通過調(diào)整html的字體大小，頁面上所有使用rem單位的元素都會做相應(yīng)的調(diào)整。

19.如何設(shè)置css3文本陰影

h1 {text-shadow: 水平陰影，垂直陰影，模糊距離，陰影顏色}

20.如何把元素從左側(cè)移動50像素，從頂端移動100像素

div{transform: translate(50px,100px);-ms-transform: translate(50px,100px);-webkit-transform: translate(50px,100px);-o-transform: translate(50px,100px);-moz-transform: translate(50px,100px); }

21.如何把一個元素旋轉(zhuǎn)30°

div{transform:rotate(30deg);-ms-transform: rotate(30deg); //ie9-webkit-transform: rotate(30deg); //safari,chrome-o-transform: rotate(30deg); // opera-moz-transform: rotate(30deg); // firebox }

22.利用css3制作淡入淡出的動畫效果

@-webkit-keyframes daIn{from {opacity: 0;}to {opacity: 1;} }@-webkit-keyframes daOut {from{opacity: 1;}to{opacity: 0;} }div {-webkit-animation-name: daIn; // 動畫名稱-webkit-animation-duration: 3s; // 動畫持續(xù)時間-webkit-animation-iteration-count: 1; // 動畫次數(shù)-webkit-animation-delay: 0s; // 延遲時間 }

23.在使用Bootstrap的同時使用地圖api，可能會造成Bootstrap與地圖沖突，地圖顯示不出來，如何解決

主要是在使用Bootstrap的變體zui.css的時候出現(xiàn)的，首先，打開瀏覽器的開發(fā)者工具，查看控制臺有無錯誤，如沒有，查看網(wǎng)絡(luò)中的資源，并確認與地圖相關(guān)的圖片資源有無加載，若加載了，將地圖調(diào)用的代碼從項目中獨立出來，看能否正常顯示，若能顯示，在項目中，使用二分法一半一半地刪除引用的JavaScript,css代碼，看這些JavaScript或css代碼是否對地圖api造成了影響，把問題鎖定在zui.css中，然后，在elements里核對地圖div下面的一些css。

24.jquery中的deferred的功能

實現(xiàn)鏈式操作

指定同一操作的多個回調(diào)函數(shù)

為多個操作指定回調(diào)函數(shù)

提供普通操作的回調(diào)函數(shù)接口

25.什么是deferred對象

開發(fā)網(wǎng)站過程中，會遇到某些耗時很長的javascript操作，有異步操作，如ajax讀取服務(wù)器數(shù)據(jù)，有同步操作，如遍歷一個大型數(shù)組，它們都不能立即得到結(jié)果。

可以為它們指定回調(diào)函數(shù)callback，就是事先規(guī)定，一旦運行結(jié)束，調(diào)用那些函數(shù)，但是，在回調(diào)函數(shù)方面，jquery的功能非常弱，為了改變這一點，jquery開發(fā)設(shè)計了deferred對象。

26.jquery和jquery ui的區(qū)別

jquery是一個javascript庫，主要提供選擇器，屬性修改和事件綁定等功能。jquery ui則是在jquery的基礎(chǔ)上對jquery的擴展，是jquery的插件。jquery ui提供了一些常用的界面元素，如對話框，拖動行為，改變大小行為等。

27.如何用原生JavaScript實現(xiàn)jquery的ready方法

$(document).ready()在dom繪制完畢后就執(zhí)行，而不必等到頁面加載完畢。

// 實現(xiàn)ready方法 var DOMReady = (function() {// 回調(diào)函數(shù)隊列var fnList = [];// 頁面是否已經(jīng)繪制完成var ready = false;var fnEvent = null;// 事件回調(diào)函數(shù)function handler(e) {// 確保事件回調(diào)函數(shù)只執(zhí)行一次if(ready){return;}// 如果發(fā)生了`onreadystatechange事件，但是狀態(tài)不是complete,說明dom沒有繪制完成if(e.type==='onreadystatechange' && document.readyState !== 'complete') {return;}// 運行所有回調(diào)函數(shù)，為了防止運動時候注冊更多的事件回調(diào)函數(shù)，每次都要重新判斷fnList的長度for(var i = 0; i<fnList.length; i++){// 在document作用域下執(zhí)行回調(diào)函數(shù)，并傳遞事件對象fnList[i].call(document,e)}// 執(zhí)行完畢，切換ready狀態(tài)ready = true;// 移除所有回調(diào)函數(shù)fnList = null;fnEvent = e; } // 注冊事件 // 能力檢查 if(document.addEventListener){document.addEventListener('DOMContentLoaded',handler,false)document.addEventListener('readystatechange',handler,false)window.addEventListener('load',handler,false); }else if(document.attachEvent){document.attachEvent('onreadystatechange', handler);window.attachEvent('onload', handler) } // 返回真正的DOMReady方法 return function(fn) {if(ready) {fn.call(document,fnEvent)}else {fnList.push(fn)} } })() // 測試 // 訂閱load事件 window.onload = function() {console.log('load') } // 訂閱ready事件 DOMReady(function(){ console.log('ready') })

28.jquery中的attr和prop區(qū)別

對于html元素本身就帶有的固定屬性，在處理時，使用prop方法；對于html元素自定義的dom屬性時，在處理時，使用attr方法。

29.$.map()和$.each()區(qū)別

$.map()方法用來遍歷操作數(shù)組和對象，返回的是一個新的數(shù)組； $.map()方法適用于將數(shù)組或?qū)ο蟮拿總€項目映射到一個新數(shù)組中。

$.each()用于遍歷jquery對象，返回的是原來的數(shù)組，并不會返回一個新數(shù)組。

30. jquery中如何將一個jquery對象轉(zhuǎn)化為dom對象

jquery對象是一個數(shù)據(jù)對象， 可以用[index]的方法來得到相應(yīng)的dom對象

var $v = $('#v'); // jquery對象 console.log($v[0]); // dom對象

使用get(index)方法：

var $v = $("#v"); console.log($v.get(0)); // dom對象

31.jquery中監(jiān)聽事件有幾種方式

4中事件監(jiān)聽方式：bind(),live(),delegate(),on()；解除事件對應(yīng)的4種：unbind(),die(),undelegate(),off()。

32.jquery中個get和eq區(qū)別

• get()取得其中一個匹配的元素，num表示取得第幾個匹配的元素,get()多針對集合元素，返回的是dom對象組成的數(shù)組
• eq()獲取第n個元素，下標都從0開始，返回的是一個jquery對象。

33.jquery中的事件冒泡，怎么執(zhí)行，如何停止冒泡事件

事件冒泡從里面往外面開始傳遞。在jquery中stopPropagation()方法用于停止冒泡，兼容所有瀏覽器

34.jquery中的hover和toggle區(qū)別

hover()和toggle()都是jquery中的兩個合成事件。

• hover()方法用于模擬光標懸停事件
• toggle()方法用于連續(xù)交替單擊事件

35. 你使用過哪些數(shù)據(jù)格式

html格式，json格式，xml格式：html片段提供外部數(shù)據(jù)，一般來說是最簡單的；如果數(shù)據(jù)需要復用，那么在性能和文件大小方面具有優(yōu)勢的是json；當遠程應(yīng)用程序未知時，xml能為數(shù)據(jù)的操作性提供最可靠的保證。

36.選擇器中id，class有什么區(qū)別

• id，在網(wǎng)頁中每個id名稱只能有一次，class可以重復使用

37.為了將單選按鈕組的第二個選框設(shè)置為選中狀態(tài)，如何設(shè)置

$('input[name=items]').get(1).checked = true

38.$.getScript()方法和$.getJson()方法有什么區(qū)別

• $.getScript()方法可以直接加載javascript文件，并且不需要對javascript文件進行處理，javascript文件會自動執(zhí)行。
• $.getJson()是用于加載json文件的，用法和$.getScript()一樣。

39.jquery或zepto源碼有哪些地方覺得不錯

jquery源碼封裝在一個匿名函數(shù)的自執(zhí)行環(huán)境中，有助于防止變量的全局污染。

通過傳入window對象參數(shù)，可以使window對象作為局部變量使用。

好處是當jquery訪問window對象的時候，就不用將作用域鏈退回到頂層作用域了，從而可以更快地訪問window對象，同樣，傳入undefined參數(shù)，可以降低undefined被重定義的風險。

(function (window, undefined) {window.jQuery = window.$ = jQuery })(window);

jquery將一些原型屬性和方法封裝在了jQuery.prototype中，為了方便對jQuery.prototype的訪問，將jQuery.prototype賦值給jQuery.fn。一些數(shù)組或?qū)ο蟮姆椒ń?jīng)常能使用到，jQuery將其保存為局部變量以提高訪問速度。jQuery實現(xiàn)的鏈式調(diào)用可以節(jié)約代碼，所返回的都是同一個對象，可以提高開發(fā)效率。

40.jQuery中的美元符號

$(document).ready(function(){//... }); jQuery(document).ready(function(){//... });

41.onload()函數(shù)和ready()函數(shù)的區(qū)別

• 可以在頁面中使用多個ready(),但只能使用一次onload()
• ready()函數(shù)在頁面dom元素加載完以后就會調(diào)用，而onload()函數(shù)則要在所有的關(guān)聯(lián)資源加載完畢后才會調(diào)用，要晚于ready()函數(shù)。

42.jQuery中有哪幾種常見的選擇器

基本選擇器；層次選擇器；過濾選擇器；屬性選擇器；子元素選擇器；表單選擇器；內(nèi)容選擇器；可見選擇器

43.使用jQuery將頁面上所有元素邊框設(shè)置為2px寬的虛線

<script language="javascript" type="text/javascript">$("*").css("border", "2px dotted red"); </script>

44.使用jQuery實現(xiàn)單擊按鈕時彈出一個對話框

<button class="btn">打開彈框</button> jQuery: <script type="text/javascript">$(function(){$('.btn').click(function(){alert('success')})}) </script>

45.如何使用jquery編碼和解碼url

編碼時使用encodeURIComponent(url)，解碼時使用decodeURIComponent(url)

46.jquery中的delegate()函數(shù)有什么作用

delegate()是jquery中事件委托的語義化方法，會在以下兩種情況中使用到。

如果有一個父元素，需要給其下的子元素添加事件，這時可以使用delegate()了。

$("ul").delegate("li", "click", function(){$(this).hide(); });

當元素在當前頁面中不可用時，使用delegate()

47.如何禁用瀏覽器的前進和后退按鈕

<script type="text/javascript" language="javascript">$(document).ready(function() {//前進window.history.forward();//后退window.history.back();}); </script>

48.網(wǎng)頁上有5個<div>元素，如何使用jquery來選擇它們

可以使用標簽選擇器來選擇所有的div元素，$("div")會返回一個包含5個div標簽的jQuery對象。

49.如何在單擊一個按鈕時使用jQuery隱藏一副圖片

$('.demo-img').click(function() {$('.img').hide(); });

50. $(document).ready()是什么函數(shù)

ready()函數(shù)用于在文檔進入ready狀態(tài)時執(zhí)行代碼。當dom完全加載時，jquery允許你執(zhí)行代碼，使用$(document).ready()最大的好處在于它適用于所有瀏覽器，jQuery有助于解決跨瀏覽器兼容性問題。

51.如何找到所有多選下拉框內(nèi)的選中項

可以用jquery選擇器獲取所有滿足multiple=true的<select>標簽的選中項。

$('[multiple] :selected')

52.如何獲取頁面中所有多（復）選框內(nèi)選中選項的內(nèi)容

$('[multiple] :selected').each(function(index, dom){alert($(dom).text()) // text()方法返回選項的文本 })

53.$(this)和this關(guān)鍵字在jquery中的不同

$(this)返回一個jQuery對象，可以對它調(diào)用多個jQuery方法，比如用text()獲取文本，用on()綁定事件等。而this代表當前元素，表示上下文中的當前dom元素。

54.提取鏈接的href

$('a').each(function(){alert($(this).attr('href')); });

55.能用jquery代碼選擇所有在段落內(nèi)部的超鏈接嗎

來選擇所有嵌套在段落p標簽內(nèi)部的超鏈接a:

$('p a')

56.jquery中的detach()和remove()方法的區(qū)別

detach()和remove()方法都可以移除一個dom元素：

• remove()將元素自身移除的同時，也會移除元素內(nèi)部的一切，包括綁定的事件以及與該元素相關(guān)的jquery數(shù)據(jù)
• detach()雖然可以將元素自身移除，但是它不會刪除數(shù)據(jù)和綁定事件

57.如何利用jquery，來向一個元素添加或移除css類

用addClass()和removeClass()方法動態(tài)地改變元素的class

58.使用cdn加載jquery庫的主要優(yōu)勢是什么

• 可以節(jié)省服務(wù)器帶寬
• 可以更快地下載jquery文件
• 如果瀏覽器已經(jīng)從同一個cdn上下載了jquery文件，再次打開頁面時，不會再次下載

59.jQuery.ajax()和jQuery.get()方法之間的區(qū)別

• ajax()方法更強大，可配置性更強，可以指定等待多久，以及如何處理錯誤
• get()方法只是ajax()方法中g(shù)et請求的簡化方法

60.要是在一個jQuery事件處理程序里返回了false會怎么樣

這將會阻止事件向上冒泡以及默認行為。

61.document.getElementbyId("myId")和$("#myId")哪個更高效

第一個，因為它使用原生方法；而二是jQuery封裝的方法，要處理其外部的判斷邏輯

62.jQuery中的方法鏈是，使用的好處

方法鏈就是執(zhí)行完的方法返回的結(jié)果是當前jQuery的實例化對象，可以繼續(xù)調(diào)用另一個方法。

63.如何用jquery將一個html元素添加到dom樹中

appendTo()方法，將一個html元素添加到dom樹中，使用它可以在指定的dom元素末尾添加一個現(xiàn)存的元素或者一個新的html元素。

append,appendTo,prepend,prependTo,after,insertAfter,before,insertBefore

64.你是如何使用jquery中的ajax的

使用load(),$.get(),$.post()，如果需要設(shè)定beforeSend提交前回調(diào)函數(shù)，error失敗后處理，success成功后處理以及complete請求完成后處理回調(diào)函數(shù)等，要使用$.ajax()

65.頁面導入樣式時，使用link和@import有什么區(qū)別？

區(qū)別：

link是HTML標簽，@import是css提供的。

link引入的樣式頁面加載時同時加載，@import引入的樣式需等頁面加載完成后再加載。

link沒有兼容性問題，@import不兼容ie5以下。

link可以通過js操作DOM動態(tài)引入樣式表改變樣式，而@import不可以。

66.HTML全局屬性(global attribute)有哪些（包含H5）？

全局屬性：用于任何HTML5元素的屬性

accesskey:設(shè)置快捷鍵 class:為元素設(shè)置類標識 contenteditable:指定元素內(nèi)容是否可編輯 contextmenu:自定義鼠標右鍵彈出上下文菜單內(nèi)容（僅firefox支持） data-*:為元素增加自定義屬性 dir：設(shè)置元素文本方向（默認ltr；rtl） draggable:設(shè)置元素是否可拖拽 dropzone:設(shè)置元素拖放類型（copy|move|link,H5新屬性，主流均不支持） hidden:規(guī)定元素仍未或不在相關(guān) id:元素id，文檔內(nèi)唯一 lang:元素內(nèi)容的語言 spellcheck:是否啟動拼寫和語法檢查 style:行內(nèi)css樣式 tabindex:設(shè)置元素可以獲得焦點，通過tab導航 title:規(guī)定元素有關(guān)的額外信息 translate:元素和子孫節(jié)點內(nèi)容是否需要本地化（均不支持）

67.寫一個方法去掉字符串中的空格

var str = ' abc d e f g '; function trim(str) {var reg = /\s+/g;if (typeof str === 'string') {var trimStr = str.replace(reg,'');}console.log(trimStr) } trim(str)

68.CSS3有哪些新增的特性？

邊框(borders):border-radius 圓角 box-shadow 盒陰影 border-image 邊框圖像背景:background-size 背景圖片的尺寸 background_origin 背景圖片的定位區(qū)域 background-clip 背景圖片的繪制區(qū)域漸變：linear-gradient 線性漸變 radial-gradient 徑向漸變文本效果;word-break word-wrap text-overflow text-shadow text-wrap text-outline text-justify轉(zhuǎn)換：2D轉(zhuǎn)換屬性transform transform-origin2D轉(zhuǎn)換方法translate(x,y) translateX(n) translateY(n) rotate(angle) scale(n) scaleX(n) scaleY(n) rotate(angle) matrix(n,n,n,n,n,n)3D轉(zhuǎn)換：3D轉(zhuǎn)換屬性transform transform-origin transform-style3D轉(zhuǎn)換方法translate3d(x,y,z) translateX(x) translateY(y) translateZ(z)scale3d(x,y,z) scaleX(x) scaleY(y) scaleZ(z)rotate3d(x,y,z,angle) rotateX(x) rotateY(y) rotateZ(z)perspective(n)過渡transition動畫@Keyframes規(guī)則 animation彈性盒子(flexbox)多媒體查詢@media

69.用遞歸算法實現(xiàn)，數(shù)組長度為5且元素的隨機數(shù)在2-32間不重復的值

var arr = new Array(5); var num = randomNumber(); var i = 0; randomArr(arr,num); function randomArr(arr,num) {if (arr.indexOf(num)< 0){arr[i] = num;i++;} else {num = randomNumber();}if (i>=arr.length){console.log(arr);return;}else{randomArr(arr,num)} } function randomNumber() {return Math.floor(Math.random()*31 + 2) }

70.寫一個加密字符串的方法

僅支持瀏覽器端：function encode (str) {return btoa(encodeURIComponent(str)); }function decode (str) {return decodeURIComponent(atob(str)); }

71.瀏覽器內(nèi)多個標簽頁之間的通信方式有哪些？

1.WebSocket （可跨域） 2.postMessage（可跨域） 3.SharedWorker 4.Server-Sent Events 5.localStorage 6.BroadcastChannel IE不支持 7.Cookies

72.簡述下你理解的優(yōu)雅降級和漸進增強

優(yōu)雅降級，先做好一個完善的具備完整體驗的版本，再向下做兼容。

漸進增強，先做好一個可以基本正常使用的版本，再慢慢豐富體驗和內(nèi)容。

73.viewport常見設(shè)置都有哪些？

width 設(shè)置 layout viewport 的寬度，為一個正整數(shù)，或字符串"width-device" initial-scale 設(shè)置頁面的初始縮放值，為一個數(shù)字，可以帶小數(shù) minimum-scale 允許用戶的最小縮放值，為一個數(shù)字，可以帶小數(shù) maximum-scale 允許用戶的最大縮放值，為一個數(shù)字，可以帶小數(shù) height 設(shè)置 layout viewport 的高度，這個屬性對我們并不重要，很少使用 user-scalable 是否允許用戶進行縮放，值為"no"或"yes", no 代表不允許，yes 代表允許

viewport 是在 meta 標簽內(nèi)進行控制。

// width=device-width, initial-scale=1.0 是為了兼容不同瀏覽器 <metaname="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

74.對比下px、em、rem有什么不同？

默認情況下: 1em = 10px; 1rem = 16px

px是css中的邏輯像素，和移動端的物理像素之間會有一個比值dpr
em是指相對于父元素的大小
rem中的r就是root，也就是相對于root元素的大小（html標簽）

75.簡要描述下什么是回調(diào)函數(shù)并寫一個例子出來

dom.addEventerlisten('click',function(){// do something })

76.你對標簽語義化的理解是什么？

見名知意，方便多人認識，且命名統(tǒng)一，簡潔，易于重構(gòu)代碼

77.在頁面上隱藏元素的方法有哪些？

display: none opacity: 0 visibility: hidden z-index: -9999999999999 transform: scale(0) margin-left: -100% position: relative; left: -100% width: 0; height: 0;

78.去除字符串中最后一個指定的字符

function trim(str) { if(typeof str === 'string'){ var trimStr = str.substring(0,str.length-1) } return trimStr; }

79.HTML5的文件離線儲存怎么使用，工作原理是什么？

localstorge 利用瀏覽器的本地存儲可以緩存信息 ，在創(chuàng)建數(shù)據(jù)的時候引入創(chuàng)建好的數(shù)據(jù)

//增加 localStorage.setItem('myCat', 'Tom'); //獲取 let cat = localStorage.getItem('myCat'); //刪除所有 localStorage.clear();

80.CSS選擇器有哪些？哪些屬性可以繼承？

選擇器 通配符 id class 標簽 后代選擇器 子選擇器 兄弟選擇器 屬性選擇器 偽類選擇器 偽元素選擇器可以繼承的屬性font-size font-weight font-style font-family color

81.簡述超鏈接target屬性的取值和作用

<a> 標簽的 target 屬性規(guī)定在何處打開鏈接文檔。

語法：<a target="value">

屬性值：

_blank 在新窗口中打開被鏈接文檔。 _self 默認。在相同的框架中打開被鏈接文檔。 _parent 在父框架集中打開被鏈接文檔。 _top 在整個窗口中打開被鏈接文檔。 framename 在指定的框架中打開被鏈接文檔。

82.CSS3新增偽類有哪些并簡要描述

83.label都有哪些作用

<label for="hobby">愛好</label> <input id="hobby" type="checkbox" value="0">

<label>的作用

表示用戶界面中某個元素的說明

增加命中區(qū)域，屏幕閱讀器可以讀出標簽。使用輔助技術(shù)的用戶更容易理解輸入 哪些數(shù)據(jù)

利用label"模擬"button來解決不同瀏覽器原生button樣式不同的問題

結(jié)合checkbox、radio表單元素實現(xiàn)純CSS狀態(tài)切換，這樣的實例就太多了。比如控制CSS動畫播放和停止

input的focus事件會觸發(fā)錨點定位，我們可以利用label當觸發(fā)器實現(xiàn)選項卡切換效果

84.用css創(chuàng)建一個三角形，并簡述原理

width: 0; height: 0; margin: 100px auto; border-top: 50px solid transparent; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid red;

原理是寬高是兩邊固定，border不一樣，有顏色，且有top、right、bottom、left的選項進行修改。在使用的時候需要寬高為零。三角形就需要數(shù)學知識（勾股定理），去考慮為等邊、全等。

<div class='rect'></div> <style>.rect {width: 0;height: 0;background-color: #fff;border-right: 100px solid rgb(34, 230, 220);border-left: 100px solid rgb(202, 146, 25);border-top: 100px solid rgb(29, 156, 194);border-bottom: 100px solid rgb(16, 204, 101);} </style>

創(chuàng)建一個div，寬高都為0，實現(xiàn)效果如下，發(fā)現(xiàn)border的四個邊都是一個三角形，要實現(xiàn)三角形只需將其中幾個邊background設(shè)置為transparent，即可得到三角形

<style>.rect {width: 0;height: 0;background-color: #fff;border-right: 100px solid transparent;border-left: 100px solid transparent;border-top: 100px solid rgb(29, 156, 194);border-bottom: 100px solid transparent;} </style>

85.Iframe 有什么好處，有什么壞處？國內(nèi)還有哪些知名網(wǎng)站仍用Iframe，為什么？有哪些原來用的現(xiàn)在拋棄了？又是為什么？

iframe原本的用法在現(xiàn)在看來是不合時宜的，問題太多了，但是它的其他功能卻是不錯的黑魔法。

• 用來實現(xiàn)長連接
• 跨域通信
• 歷史記錄管理，解決ajax化網(wǎng)站響應(yīng)瀏覽器前進后退按鈕的方案，在html5的history api不可用時作為一種替代。
• 純前端的utf8和gbk編碼互轉(zhuǎn)

現(xiàn)在，應(yīng)該使用 iframe 的例子如：

沙箱隔離。

引用第三方內(nèi)容。

獨立的帶有交互的內(nèi)容，比如幻燈片。

需要保持獨立焦點和歷史管理的子窗口，如復雜的Web應(yīng)用。

注：登錄彈窗用 iframe 未必合適。HTML標準新增了dialog元素，可能更適合。

86.簡述你對BFC規(guī)范的理解

BFC 全稱“塊級格式化上下文”(Block Formatting Context)，對應(yīng)的還有 IFC。BFC 類似一個“結(jié)界”，如果一個 DOM 元素具有 BFC，那么它內(nèi)部的子元素不會影響外面的元素；外面的元素也不會影響到其內(nèi)部元素。

最常見的例子就是清除 float 的 overflow: hidden; 屬性。overflow: hidden;會觸發(fā)元素的 BFC，因此其內(nèi)部的 float 元素不會影響到外部元素的布局。

觸發(fā) BFC 的條件：

<html> 根元素 float 不為 none overflow 為 auto,scroll,hidden display 的值為 table-cell, table-caption,inline-block 中任何一個 position 的值不為 static 和 relativeBFC 可以實現(xiàn)更加健壯的自適應(yīng)布局。

參考文章：《CSS 世界》

87.統(tǒng)計某一字符或字符串在另一個字符串中出現(xiàn)的次數(shù)

var childInNums = parent.split(child).length - 1 function strCount(str, target) {let count = 0if (!target) return countwhile(str.match(target)) {str = str.replace(target, '')count++}return count }console.log(strCount('abcdef abcdef a', 'abc'))

88.清除浮動的方式有哪些及優(yōu)缺點？

通過設(shè)置父標簽overflow: auto

通過after偽類: {display: block; content: ''; clear: both;}

觸發(fā)BFC 或 clear: both

CSS盒子塌陷問題解決方案解決方案

89.簡要描述下JS有哪些內(nèi)置的對象

時間對象Date 字符串對象String 數(shù)學對象Math 數(shù)值對象Number 數(shù)組對象Array 函數(shù)對象Function 函數(shù)參數(shù)集合arguments 布爾對象Boolean 錯誤對象Error 基礎(chǔ)對象Object

90.常見的瀏覽器內(nèi)核都有哪些？

內(nèi)核按功能可以分為渲染引擎和JS引擎。

我們常說的瀏覽器內(nèi)核指代的是瀏覽器的渲染引擎。

IE : Trident safari（蘋果公司自帶瀏覽器）: webkit FireFox : Gecko Chrome : Blink ，JS引擎為V8引擎 Opera : Blink

91.盒模型的理解

盒模型主要有以下幾部分組成：

內(nèi)容（content） 內(nèi)邊距（padding） 邊框（border） 外邊框（margin）

盒模型分為兩種：

標準盒模型(w3c 盒模型) 標準盒模型的 width = content

IE 盒模型 IE 盒模型的 width = padding + border + content

默認的情況下，盒子都是基于標準盒模型的盒子。

在 css3 中出現(xiàn)了 box-sizing 屬性，該屬性會改變默認盒子的盒模型。該屬性的兩個屬性值分別表示為：content-box（標準盒模型）和 border-box（IE 盒模型）。

盒模型的理解

92.html5中的form怎么關(guān)閉自動完成？

設(shè)置form的autocomplete屬性為off

93.::before和:after中單冒號和雙冒號的區(qū)別是什么

區(qū)別：偽元素在css1中已經(jīng)存在當時用單冒號，css3時做了修訂用雙冒號 ::before ::after表示偽元素用來區(qū)別偽類。作用：在元素前面（::before）和后面（::after）加內(nèi)容

【CSS】屬性content有什么作用呢？有哪些場景可以用到？

94.說說你對javascript的作用域的理解

1：全局作用域
2：局部作用域

在 ES5 之前，javascript 只有函數(shù)作用域而沒有塊級作用域的。在 if 或者 for 花括號中的變量實際在外層是可以被訪問的。

for(var i = 0; i < 10; i++){var j=123} console.log(j) // 123;

不過使用 ES6 的 let 和 const 之后，就可以實現(xiàn)塊級作用域了。

var a = 1; function b(){var b = 2;console.log(a);function c(){// 內(nèi)部可以訪問外部，而外層訪問不到內(nèi)部var a = 4;var c = 3;console.log(a); // 4 不會污染console.log(b); // 2}c(); }console.log(b()); console.log(a);

95.http都有哪些狀態(tài)碼？

200 成功 301 重定向 304 (未修改) 自從上次請求后，請求的網(wǎng)頁未修改過。 服務(wù)器返回此響應(yīng)時，不會返回網(wǎng)頁內(nèi)容。 400 (錯誤請求) 服務(wù)器不理解請求的語法。 403 (禁止) 服務(wù)器拒絕請求。 404 (未找到) 服務(wù)器找不到請求的網(wǎng)頁。 500 (服務(wù)器內(nèi)部錯誤) 服務(wù)器遇到錯誤，無法完成請求。 501 (尚未實施) 服務(wù)器不具備完成請求的功能。 例如，服務(wù)器無法識別請求方法時可能會返回此代碼。 502 (錯誤網(wǎng)關(guān)) 服務(wù)器作為網(wǎng)關(guān)或代理，從上游服務(wù)器收到無效響應(yīng)。 503 (服務(wù)不可用) 服務(wù)器目前無法使用(由于超載或停機維護)。 通常，這只是暫時狀態(tài)。 504 (網(wǎng)關(guān)超時) 服務(wù)器作為網(wǎng)關(guān)或代理，但是沒有及時從上游服務(wù)器收到請求。 505 (HTTP 版本不受支持) 服務(wù)器不支持請求中所用的 HTTP 協(xié)議版本。

96.為什么HTML5只需要寫<!DOCTYPE HTML>就可以

因為 HTML5 與 HTML4 基于的基準不同。

HTML4 基于 SGML 因此需要除了 DOCTYPE 外還需要引入 DTD 來告訴瀏覽器用什么標準進行渲染。DTD 還分為標準模式、嚴格模式。如果什么都不寫，就完全讓瀏覽器自我發(fā)揮，會變成怪異模式。

HTML5 不基于 SGML，因此后面就不要跟 DTD，但是需要 DOCTYPE 來規(guī)范瀏覽器的渲染行為。

注：SGML 是通用標記語言的集合。其中有 HTML、XML，因此需要用 DTD 來指定使用那種規(guī)范。

97.什么是閉包？優(yōu)缺點分別是什么？

• 閉包：在局部作用域引用上層作用域（非全局）的變量
• 優(yōu)點：防止變量污染作用域
• 缺點：不釋放則會導致內(nèi)存泄漏

98.寫一個數(shù)組去重的方法

一維

new set(...arr)

二維

arr.reduce((a,b)=>{return new set(...a.concat(b)) },[])

99.元素的alt和title有什么區(qū)別？

title屬性是一個標記，它向每個元素添加補充信息。當鼠標指針放在元素上時，主要作用是顯示工具提示。

alt是為圖片指定替代文字的屬性

alt是在<img>中指定的屬性標簽，表示圖像。

正如我寫為替代文本一樣，它用于需要文本而不是圖像的情況。

• 如果盲人使用語音閱讀功能，則會大聲朗讀圖像的alt屬性中的文本。
• 當由于鏈接斷開而無法顯示圖像時，將顯示它。
• Google和Yahoo!等機器人抓取圖片的提示。

100.table的作用和優(yōu)缺點是什么呢？

table 用于表格數(shù)據(jù)的展示，并且很符合人們的直觀認知。

在 div+css 布局流行之前，普遍使用 table 進行布局。

table 布局的好處在于樣式好控制，特別是居中、對齊。缺點在于會多處非常多的 DOM 節(jié)點，會導致頁面加載變慢、不利于 SEO。也因此，在 CSS 成熟之后，table 布局馬上就變成歷史了。

101. typeof('abc')和typeof 'abc'都是string, 那么typeof是操作符還是函數(shù)？

假設(shè)typeof是函數(shù),則調(diào)用typeof(typeof)應(yīng)該返回一個字符串'function',但是實際操作會報錯,所以typeof不是函數(shù)

typeof 是操作符，明確定義在MDN當中,作用是對后方表達式的返回做類型定義。

102.說說你對SVN和GIT的理解和區(qū)別

SVN是集中式，GIT是分布式

103.什么是FOUC？你是如何避免FOUC的？

FOUC：加載時樣式突然變化

原因：由于在渲染HTML時，遇到CSS樣式表會重新渲染HTML

樣式表沒有放到head里面,使用了@import導入樣式

解決：盡量把樣式表放到body標簽上面

104.css的屬性content有什么作用呢？

content屬性與 ::before 及 ::after 偽元素配合使用生成文本內(nèi)容

105."attribute"和"property"有什么不同？

• property是DOM中的屬性，是JavaScript里的對象
• attribute是HTML標簽上的特性，它的值只能夠是字符串

106.寫一個驗證身份證號的方法

地址碼6位+年份碼4位+月份碼2位+日期碼2位+順序碼3位+校驗碼1位

107.對于HTML表單輸入字段，disabled =“ disabled”和readonly =“ readonly”有什么區(qū)別？

相同點：都會使文本框變成只讀，不可編輯

disabled屬性在將input文本框變成只讀不可編輯的同時，還會使文本框變灰，但是readonly不會。

設(shè)置了readonly屬性的input元素依然可以獲取焦點，但是設(shè)置了disabled屬性的input元素沒有辦法獲取焦點

readonly只針對input和textarea有效，而disabled對于所有的表單元素都有效。

readonly：不可編輯、可復制、可選擇、可以接收焦點但不能被修改，后臺會接收到傳值

disabled：不可編輯、不可復制、不可選擇、不能接收焦點，后臺也不會接收到傳值

108.說說你對line-height是如何理解的？

line-height，又稱行高，指的是兩行文字基線之間的距離，又可以稱為這行文字所占的高度。

如圖紅色線即為基線

基線（baseline），指的是一行字橫排時下沿的基礎(chǔ)線，基線并不是漢字的下端沿，而是英文字母x的下端沿。

109.說說你對重繪和重排的理解，以及如何優(yōu)化？

瀏覽器加載網(wǎng)頁時會生成DOM樹和CSSOM樹

重繪：

當盒子的位置、大小以及其他屬性，例如顏色、字體大小等都確定下來之后，瀏覽器便把這些原色都按照各自的特性繪制一遍，將內(nèi)容呈現(xiàn)在頁面上。重繪是指一個元素外觀的改變所觸發(fā)的瀏覽器行為，瀏覽器會根據(jù)元素的新屬性重新繪制，使元素呈現(xiàn)新的外觀。

觸發(fā)重繪的條件：改變元素外觀屬性。如：color，background-color，font-size等。

重排(回流)：

當渲染樹中的一部分(或全部)因為元素的規(guī)模尺寸，布局，隱藏等改變而需要重新構(gòu)建, 這就稱為回流(reflow)。每個頁面至少需要一次回流，就是在頁面第一次加載的時候。

重繪和重排的關(guān)系：在回流的時候，瀏覽器會使渲染樹中受到影響的部分失效，并重新構(gòu)造這部分渲染樹，完成回流后，瀏覽器會重新繪制受影響的部分到屏幕中，該過程稱為重繪。

所以，重排必定會引發(fā)重繪，但重繪不一定會引發(fā)重排。

觸發(fā)重排的條件：任何頁面布局和幾何屬性的改變都會觸發(fā)重排

比如：

1、頁面渲染初始化(無法避免)

2、添加或刪除可見的DOM元素；

3、元素位置的改變，或者使用動畫；

4、元素尺寸的改變——大小，外邊距，邊框；

5、瀏覽器窗口尺寸的變化（resize事件發(fā)生時）；

6、填充內(nèi)容的改變，觸發(fā)重排的條件：改變元素的大小 位置 等如：width、height、pading、margin、position等，　添加刪除DOM操作等

重繪重排的代價：耗時，導致瀏覽器卡慢。

110.0.1 + 0.2、0.1 + 0.3和0.1 * 0.2分別等于多少？并解釋下為什么？

111.new操作符的理解是什么？手動實現(xiàn)一個new方法

new 運算符創(chuàng)建一個用戶定義的對象類型的實例或具有構(gòu)造函數(shù)的內(nèi)置對象類型之一

new Object()舉例:

• 創(chuàng)建一個新對象
• 把新對象的原型指向構(gòu)造函數(shù)的prototype
• 把構(gòu)造函數(shù)里的this指向新對象
• 返回這個新對象

112.jquery中是如何操作類的

用addClass()來追加類，用removeClass()來刪除類，用toggle()來切換類。

如何給jQuery動態(tài)添加新的元素，如何給新生產(chǎn)的元素綁定事件

jQuery的html()可以給當前元素添加新的元素。直接在元素還未生成前就綁定事件肯定是無效的，因為所綁定的元素目前根本不存在。所以可以用live方法來動態(tài)綁定事件。

113.使用jQuery中的動畫

• hide()和show()可以同時修改多個樣式屬性，如高度，寬度，不透明度。
• fadeIn()和fadeOut()，fadeTo()只能改變不透明度。
• slideUp()和slideDown()，slideToggle()只能改變高度。
• animate()屬于自定義動畫的方法，可以自定義屬性。

114.單擊超鏈接后自動跳轉(zhuǎn)，單擊“提交”按鈕后表單會提交等，有時候，為了阻止默認行為，怎么辦

使用event.preventDefault()或在事件處理函數(shù)中返回false，即是return false

115.你使用什么方法提交數(shù)據(jù)

一般使用$.post()方法，如果需要設(shè)定beforeSend提交前回調(diào)函數(shù)，error失敗后處理，success成功后處理complete請求完成后處理回調(diào)函數(shù)等，就會使用$.ajax()。

116.在ajax中獲取數(shù)據(jù)的主要有幾種方式

三種：html拼接的query數(shù)據(jù)，json數(shù)組對象數(shù)據(jù)，serialize()方法序列化后的表單數(shù)據(jù)。

117.jquery中使用過哪些插入節(jié)點的方法

內(nèi)部插入方法：append(), appendTo(), prepend(), prependTo()

外部插入方法：after(), insertAfter()，before(), insertBefore()

118.在jquery中，如何獲取或者設(shè)置屬性？如何刪除屬性

jquery中可以用attr()方法來獲取和設(shè)置元素屬性，可以用removeAttr()方法來刪除元素屬性。

119.如何設(shè)置和獲取html以及文本的值

使用html()方法，類似于innerHTML屬性，可以用它讀取或設(shè)置某個元素中的HTML內(nèi)容。

html()方法可以用于XHTML文檔，不能用于XML文檔。

text()方法可以用來讀取或設(shè)置某個元素中的文本內(nèi)容

val()方法可以用來設(shè)置或獲取元素的值

120.說說<script>、<script async>和<script defer>的區(qū)別

<script>標簽，它具有兩個屬性的，async異步加載和defer延遲加載

<script>

當script標簽放在head中，并且這個script標簽只有scr屬性引入外部js文件的情況下，HTML文件開始渲染，直到命中script標簽，此時解析將停止，并發(fā)現(xiàn)一個請求獲取該文件并執(zhí)行。執(zhí)行結(jié)束之前繼承渲染HTML標簽。

<script async>

async表示的意思是異步加載JavaScript文件。

使用async會在HTML解析期間下載文件，并在下載完成后暫停HTML的解析，執(zhí)行下載的外部js文件，執(zhí)行后繼續(xù)解析HTML。

<script defer>

defer表示的意思是在HTML文檔解析之后在執(zhí)行加載完成的JavaScript文件。

它和async的區(qū)別是，同樣在HTML解析期間下載外部的js文件，但是下載完成后不會立即執(zhí)行js腳本文件，而是等到HTML解析完成后才執(zhí)行它。即在DOMContentLoaded之間執(zhí)行已下載的外部js文件

121.說說你對z-index的理解

z-index 屬性設(shè)定了一個定位元素及其后代元素或 flex 項目的 z-order。 當元素之間重疊的時候， z-index 較大的元素會覆蓋較小的元素在上層進行顯示。

122.包裹節(jié)點的方法有哪些？用包裹節(jié)點方法的好處？

包裹節(jié)點的方法：wrapAll()，wrap(), wrapInner()，在文檔中插入額外的結(jié)構(gòu)化標記時可以使用這些包裹的方法，因為它不會破壞原始文檔的語義。

123.如何實現(xiàn)自適應(yīng)布局

• 可以使用媒體查詢做響應(yīng)式頁面
• 用Bootstrap的柵格系統(tǒng)
• 使用彈性盒模型

124.在移動端如何做好用戶體驗

• 清晰的視覺縱線
• 信息的分組
• 極致的減法
• 利用選擇代替輸入
• 標簽以及文字的排布方式
• 依靠明文確認密碼
• 合理地利用鍵盤

125.如何解決長時間按住頁面出現(xiàn)閃退的問題

element {-webkit-touch-callout: none; }

126.解決iPhone以及iPad輸入框的默認內(nèi)陰影的問題

element {-webkit-appearance: none; }

127.如何解決安卓手機圓角失效問題

通過background-clip:padding-box為失效的元素設(shè)置樣式

128.如何解決ios設(shè)置中input按鈕樣式會被默認樣式覆蓋的問題

input, textarea {border: 0;-webkit-appearance: none; }

129.如何解決移動端click事件有300ms延遲問題

300ms延遲導致用戶體驗不好，為了解決這個問題，一般在移動端用touchstart, touchend, touchmove, tap模擬的事件來取代click事件。

130.如何解決移動端html5中的date類型的input標簽不支持placeholder屬性的問題

<input placeholder="請輸入日期" type="text" onfocus="(this.type='date')" name="date">

131.如何禁止復制或選中文本

Element {-webkit-user-select: none;-moz-user-select: none;-khtml-user-select: none;user-select: none; }

132.解決上下拖動滾動條時的卡頓問題

body {-webkit-overflow-scrolling: touch;overflow-scrolling: touch; }

133.說說XHTML

• 所有的 XHTML 元素必須被嵌套于 根元素中。
• XHTML 標簽必須關(guān)閉
• XHTML 所有標簽必須小寫
• XHTML 標簽必須正確嵌套

134.為什么10.toFixed(10)會報錯？

原因是js解釋器對.的解釋發(fā)生了歧義導致。它既可以理解為小數(shù)點，也可以理解為對方法的調(diào)用。按照規(guī)范，解釋器就把它判斷為一個小數(shù)點。

135.DOM和BOM有什么區(qū)別？

BOM指 瀏覽器對象模型

DOM指 文檔對象模型

注意: 只有 JS 的宿主環(huán)境是瀏覽器的時候才有 DOM 和 BOM ，在 Node 中是沒有這兩個對象的。

關(guān)系說明如圖：

136.驗證碼是為了解決什么問題？

• 防止機器行為，確定是人為操作，比如登陸、發(fā)帖等。
• 保護服務(wù)器，比如12306買票的時候，各種搶購的時候。

驗證碼的類型：

圖形驗證碼;手機驗證碼

137.寫一個獲取數(shù)組的最大值、最小值的方法

Math.max.apply(Array,[25,62,91,78,34,62]) // 91Math.min.apply(Array,[27,64,90,78,34,62]) // 27Array.prototype.max = function() {return Math.max.apply(null, this) }let arr = [1,2,3,4] Math.max(...arr) Math.min(...arr)

138.css的權(quán)重計算規(guī)則

139.輸入 URL 到頁面展示

可以帶出 緩存、DNS 解析、TCP 連接、HTTP 請求、重排重繪 等等非常多的子問題.

140.rgba()和opacity

• opacity 是屬性，rgba()是函數(shù)，計算之后是個屬性值
• opacity 作用于元素和元素的內(nèi)容，內(nèi)容會繼承元素的透明度，取值0-1
• rgba() 一般作為背景色 background-color 或者顏色 color 的屬性值，透明度由其中的 alpha 值生效，取值0-1

141.對arguments的理解，它是數(shù)組嗎？

arguments是一個類數(shù)組對象，只能在非箭頭函數(shù)內(nèi)部訪問，可以通過Array.from(arguments)將arguments轉(zhuǎn)化為數(shù)組，它和數(shù)組的區(qū)別是除了length和索引訪問跟數(shù)組一樣之外沒有push和pop等方法。

142.說說bind、call、apply的區(qū)別？并手寫實現(xiàn)一個bind的方法

call和apply都是為了解決改變this的指向; 作用都是相同的，只是傳參的方式不同。call可以接收一個參數(shù)列表，apply只接受一個參數(shù)數(shù)組

bind綁定完之后返回一個新的函數(shù)，不執(zhí)行。

Function.prototype.myCall = function (context = window) {context.fn = this;var args = [...arguments].slice(1);var result = context.fn(...args);delete context.fn;return result; }Function.prototype.myApply = function (context = window) {context.fn = this;var result// 判斷 arguments[1] 是不是 undefinedif (arguments[1]) {result = context.fn(...arguments[1])} else {result = context.fn()}delete context.fnreturn result; }Function.prototype.myBind = function (context) {if (typeof this !== 'function') {throw new TypeError('Error')}var _this = thisvar args = [...arguments].slice(1)return function F() {if (this instanceof F) {return new _this(...args, ...arguments)}return _this.apply(context, args.concat(...arguments))} }

143.說說你對this的理解

全局this 是window;函數(shù)this 是調(diào)用者;構(gòu)造函數(shù)的this 是new 之后的新對象,call 和 apply bind的this第一個參數(shù)

144.如何解決塊屬性標簽浮動后，在設(shè)置水平margin的情況下，在ie6中顯示的margin比設(shè)置的大的問題。

在float的標簽樣式控制中加入display:inline，將其轉(zhuǎn)化為行內(nèi)屬性。

145.頁面中的圖片元素為什么默認具有間距。

因為img標簽是行內(nèi)屬性標簽，所以只要不超出容器的寬度，img標簽都會排在一行里，但是部分瀏覽器的img標簽之間會有個間距。

出現(xiàn)間距時的解決方法：

• 可以使用float屬性讓img浮動布局
• 可以通過font-size屬性將空白字符大小設(shè)置成0
• 可以將圖片的display屬性設(shè)置成block

146.怎么實現(xiàn)盒模型

Element {// 標準盒模型 margin>border>padding>width(content)box-sizing: border-box;// ie盒模型 margin>width(border>padding>content)box-sizing: content-box; }

147.如何解決li元素內(nèi)出現(xiàn)浮動元素時產(chǎn)生間隙的問題

通過設(shè)置vertical-align：top/middle/bottom來解決

148.如何讓長單詞以及較長的url轉(zhuǎn)換

用word-break:break-all在詞內(nèi)換行。

149.如何解決display:inine-block在ie6，ie7下不兼容的問題

設(shè)置float:left屬性

150.如何解決ie6不支持position:fixed屬性的問題

ie6下用position:absolute和javascript來模擬，或者完全不用fixed屬性。

151.如何獲取自定義屬性數(shù)據(jù)

在ie下，可以使用獲取常規(guī)屬性的方法來獲取自定義屬性數(shù)據(jù)，也可以使用getAttribute()獲取自定義屬性數(shù)據(jù)。

在Firefox下，只能使用getAttribute()獲取自定義屬性數(shù)據(jù)。

所以要統(tǒng)一用getAttribute()獲取自定義屬性數(shù)據(jù)。

152.說說event.srcElement兼容問題

在ie下，even對象有srcElement屬性，但是沒有target屬性。

在Firefox下，even對象有target屬性，但是沒有srcElement屬性。

通過使用srcObj = event.srcElement ? event.srcElement:event.target 這種方式兼容所有瀏覽器。

153.說說body載入問題

• Firefox的body對象在body標簽沒有被字體完全讀入之前就存在。

• ie的body對象則必須在body標簽被瀏覽器完全讀入之后才存在。

154.如何實現(xiàn)元素水平居中

塊元素：

margin: 0 auto;

行內(nèi)元素：使用父元素選擇器{text-align:center;}

155.如何讓p元素垂直居中

用vertical-align:middle將行距增加到和整個p一樣高，然后插入文字，就垂直居中了。

156.margin的加倍問題

設(shè)置為float的p在id下設(shè)置的margin會加倍，這是ie6中都存在的一個bug。解決：在p里面加上：display:inline

.demo {float: left;margin: 5px;display: inline; }

157.如何解決ie6下圖片有空隙的問題

可以改變html的排版，設(shè)置img為display:block，或者設(shè)置vertical-align屬性為vertical-align:top/bottom/middle/text-bottom

158.如何讓文本與文本輸入框?qū)R

可以為輸入框添加vertical-algin: middle屬性。

159.解決ie無法設(shè)置滾動條顏色的問題

將body換成html

160.解決form標簽邊距兼容性問題

ul, form {margin: 0;padding: 0; }

161.構(gòu)造函數(shù)的特點

構(gòu)造函數(shù)的函數(shù)名首字母大寫，構(gòu)造函數(shù)類似于一個模板，可以使用new關(guān)鍵字執(zhí)行構(gòu)造函數(shù)，創(chuàng)建實例化對象。

162.javascript中繼承的實現(xiàn)方法

子類的實例可以共享父類的方法，子類可以覆蓋從父類擴展來的方法。

163.如何通過new構(gòu)造對象。

創(chuàng)建一個新的對象，這個對象的類型是object,將this變量指向該對象；將對象的原型指向該構(gòu)造函數(shù)的原型；執(zhí)行構(gòu)造函數(shù)，通過this對象，為實例化對象添加自身屬性方法；將this引用的新創(chuàng)建的對象返回。

function demo(dada) {var obj = {};// this = obj;obj.__proto__ = dada.prototype;Work.call(obj);return obj }

164.面向?qū)ο蟮奶匦?/h3>

抽象；封裝；繼承；多態(tài)

165.面向?qū)ο缶幊倘筇攸c概述

封裝：將描述同一個對象的屬性和方法定義在一個對象中。

繼承：父對象中的屬性和方法被子對象使用。

多態(tài)，同一個對象在不同情況下呈現(xiàn)不同的形態(tài)：重載（同一方法名，根據(jù)傳入的參數(shù)不同，而執(zhí)行不同操作）；重寫（子對象在繼承父對象的 屬性或方法后，重新定義一個新的屬性或方法，來覆蓋從父對象中繼承的屬性或方法）

166.this通常的指向

在運行時，this關(guān)鍵字指向正在調(diào)用該方法的對象

167.實現(xiàn)對象的繼承

Object.setPrototypeOf(子對象，父對象) 構(gòu)造函數(shù).prototype = 對象 var demo = Object.create(obj)

168.JSONP實現(xiàn)跨域

在html中，動態(tài)插入script標簽，通過script標簽引入一個javascript文件，這個javascript文載入成功后會執(zhí)行在url參數(shù)中指定的函數(shù)，并且會把需要的json數(shù)據(jù)作為參數(shù)傳入。

169.ajax請求

function ajax(url,fn){var xhr = new XMLHttpRequest();xhr.onreadystatechange = function() {if(xhr.readyState === 4){if(xhr.status === 200){fn && fn(JSON.parse(xhr.responseText));}}}xhr.open('GET',url, true);xhr.send(null); }

170.異步加載的方式

• 設(shè)置defer屬性，延遲腳本執(zhí)行，只支持ie。
• 設(shè)置async屬性，異步加載腳本。
• 創(chuàng)建script標簽，并插入DOM中，頁面渲染完成后，執(zhí)行回調(diào)函數(shù)。

點贊、收藏和評論

我是Jeskson(達達前端)，感謝各位人才的：點贊、收藏和評論，我們下期見！(如本文內(nèi)容有地方講解有誤，歡迎指出?謝謝，一起學習了)

我們下期見！

文章持續(xù)更新，可以微信搜一搜「 程序員哆啦A夢 」第一時間閱讀，回復【資料】有我準備的一線大廠資料，本文 http://www.dadaqianduan.cn/#/ 已經(jīng)收錄

github收錄，歡迎Star：https://github.com/webVueBlog/WebFamily

總結(jié)

以上是生活随笔為你收集整理的看不完的那种！前端170面试题+答案学习整理（良心制作）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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