2019前端經典面試題

1, html和xml有什麼區別
html是超文本標記語言 xml是可擴展標記語言
html語法寬鬆,xml語法嚴謹
html使用固有標記,xml沒有固有標記
html標籤預定義,xml標籤可擴展,可定義
html是用來顯示數據的,xml是用來描述和存儲數據的
2, css有哪幾種選擇器?權重的優先級?
第一種爲 屬性選擇器
第二種爲 id選擇器
第三種爲 class選擇器
第四種爲 僞類選擇器
第五種是 後代選擇器
第六種是 標籤選擇器
第七種是 通用選擇器
第八種是 僞元素選擇器

  1. 第一等:代表內聯樣式,如: style=””,權值爲1000。
  2. 第二等:代表ID選擇器,如:#content,權值爲0100。
  3. 第三等:代表類,僞類和屬性選擇器,如.content,權值爲0010。
  4. 第四等:代表類型選擇器和僞元素選擇器,如div p,權值爲0001。
  5. 通配符、子選擇器、相鄰選擇器等的。如*、>、+,權值爲0000。
  6. 繼承的樣式沒有權值。

3, 網頁有哪幾部分組成?
結構層:html
表示層:css
行爲層:js和dom

4, 一個200*200的div在不同分辨率屏幕上下左右居中,用css實現
Div{
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;

}

5, 闡述清楚浮動的幾種方式
第一種 父級div定義高度height 適合高度固定的佈局
第二種 父級div定義 overflow:hidden
第三種 結尾處加空標籤 clear: both 讓父級自動獲取高度
第四種 父級div定義 僞類:after 和 zoom

6, 解釋css sprites,如何使用?
CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的組合進行背景定位,background-position可以用數字能精確的定位出背景圖片的位置。

CSS Sprites爲一些大型的網站節約了帶寬,讓提高了用戶的加載速度和用戶體驗,不需要加載更多的圖片

7, 如何用原生js給一個按鈕綁定兩個onclick事件?
Var btn1 =document. getElementsById(“btn”);
btn1.addEnventListener(“click”,”hello1);
btn1.addEnventListener(“click”,”hello2);

function hello1(){
alert(“hello1”);
}
function hello2(){
alert(“hello2”);
}

8, 拖曳會用到哪些事件?
Dragstart
Dragenter
Dragover
Dragleave
Drag
Drop
Dragend

9, 請列舉jQuery中選擇器?
1, 基本選擇器
ID,class,元素之類的
2, 層級選擇器
返回的是jQuery對象纔可以進行的鏈式操作
如 後代元素,子元素,兄弟元素,相鄰元素
3, 過濾選擇器
基本過濾, 內容過濾, 可見性過濾, 屬性過濾, 子元素過濾和表單對象屬性過濾選擇器

10,JavaScript中有哪些定時器,他們的區別和用法是什麼?
SetTimeout 只會執行一次
SetInterval 會一直重複執行
方式都爲:settimeout(函數,時間)

11,請描述一下cookies sessionstorage 和localstorage區別
相同點:都儲存在客戶端上
不同點:1 儲存大小
Cookies 數據大小不能超過4k
Sessionstorage和Localstorage 比cookies大 ,可以達到5m或更多
2有效時間
Localstorage 儲存持久數據,瀏覽器關閉後也不會丟失,除非主動刪除數據
Sessionstorage 數據在關閉遊覽器之後自動刪除
Cookies 設置的cookies過期時間之前一直有效,即使窗口和遊覽器關閉。
3數據與服務器之間的交互方式
Cookies的數據會自動的傳遞到服務器,服務器端也可以寫cookies到客戶端
Sessionstorage和localstorage 不會上傳到服務器,僅在本地保存

12,計算一個數組arr所有元素的和
//可以通過 document.getelmentbyid().value;來獲取輸入框中的值
function sum2(){
var arr1=[1,2,3,4,5,6,7,8,9];
var sum1=0;
for (var i=0;i<=arr1.length;i++) {
if (typeof arr1[i]==“number”) {
sum1+=arr1[i];
}
}
document.write(sum1);
}

13,編寫一個方法去掉數組裏的重複內容 var arr=[1,2,3,4,5,1,2,3]
function arr1(){
var arr2 = [1,2,3,4,5,1,2,3];
var s= [];
for(i= 0;i<arr2.length;i++){
if(s.indexOf(arr2[i]) == -1){
s.push(arr2[i]);
}
}
console.log(s);
}

14,document.write和innerHTML的區別是什麼?
Document.write是直接寫入到頁面的內容流,如果之前沒有調用document.Open。那麼瀏覽器會自動調用open,頁面被重寫
innerHTML將內容寫入某個DOM節點,不會導致頁面全部重繪。精準。

15,ajax的步驟
Ajax 異步JavaScript和xml 能夠局部刷新網頁數據而不是重新加載整個網頁
第一步,創建xmlhttprequest對象,var xmlhttp = new XmlHTTPrequest();
Xmlhttprequest對象用來和服務器交換數據
Var xhttp;
If(windows.XMLHttpRequest){
//現在主流瀏覽器
Xhttp = new XMLHttpRequst();
}else{
Xhttp =new ActiveXObject(“Mirosoft.XMLHTTP”);
}
第二步,xmlHTTPrequest對象的open()和send()方法發送資源請求到服務器,
第三步,使用xmlhttprequest對象的responseText或responseXML屬性獲得服務器的響應
第四部,onreadystatechange函數,當發送請求到服務器,我們想要服務器響應執行一些功能就需要使用使用onreadystatechange函數,每次xmlhttprequest對象的readystate發生改變都會觸發onreadystatechange函數。

16,xml和json的區別,請用四點來形容
Json相對於xml來講,數據體積小,傳輸速度快
Json與JavaScript更好交互,更好的數據交互
Xml對數據描述性比較好
Json的解析速度要遠遠快於XML

17,box-sizing常用的屬性有哪些?有哪些作用?

屬性值
· box-sizing:content-box
· box-sizing:border-box
· box-sizing:inherit
content-box

· 這是box-sizing的默認屬性值
· 是CSS2.1中規定的寬度高度的顯示行爲
· 在CSS中定義的寬度和高度就對應到元素的內容框
· 在CSS中定義的寬度和高度之外繪製元素的內邊距和邊框

border-box

· 在CSS中微元素設定的寬度和高度就決定了元素的邊框盒
· 即爲元素在設置內邊距和邊框是在已經設定好的寬度和高度之內進行繪製
· CSS中設定的寬度和高度減去邊框和內間距才能得到元素內容所佔的實際寬度和高度

(Q1)box-sizing: content-box|border-box|inherit;
(Q2)content-box:寬度和高度分別應用到元素的內容框。在寬度和高度之外繪製元素的內邊距和邊框(元素默認效果)。
border-box:元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。

18,使一個300*200的div實現屏幕水平居中
前面已經有一種方法了
第二種方法:
div{
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
position: absolute;
height: 200px;
width: 300px;
}
第三種方法是利用jQuery
$(window).resize(function(){

$(".myblock").css({

    position: "absolute",

    left: ($(window).width() - $(".myblock").outerWidth())/2,

    top: ($(window).height() - $(".myblock").outerHeight())/2     });        

});
此外在頁面載入時,就需要調用resize()方法
$(function(){
$(window).resize();
});

19,三個盒子,左右定寬,中間自適應的方法有幾個?
第一種方法:左右採用浮動 中間採用margin-left和margin-right的方法
代碼:

11
33
22

第二種方法:左右採用絕對定位,中間採用margin-left和margin-right
代碼:


11

33

22

第三種方法 負margin值

main content
left content

#main {
float: left;
width: 100%;
}

#mainContainer {
margin: 0 230px;
height: 200px;
background: green;
}

#left {
float: left;
margin-left: -100%;
width: 230px}

#right {
float: left;
margin-left: -230px;
width: 230px;
}

#left .inner,

#right .inner {
background: orange;
margin: 0 10px;
height: 200px;
}

20,js有幾種數據類型?其中基本數據類型有哪些?
基本數據類型有 Boolean,undefined,null,number,string
應用類型有 object,array,function

21,undefined和null的區別
Null 代表空值,代表一個空對象指針,一個特殊的對象值
Undefined 是未定義,類型也是undefined

22,http和https有什麼區別?如何靈活運用?
Http是http運行在TCP之上,傳輸內容是明文,客戶端和服務器無法驗證對方身份。
HTTPS是http運行在SSL/tls之上,SSL/tls運行在TCP上,所有內容都是經過加密。加密採用對稱加密,但是祕鑰用服務器證書進行非對稱加密。服務器和客戶端都是可以互相驗證身份。

23,常見的Http狀態碼
2開頭,請求成功,表示成功處理了請求的狀態代碼
3開頭,請求重定向,表示完成請求,需要進一步操作,一般是重定向
4開頭,請求錯誤,表示請求出錯,妨礙了服務器的處理
5開頭,這些狀態碼錶示服務器在嘗試處理請求時發生內部錯誤,服務器本身出錯而不是請求出錯

24,如何進行網站性能的優化
原因:用戶角度 加載速度提高,更好的交互體驗
服務商角度 減少頁面請求,降低帶寬,節省資源
方法:1,JavaScript優化和打包
2,按需加載資源
3,在使用DOM操作庫時用上array-ids
4,緩存
5,啓用HTTP/2
6,應用性能分析
7,使用負載均衡方案
8,同構
9,使用索引加快數據庫查詢
10,使用更快的轉譯方案
11,避免因JavaScript和css的使用而阻塞渲染
12,圖片編碼優化

25,react和vue有哪些不同,說說你對這兩個框架的看法
相同點:都支持服務器渲染
都有virtual DOM,組件化開發,通過props參數進行父子組件數據的傳遞,都實現了webComponent規範
數據驅動視圖
都支持native方案,react的react native 和vue的weex

不同點:react嚴格上只針對MVC的view層,vue則是mvvm模式
Virtual DOM不一樣,vue會跟蹤每一個組件的依賴關係,不需要重新渲染整個組件樹,而對於react來說,每次應用狀態被改變,全部組件都會被重新渲染,所以react需要shouldComponentUPdate這個生命週期函數來進行控制。
組件的寫法不一樣。。。
數據綁定,vue是雙向的,react是單向的
State對象在react應用中不可變的,需要使用setstate方法更新狀態,在vue中state對象對象不是必須的,數據由data屬性在vue對象中管理

26,什麼是mvvm mvc 有什麼區別,原理?
1,MVC(model-view-controller)
MVC是比較直觀的架構模式,用戶模式->view(負責接收用戶的操作輸入)->controller(業務邏輯處理)->view(將結果反饋給view)

2,MVVM(model-view-viewmodel)
將”數據模型數據雙向綁定”的思想作爲核心,因此model和view沒有什麼關係,之後痛過viewmodel進行交互,而model和viewmodel之間的交互是雙向的,因此數據的視圖的變化會同時修改數據源,而數據源的數據變化也會立刻反應view。

27,px和em的區別
Px表示像素,是一個絕對單位,不會因爲其他元素而改變
Em表示相對於父元素的字體大小,em是相對單位,會受到其他元素的影響

28,優雅降級和漸進增強
漸進增強(向上兼容):一開始就針對低版本瀏覽器進行構築界面,完成基本功能,然後在針對高級瀏覽器進行效果,交互,追加功能達到更好的體驗
優雅降級(向下兼容):一開始就構建站點的完整功能,然後針對瀏覽器測試和修復。

29,eval()的作用
把字符串參數解析成JS代碼並運行,並返回執行的結果;
例如:eval(“2+3”);//執行加運算並返回執行的結果。
Eval(“var age=10”);//聲明一個變量age
Eval()的作用域
Function(){
Eval(“var x=1”);//等效於var x=1;
Console.log(x);//輸出1
}
a();
console.log(x);//錯誤,沒有定義x

30,js哪些操作會泄露內存
1, 意外的全局變量引起的內存泄漏
2, 閉包引起的
3, 沒有清理DOM元素的應用
4, 被遺忘的定時器或者回調
5, 子元素存在引起的

31,瀏覽器緩存有哪些?通常的緩存有哪幾種?
1, HTTP緩存
2, Websql
3, Cookies
4, Localstorage
5, Sessionstorage
6, Flash緩存

32,bootstrap響應式原理
百分比佈局+媒體查詢

33,關於js事件冒泡與js時間代理(事件委託)
1, 事件冒泡:
當一個子元素被觸發時(如onclick),該事件會從事件源(被觸發的子元素)開始逐級向上傳播,出發父級元素的點擊事件。
2, 事件委託:
將子元素的事件通過冒泡的形式交由父元素來執行
例如:

  1. var ul = document.getElementById(‘parentUl’);
  2. ul.onclick=function (event) {  
    
  3.   var e = event||window.event,  
    
  4.           source = e.target || e.srcElement;//target表示在事件冒泡中觸發事件的源元素,在IE中是srcElement  
    
  5.     if(source.nodeName.toLowerCase() == "li"){   //判斷只有li觸發的纔會輸出內容  
    
  6.         alert(source.innerHTML);  
    
  7.     }  
    
  8.     stopPropagation(e);                           //阻止繼續冒泡  
    
  9. };  
    
  10. function addElement() {  
    
  11.     var li = document.createElement('li');  
    
  12.     li.innerHTML="我是新孩子";  
    
  13.     ul.appendChild(li);  
    
  14. }  
    

34,css樣式覆蓋規則
規則一:由於繼承而發生樣式衝突時,最近祖先獲勝(就近原則);
規則二:繼承樣式和直接指定的樣式衝突時,直接指定的樣式獲勝
規則三:直接指定樣式發生衝突時,樣式權值高的獲勝;
規則四:樣式權值相等時,後者獲勝。
規則五:!important的樣式不被覆蓋。

35,請簡要描述margin重合問題以及解決方式
1,同向margin重疊
這時候重疊之後的margin值由發生重疊兩片的最大值決定;如果其中一個出現負值,則由最大的正邊距減去絕對值最大的負邊距,如果沒有最大正邊距,則由0減去絕對值最大的負邊距。
解決方法:
(1) 在最外層的div中加入overflow:hidden;zoom:1;(zoom這個屬性是ie專有屬性,除了設置或者檢索對象的縮放比例之外,它還有可以觸發ie的haslayout屬性,清除浮動,清除margin重疊等作用。)
(2) 在最外層加入padding:1px;
(3) 在最外層加入:border:1px solid #000000;
2,異向重疊問題:
Float:left(ie6專屬,或解決ie8+等瀏覽器的同向重疊問題)

36,position的值,relative\absolute\fixed分別相對於進行誰定位?
Absolute:絕對定位 相對於最近一級
Fixed:絕對定位 相對於瀏覽器窗口或frame進行定位
Relative:相對定位 相對於其在普通流的位置
Static:默認值 沒有定位
Sticky:粘性定位 文檔位置根據正常文檔流計算得出

37,什麼是閉包,如何使用,爲什麼使用?
閉包就是在函數內定義一個函數。
優點:可以讀取函數內部的變量 這些變量的值始終保存在內存中
缺點:內存消耗大且容易造成內存泄漏 閉包會在父函數外部,改變父函數內部變量的值

38,請解釋一下jsonp的工作原理,以及它爲什麼不是真正的ajax。
Jsonp是一個簡單的跨域方式;HTML中的script標籤可以加載並執行其他域的javascript,於是我們可以通過script標記來動態加載其他域的資源
JSONP易於實現,但是也會存在一些安全隱患,如果第三方的腳本隨意地執行,那麼它就可以篡改頁面內容,截獲敏感數據。但是在受信任的雙方傳遞數據,JSONP是非常合適的選擇。
AJAX是不跨域的,而JSONP是一個是跨域的,還有就是二者接收參數形式不一樣

39,請解釋一下JavaScript的同源政策。
同源政策規定跨域之間的腳本是隔離的,一個域的腳本不能訪問和操作另外一個域的絕大部分屬性和方法。當兩個域具有相同的協議,相同的端口,相同的host,那麼我們就可以認爲是相同的域。

40,怎樣添加,移除,移動,複製,創建和查找節點?
1, 創建新節點
Createdocumentfragment() //創建一個DOM片段
CreateElement() //創建一個具體的元素
CreateTextNode() //創建一個文本節點

2, 添加,移除,替換,插入
Appendchild()//添加
Removechild() //移除
Replacechild() //替換
InsertBefore() //插入

3, 查找
GetelementsBytagname()//通過標籤名
Getelementsbyname()//通過元素的name屬性的值
GetelementbyId()//通過元素id,唯一性

41,垃圾回收機制方式及內存管理
垃圾回收機制
1, 定義和用法:垃圾回收機制,執行環境負責管理代碼執行過程中使用的內存。
2, 原理:垃圾回收機制會定期找出那些不再使用的變量,然後釋放其內存。但是這個過程不是實時的,開銷較大,所以會按固定時間間隔週期性的執行。
3, 實例如下:
function fn1() {
var obj = {name: ‘hanzichi’, age: 10};
}
function fn2() {
var obj = {name:‘hanzichi’, age: 10};
return obj;
}var a = fn1();var b = fn2();
fn1中定義的obj爲局部變量,而當調用結束後,出了fn1的環境,那麼該塊內存會被js引擎中的垃圾回收器自動釋放;在fn2被調用的過程中,返回的對象被全局變量b所指向,所以該塊內存並不會被釋放。

4, 標記回收策略:標記清除和引用計數。

42,jQuery的事件委託方法blind,live,delegate,on之間有什麼區別?
(1),blind
定義和用法:主要用於給選擇到的元素上綁定特定事件類型的監聽函數;

語法:bind(type,[data],function(eventObject));

特點:

(1)、適用於頁面元素靜態綁定。只能給調用它的時候已經存在的元素綁定事件,不能給未來新增的元素綁定事件。

(2)、當頁面加載完的時候,你纔可以進行bind(),所以可能產生效率問題。

實例如下:$( “#members li a” ).bind( “click”, function( e ) {} );

(2),live
定義和用法:主要用於給選擇到的元素上綁定特定事件類型的監聽函數;

語法:live(type, [data], fn);

特點:

(1)、live方法並沒有將監聽器綁定到自己(this)身上,而是綁定到了this.context上了。

(2)、live正是利用了事件委託機制來完成事件的監聽處理,把節點的處理委託給了document,新添加的元素不必再綁定一次監聽器。

(3)、使用live()方法但卻只能放在直接選擇的元素後面,不能在層級比較深,連綴的DOM遍歷方法後面使用,即(ul").live...(“ul”").live...可以,但(“body”).find(“ul”).live…不行;

實例如下:$( document ).on( “click”, “#members li a”, function( e ) {} );

(3),delegate
定義和用法:將監聽事件綁定在就近的父級元素上

語法:delegate(selector,type,[data],fn)

特點:

(1)、選擇就近的父級元素,因爲事件可以更快的冒泡上去,能夠在第一時間進行處理。

(2)、更精確的小範圍使用事件代理,性能優於.live()。可以用在動態添加的元素上。

實例如下:

$("#info_table").delegate(“td”,“click”,function(){/顯示更多信息/});

$(“table”).find("#info").delegate(“td”,“click”,function(){/顯示更多信息/});

(4),on
定義和用法:將監聽事件綁定到指定元素上。

語法:on(type,[selector],[data],fn)

實例如下:$("#info_table").on(“click”,“td”,function(){/顯示更多信息/});參數的位置寫法與delegate不一樣。

說明:on方法是當前JQuery推薦使用的事件綁定方法,附加只運行一次就刪除函數的方法是one()。

總結:.bind(), .live(), .delegate(), .on()分別對應的相反事件爲:.unbind(),.die(), .undelegate(),.off()

43,瀏覽器的內核分別是什麼?
IE:trident內核
Firefox:gecko內核
Safari:webkit內核
Opera:現在blink內核
Chrome:blink內核

44,瀏覽器是如何渲染畫面的?
渲染的流程如下:
1, 解析HTML文件,創建dom樹
自上而下,遇到任何樣式和腳本都會阻塞
2, 解析css。優先級:瀏覽器默認設置<用戶設置<外部樣式<內聯樣式<HTML中的style樣式;
3, 將css和DOM合併,構建渲染樹
4, 佈局和繪製,重繪和重排

45,css3新增了很多屬性,一起分析一下新增的屬性:
1.CSS3邊框:

· border-radius:CSS3圓角邊框。在 CSS2 中添加圓角矩形需要技巧,我們必須爲每個圓角使用不同的圖片,在 CSS3 中,創建圓角是非常容易的,在 CSS3 中,border-radius 屬性用於創建圓角。border:2px solid;

· box-shadow:CSS3邊框陰影。在 CSS3 中,box-shadow 用於向方框添加陰影。box-shadow:10px 10px 5px #888888;

· border-image:CSS3邊框圖片。通過 CSS3 的 border-image 屬性,您可以使用圖片來創建邊框。border-image:url(border.png) 30 30 round;

2.CSS3背景:

· background-size: 屬性規定背景圖片的尺寸。在 CSS3 之前,背景圖片的尺寸是由圖片的實際尺寸決定的。在 CSS3 中,可以規定背景圖片的尺寸,這就允許我們在不同的環境中重複使用背景圖片。您能夠以像素或百分比規定尺寸。如果以百分比規定尺寸,那麼尺寸相對於父元素的寬度和高度。

· background-origin :屬性規定背景圖片的定位區域。背景圖片可以放置於 content-box、padding-box 或 border-box 區域。

3.CSS3文字效果:

· text-shadow:在 CSS3 中,text-shadow 可向文本應用陰影。text-shadow:5px 5px 5px #FFFFFF;

· word-wrap :單詞太長的話就可能無法超出某個區域,允許對長單詞進行拆分,並換行到下一行:p{word-wrap:break-word;}

4.CSS3 2D轉換:

transform:通過 CSS3 轉換,我們能夠對元素進行移動、縮放、轉動、拉長或拉伸。

· translate():元素從其當前位置移動,根據給定的 left(x 座標) 和 top(y 座標) 位置參數:transform:translate(50px,100px);值 translate(50px,100px) 把元素從左側移動 50 像素,從頂端移動 100 像素。

· rotate():元素順時針旋轉給定的角度。允許負值,元素將逆時針旋轉。transform:rotate(30deg);值 rotate(30deg) 把元素順時針旋轉 30 度。

· scale():元素的尺寸會增加或減少,根據給定的寬度(X 軸)和高度(Y 軸)參數:transform:scale(2,4);值 scale(2,4) 把寬度轉換爲原始尺寸的 2 倍,把高度轉換爲原始高x() 5.CSS3 3D轉換:

· rotateX():元素圍繞其 X 軸以給定的度數進行旋轉。transform:rotateX(120deg);

· rotateY():元素圍繞其 Y 軸以給定的度數進行旋轉。transform:rotateY(120deg);

6.CSS3 過渡:當元素從一種樣式變換爲另一種樣式時爲元素添加效果。

7.CSS3動畫:通過 CSS3,我們能夠創建動畫,這可以在許多網頁中取代動畫圖片、Flash 動畫以及 JavaScript。

8.CSS3多列:

· column-count:屬性規定元素應該被分隔的列數。

· column-gap:屬性規定列之間的間隔。

· column-rule :屬性設置列之間的寬度、樣式和顏色規則。

9.CSS3用戶界面:

· resize:屬性規定是否可由用戶調整元素尺寸。

· box-sizing:屬性允許您以確切的方式定義適應某個區域的具體內容。

· outline-offset :屬性對輪廓進行偏移,並在超出邊框邊緣的位置繪製輪廓。

46,從輸入url到顯示頁面,都經歷了什麼?
1、首先,在瀏覽器地址欄中輸入url
2、瀏覽器先查看瀏覽器緩存-系統緩存-路由器緩存,如果緩存中有,會直接在屏幕中顯示頁面內容。若沒有,則跳到第三步操作。
3、在發送http請求前,需要域名解析(DNS解析)(DNS(域名系統,Domain Name System)是互聯網的一項核心服務,它作爲可以將域名和IP地址相互映射的一個分佈式數據庫,能夠使人更方便的訪問互聯網,而不用去記住IP地址。),解析獲取相應的IP地址。
4、瀏覽器向服務器發起tcp連接,與瀏覽器建立tcp三次握手。(TCP即傳輸控制協議。TCP連接是互聯網連接協議集的一種。)
5、握手成功後,瀏覽器向服務器發送http請求,請求數據包。
6、服務器處理收到的請求,將數據返回至瀏覽器
7、瀏覽器收到HTTP響應
8、讀取頁面內容,瀏覽器渲染,解析html源碼
9、生成Dom樹、解析css樣式、js交互
10、客戶端和服務器交互
11、ajax查詢

47,對標籤有什麼理解?
Meta標籤提供關於html文檔的元數據。它不會顯示在頁面上,但是對於機器是可讀的。可用於瀏覽器,搜索引擎,或其他web服務。
作用:
Meta裏的數據是供機器解讀的,告訴機器如何解析這個頁面,還有一個用途是可以添加服務器發送到瀏覽器的http頭部內容。

48,h5新特性,
(1)新的語義標籤和屬性
(2)表單新特性
(3)視頻和音頻
(4)Canvas繪圖
(5)SVG繪圖
(6)地理定位
(7)拖放API

49,display:none 和 visibility:hidden的區別
1.display:none是徹底消失,不在文檔流中佔位,瀏覽器也不會解析該元素;visibility:hidden是視覺上消失了,可以理解爲透明度爲0的效果,在文檔流中佔位,瀏覽器會解析該元素;

2.使用visibility:hidden比display:none性能上要好,display:none切換顯示時visibility,頁面產生迴流(當頁面中的一部分元素需要改變規模尺寸、佈局、顯示隱藏等,頁面重新構建,此時就是迴流。所有頁面第一次加載時需要產生一次迴流),而visibility切換是否顯示時則不會引起迴流。

50,JavaScript如何檢測一個變量是一個string類型
typeof(obj) === “string”
typeof obj === “string”
obj.constructor === String

**51,(document).ready()Window.onload(1)window.onload()(2)(document).ready()方法和Window.onload有什麼區別?** (1)、window.onload方法是在網頁中所有的元素(包括元素的所有關聯文件)完全加載到瀏覽器後才執行的。 (2)、(document).ready() 方法可以在DOM載入就緒時就對其進行操縱,並調用執行綁定的函數。

52,get和post之間的區別?
1, 傳輸大小 get比post傳輸內容要小
2, Get請求參數會被保留在歷史記錄中,而post不會
3, Post是加密傳輸,get是明文傳輸,post要比get安全
4, Get只能接受url編碼,而post沒有限制

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章