前端面試

1.Vue的理解,總結

2.用css2和css3分別寫一下垂直居中和水平居中
body中的結構

	<body>
		<div class="box"></div>
	</body>

CSS2:

<style>
			html,body{
				width: 100%;
				height: 100%;
				position: relative;
			}
			.box{
				width: 200px;
				height: 200px;
				background-color: red;
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -100px;
				margin-top: -100px;
			}
		</style>

CSS3:

<style>
			html,body{
				width: 100%;
				height: 100%;
				position: relative;
			}
			.box{
				width: 200px;
				height: 200px;
				background-color: red;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
			}
		</style>

擴展:flex佈局垂直水平居中

html,body{
				width: 100%;
				height: 100%;
				display:flex;
				justify-content: center;
				align-items: center; 
			}
			.box{
				width: 200px;
				height: 200px;
				background-color: red;			
			}

3.你對計算機網絡的認識怎麼樣

1.概念
	計算機網絡是指將地理位置不同的具有獨立功能的多臺計算機及其外部設備,
	通過通信線路連接起來,在網絡操作系統,網絡管理軟件及網絡通信協議的管理和協調下,
	實現資源共享和信息傳遞的計算機系統
2.計算機網絡組成
	資源子網:實現資源共享功能的設備及其軟件集合;
	通信子網:各種傳輸介質、通信設備和相應協議;
3.計算機網絡功能
	數據通信:最基本和最重要的功能;
	資源共享、分佈式處理、提高可靠性、負載均衡;
4.計算機網絡分類
	按分佈範圍:廣域網、城域網、局域網;
	按交換技術:電路交換、報文交換、分組交換;
5.計算機網絡性能指標
	帶寬(Hz)、端到端時延(包括傳輸、傳播、排隊、處理時延)、往返時延(RTT)、吞吐量、比特率(bps);
6.計算機網絡層次
	五層模型:物理層(bit)、鏈路層(幀)、網絡層(datagram報文/分組,IP協議)、運輸層(TCP/UDP)、應用層(使用協議包括DNS、FTP、SMTP、HTTP等);
	七層模型:增加了表示層、會話層;
	物理層、鏈路層、網絡層——通信子網、應用層——資源子網;
7.HTTP協議(無狀態協議)
	請求報文頭部:請求行、請求頭部、空行、需求數據;
	響應報文頭部:狀態行、請求頭部、空行、響應行;
	基本發送順序:建立TCP連接(TCP/IP協議簇,端口號80)、發送請求命令(eg:GET HTTP/1.1)、發送請求頭部(空行通知browser頭部發送結束);
	基本響應順序:服務器應答第一部分包括協議版本號和狀態碼(eg:HTTP/1.1 200 OK)、服務器應答請求頭部的數據、服務器發送實際所請求的數據、
				 關閉TCP連接(若有connection:keep-alive則不關閉);
	持續連接:所有的請求及響應都通過同一個TCP連接發送傳輸,該連接持續打開;
	非持續連接:每條請求/響應都需要建立一條新的TCP連接;
8.cookie
	四大組件:HTTP請求報文中的cookie首部行、HTTP響應報文中的cookie首部行、用戶端系統中保留的cookie文件、位於web站點的後端數據庫;
9.DNS協議
	工作過程:同一臺用戶主機上運行DNS應用客戶端、瀏覽器將該URL中抽取出主機名並傳給DNS應用客戶端、
	DNS客戶端向DNS服務器發送一個包含主機名的請求、服務器將包含對應主機名IP的響應報文發送給客戶端;
	
原文:https://blog.csdn.net/qq_42172815/article/details/84432680 

4.講述一下計算機網絡的七層

OSI模型有7層結構,每層都可以有幾個子層。
	OSI的7層從上到下分別是 7 應用層 6 表示層 5 會話層 4 傳輸層 3 網絡層 2 數據鏈路層 1 物理層 ;
	其中高層(即7、6、5、4層)定義了應用程序的功能,下面3層(即3、2、1層)主要面向通過網絡的端到端的數據流。
	應用層 (Application)
		網絡服務與最終用戶的一個接口。
		協議有:HTTP FTP TFTP SMTP SNMP DNS TELNET HTTPS POP3 DHCP
		
	表示層(Presentation Layer)
		數據的表示、安全、壓縮。(在五層模型裏面已經合併到了應用層)
		格式有,JPEG、ASCll、DECOIC、加密格式等
		
	會話層(Session Layer)
		建立、管理、終止會話。(在五層模型裏面已經合併到了應用層)
		對應主機進程,指本地主機與遠程主機正在進行的會話

	傳輸層 (Transport)
		定義傳輸數據的協議端口號,以及流控和差錯校驗。
		協議有:TCP UDP,數據包一旦離開網卡即進入網絡傳輸層

	網絡層 (Network)
		進行邏輯地址尋址,實現不同網絡之間的路徑選擇。
		協議有:ICMP IGMP IP(IPV4 IPV6) ARP RARP

	數據鏈路層 (Link)
		建立邏輯連接、進行硬件地址尋址、差錯校驗[2] 等功能。(由底層網絡定義協議)
		將比特組合成字節進而組合成幀,用MAC地址訪問介質,錯誤發現但不能糾正。

	物理層(Physical Layer)
		建立、維護、斷開物理連接。(由底層網絡定義協議)
	
轉載:https://www.cnblogs.com/aeolian/p/7698754.html

5.TCP和UDP的區別是什麼

TCP是面向連接的協議,UDP是無連接協議;
TCP是可靠、有序、無界的,而UDP不可靠、無序、有界;
TCP有流量控制(擁塞控制),而UDP 沒有;
TCP傳輸速度慢,而UDP傳輸速度快;
TCP是重量級的,UDP是輕量級的,TCP的頭部比 UDP大;
TCP面向字節流,而UDP面向報文;
TCP是點對點連接的,而UDP一對一,一對多,多對多都可以;
TCP適合用於網頁,郵件等,而UDP適合用於視頻,語音廣播等。

6.TCP和UDP屬於計算機網絡中的哪一層

網際層協議:IP協議、ICMP協議、ARP協議、RARP協議
傳輸層協議:TCP協議、UDP協議
應用層協議:FTP、Telnet、SMTP、HTTP、RIP、NFS、DNS

7.HTTPS是什麼?HTTPS和HTTP的區別

HTTP:超文本傳輸協議(英文:HyperText Transfer Protocol,縮寫:HTTP)是一種用於分佈式、協作式和超媒體信息系統的應用層協議[1]。
	HTTP是萬維網的數據通信的基礎。設計HTTP最初的目的是爲了提供一種發佈和接收HTML頁面的方法。通過HTTP或者HTTPS協議請求的資源由統一資源標識符(Uniform Resource Identifiers,URI)來標識。
超文本傳輸安全協議(英語:Hypertext Transfer Protocol Secure,縮寫:HTTPS,常稱爲HTTP over TLS,HTTP over SSL或HTTP Secure)是一種通過計算機網絡進行安全通信的傳輸協議。
	HTTPS經由HTTP進行通信,但利用SSL/TLS來加密數據包。HTTPS開發的主要目的,是提供對網站服務器的身份認證,保護交換數據的隱私與完整性。現在HTTPS開始廣泛使用於保護所有類型網站上的網頁真實性,保護賬戶和保持用戶通信,身份和網絡瀏覽的私密性。

HTTP和HTTPS的差異
	HTTP是不安全的,且攻擊者通過監聽和中間人攻擊等手段,可以獲取網站帳戶和敏感信息等。
	HTTPS被設計爲可防止前述攻擊,並在正確配置時被認爲是安全的。  
HTTP的URL由“http://”起始且默認使用端口80,而HTTPS的URL由“https://”起始且默認使用端口443。  
HTTP協議運行在TCP之上,所有傳輸的內容都是明文,客戶端和服務器端都無法驗證對方的身份。
HTTPS是運行在SSL/TLS之上的HTTP協議,SSL/TLS運行在TCP之上。所有傳輸的內容都經過加密,加密採用對稱加密,但對稱加密的密鑰用服務器方的證書進行了非對稱加密。

原文:https://blog.csdn.net/zgh0711/article/details/81567818 

8.介紹幾種常見的狀態碼

	1XX(臨時響應):表示臨時響應並需要請求者繼續執行操作的狀態代碼;
		100(繼續):請求者應當繼續提出請求;
		101(切換協議):請求者要求服務器切換協議;
	2XX(成功):表示成功處理了請求的狀態代碼;
		201(已創建):請求成功並且服務器創建了新資源;
		202(已接受):服務器已接受請求,但尚未處理;
		203(非授權信息):服務器已成功處理了請求,但返回信息可能來自另一來源;
		204(無內容):服務器成功處理了請求,但沒有返回任何內容;
		205(重置內容):服務器成功處理了請求,但沒有返回內容,要求請求者重置內容;
	3XX(重定向):表示要完成請求,需要進一步操作;
		300(多種選擇):針對請求,服務器可執行多種操作;
		301(永久移動):請求的網頁已永久移動到新位置;
		302(臨時移動):服務器目前從不同的位置的網頁響應請求;
		304(未修改):自從上次請求後,請求的網頁未修改過;
	4XX(請求錯誤):表示請求可能出錯,妨礙了服務器的處理;
		400(錯誤請求):服務器不理解請求的語法;
		401(未授權):請求要求身份驗證;
		403(禁止):服務器禁止請求;
		404(未找到):服務器找不到請求的網頁;
	5XX(服務器錯誤):表示服務器在嘗試處理請求時發生內部錯誤;
		500(服務器內部錯誤):服務器運到錯誤,無法完成請求;
		502(錯誤網關):服務器作爲網關或代理,從上游服務器收到無效響應;
		503(服務不可用):服務器目前無法使用;
		504(網關超時):服務器作爲網關或代理,但是沒有及時從上游服務器收到請求。
		
	原文:https://blog.csdn.net/zgh0711/article/details/81567818 

9.閉包是什麼

概念
	(1)閉包指的是一個函數作用域
	(2)閉包包含一個函數,且這個函數調用了作用域裏的內容
	同時滿足才叫閉包
例子:
		<script>
			function f1() {
				var a = 1;

				function f2() {
					console.log(a);
				}
				return f2;
			}

			var a = 2;
			var f = f1();
			f()  // 1
		</script>
特點
	1.閉包內的變量不會影響到全局變量,也不會被全局變量所影響
	2.閉包中被函數引用的局部變量不會被垃圾回收機制回收
	3.可以創建私有變量和私有函數
	4.可以把需要公開的變量和方法綁定在window上放出來
補充
	閉包的用途:可以讀取函數內部的變量,並且讓這些變量的值始終保持在內存中。
	垃圾回收機制的原理:確定變量中哪些還在繼續使用的,哪些已經不用的,然後垃圾收集器每隔固定的時間就會清			理一下,釋放內存。
	需要看一下這個文章 https://www.cnblogs.com/afrog/p/4276709.html
	
轉載:https://segmentfault.com/a/1190000009594773

10.NaN是什麼,用typeof會輸出什麼

NaN   Not a Number   
typeof(NaN)  輸出Number

11.js的隱性轉換和顯性轉換

JS中的數據類型呦簡單數據類型和複雜數據類型
			簡單數據類型有 String Boolean Null Undefined NaN
			複雜數據類型有Object 
			各種數據類型的typeof
				typeof(string)     string
				typeof(a)          undefined   //a沒有定義或者沒有初始化
				typeof(true)       Boolean
				typeof(null)       Object      //object 可能是null也可能是對象
				typeof(object)     object
				typeof(number)      number
				typeof(function)    function
			顯示轉換
				Boolean()    轉換成布爾值
				Number()  parseInt()  parseFloat()   轉換成數值類型
				toString()  String()   //轉換成字符串  toString()對於Null和Undefine類型的數值的不起作用
			隱式轉換
				轉成string類型:   +(字符串連接符)
				轉成number類型:   ++/--(自增自減運算符) + - * / %(算術運算符) > < >= <= == != === !=== (關係運算符)
				轉成boolean類型:!(邏輯非運算符)

12.跨域問題如何解決

跨域是指一個域下的文檔或腳本試圖去請求另一個域下的資源,這裏跨域是廣義的。
	同源是指"協議+域名+端口"三者相同,即便兩個不同的域名指向同一個ip地址,也非同源。
	1. 通過jsonp跨域
		jsonp在頁面上引入不同域上的js腳本文件實現請求不同域上的數據
		(1) 通過script標籤引入一個js文件
		(2) js文件載入成功後會執行我們在url參數中指定的函數,並且會把我們需要的json數據作爲參數傳入
		注:需要服務器端的頁面進行相應的配合
	2. 通過修改document.domain來跨子域
	3. 使用window.name來進行跨域
		window對象有個name屬性,該屬性有個特徵:即在一個窗口(window)的生命週期內,窗口載入的所有的頁面都是共享一個window.name的,
		每個頁面對window.name都有讀寫的權限,window.name是持久存在一個窗口載入過的所有頁面中的,並不會因新頁面的載入而進行重置。

13.babel

Babel 是一個 JavaScript 編譯器,可以實現將ES6編譯爲ES5代碼

14.用js實現判斷一個變量是否爲整數的函數

1.
function done(num) {
  return (typeof num === 'number') && (num % 1 === 0);
}
2.
function done(num) {
  return Math.round(num) === num;
}
3.(如果參數傳遞的是一個Number對象的話,就不能進行正確判斷了,下面對代碼進行一下改善,2的完善)
var a="12";
var b=12;
var obj=new Number(13);
function done(num){
  if(Object.prototype.toString.call(num).slice(8,-1)=="Number"){
    if(num.toString()%1===0){
      return true;
    }
  }
  return false;
}
console.log(done(a));
console.log(done(b));
console.log(done(obj));

15.進程和線程是什麼

對於操作系統來說,一個任務就是一個進程(Process),比如打開一個瀏覽器就是啓動一個瀏覽器進程,打開一個記事本就啓動了一個記事本進程,
	打開兩個記事本就啓動了兩個記事本進程,打開一個Word就啓動了一個Word進程。
	有些進程還不止同時幹一件事,比如Word,它可以同時進行打字、拼寫檢查、打印等事情。
	在一個進程內部,要同時幹多件事,就需要同時運行多個“子任務”,我們把進程內的這些“子任務”稱爲線程(Thread)。
	由於每個進程至少要幹一件事,所以,一個進程至少有一個線程
	區別:
	地址空間:同一進程的線程共享本進程的地址空間,而進程之間則是獨立的地址空間。
	資源擁有:同一進程內的線程共享本進程的資源如內存、I/O、cpu等,但是進程之間的資源是獨立的。
     一個進程崩潰後,在保護模式下不會對其他進程產生影響,但是一個線程崩潰整個進程都死掉。所以多進程要比多線程健壯。
     進程切換時,消耗的資源大,效率高。所以涉及到頻繁的切換時,使用線程要好於進程。同樣如果要求同時進行並且又要共享某些變量的併發操作,
		 只能用線程不能用進程
	執行過程:每個獨立的進程程有一個程序運行的入口、順序執行序列和程序入口。但是線程不能獨立執行,必須依存在應用程序中,由應用程序提供多個線程執行控制。
	線程是處理器調度的基本單位,但是進程不是。
	兩者均可併發執行。

16.死鎖是什麼

概念:
	死鎖是指兩個或兩個以上的進程在執行過程中,由於競爭資源或者由於彼此通信而造成的一種阻塞的現象,
	若無外力作用,它們都將無法推進下去。此時稱系統處於死鎖狀態或系統產生了死鎖,這些永遠在互相等待的進程稱爲死鎖進程
產生死鎖的四個必要條件:
	(1) 互斥條件:一個資源每次只能被一個進程使用。
	(2) 請求與保持條件:一個進程因請求資源而阻塞時,對已獲得的資源保持不放。
	(3) 不剝奪條件:進程已獲得的資源,在末使用完之前,不能強行剝奪。
	(4) 循環等待條件:若干進程之間形成一種頭尾相接的循環等待資源關係。

17.Left Join、Right Join、Inner Join 指的是什麼

LEFT JOIN 關鍵字會從左表那裏返回所有的行,即使在右表中沒有匹配的行
RIGHT JOIN 關鍵字會右表那裏返回所有的行,即使在左表中沒有匹配的行
在表中存在至少一個匹配時,INNER JOIN 關鍵字返回行

18.一個div垂直居中,其距離屏幕左右兩邊各10px,其高度始終是寬度的50%,
div中有文本’A’,其font—size:20px,文本水平垂直居中

<div class="box">
    <div class="Abox">A</div>
</div>
*{
    padding:0;
    margin: 0;
}
html,body{
    width: 100%;
    height: 100%;
}
.box{
    position: relative;
    background: red;
    width: 100%;
    height: 100%;
}
.Abox{
    margin-left:10px;
    width: calc(100vw - 20px);
    height: calc(50vw - 10px);
    position: absolute;
    background: yellow;
    top:50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

19.函數中的arguments是數組嗎?類數組轉數組的方法瞭解一下?

arguments當然不是數組啦,轉數組的方法有:
[...arguments]
Array.from(arguments)
  1. call的用法和this的指向
在這裏插入代碼片
if([]==false){console.log(1)};
if({}==false){console.log(2)};
if([]){console.log(3)}
if([1]==[1]){console.log(4)}

答案:1 3
== 是非嚴格比較操作符,false會轉換爲0,[]會轉換成’’,{}會轉換爲"[object Object]",
所以會輸出1,不輸出2

22.移動端怎麼適配達到真正的1px,
23.深拷貝,
24.隨手寫一個佈局,
25.網站優化
26.

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