1.輸入url敲回車發生了什么

域名解析 → 三次握手 → 發起HTTP請求 → 響應HTTP請求并得到HTML代碼 → 瀏覽器解析HTML 代碼 → 瀏覽器對頁面進行渲染呈現給用戶

2.Ajax 是什么? 如何創建一個 Ajax？

AJAX 是一種用于動態創建網頁的局部刷新技術.

創建ajax:

創建一個XMLHttpRequest的對象.

通過open(get,url,true)與服務器建立連接。

使用send() 來發送請求。

使用onreadystatechange事件來監聽。

使用responseText來獲取服務器返回的數據

拓展：XMLHttpRequest是什么？

是異步對象

3.什么是同源策略？請寫出跨域訪問數據方式（至少4種）

a.同源策略 又名 同域策略，就是協議名和主機名和端口號三者相同。
b.跨域訪問數據方式:

JSONP方式

基于CORS實現跨域Ajax

使用HTML5 的window.postMessage 方法，支持跨域訪問

降域：思路是讓不同源的變成同源。

拓展 : 怎樣讓不同源變成源

答 : 就是讓協議號主機號端口號三者相同

4.swiper在html里的基本結構？(新增題目)

<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">1</div> <div class="swiper-slide">2</div> </div> </div>

5.移動端和PC端有什么區別？

1、界面布局。

• 移動端屏幕相對窄小，一般是單列顯示，最多也只能是雙列+響應式
• 但是PC端的屏幕大，布局可以更加靈活。

2、使用習慣。

• 移動端的操作尺度比較大，單擊誤差大，所以按鈕、鏈接等元素比較設計的大一些。
• 而PC端的操作尺度比較小，用鼠標單擊是一件比較準確的事情，所以在設計按鈕或者鏈接等樣式時 可以稍微小一些。

3、網絡速度。

• 手機的網絡一般是2G\3G\4G\WIFI等，網頁的加載速度會影響用戶的體驗，需要消耗用戶的流量
• 而PC的網絡一般是連接寬帶或者WIFI，PC端的用戶一般不會考慮頁面消耗的流量。

4、技術層面。

• PC應用更關注的是后臺、大數據、算法類的
• 而移動端更關注的是如何更好地交互和體驗。

6.CSS3怎么指定盒子模型為標準盒模型與怪異盒模型？它們的具體區別？（標準盒 模型與怪異盒模型下盒子各自高度與寬度怎么算）

1.box-sizing //屬性可以指定盒子模型種類content-box //指定盒子模型為W3C9 (標準盒模型)border-box //為IE盒子模型 (怪異盒模型) 2.//在寬度和高度之外繪制元素的內邊距和邊框。box-sizing: content-box; //在寬度和高度之內繪制元素的內邊距和邊框。box-sizing: border-box;

7.簡述sass和less的區別

sass是基于ruby編譯的,less基于nodejs編譯
sass有@extend用作繼承，而less沒有
sass有@if @else 判斷，less沒有
sass用$符號定義一個變量，less用@符號定義一個變量
sass支持@for循環，less則不支持

拓展(與一般題合并提問)：1.Sass 、LESS 是什么?為什么要使用sass和less sass和less都是 CSS 預處理器，最終編譯成 CSS。
使用sass/less的好處：

結構清晰，便于擴展。

可以方便地屏蔽瀏覽器私有語法差異。

可以輕松實現多重繼承。

完全兼容 CSS 代碼，可以方便地應用到老項目中。

8.如何動態的設置 rem

function rem(){document.documentElement.style.fontSize=document.documentElement.clientWidth/7.5 +”px” }rem()window.onresize=rem;

9.如何實現 移動端分辨率適配

因為手機屏幕的分辨率大小不一 ，如果使用傳統的靜態布局，把每個元素的寬高樣式寫死， 在不同的屏幕中就有各種各樣的顯示效果。

而我們需要使不同的手機分辨率下都有相同的樣式布局

解決方法：

rem適配

viewport適配

vw和vh適配

%百分比適配

10.請解釋一下CSS3的flexbox（彈性盒布局模型）,以及適用場景

彈性盒子布局目的是提供一種更加高效的方式來對容器中的條目進行布局、對齊和分配空間。

試用場景：

彈性布局適合于移動前端開發，在Android和ios上也完美支持。

11.什么是響應式設計？響應式設計的基本原理是什么(面試題)？

響應式網站設計(Responsive Web design)的理念是：

集中創建頁面的圖片排版大小，可以智能地根據用戶行為以及使用的設備環境進行相對應的布局。

基本原理:

媒體查詢 @media,對不同的設備設置不同的css樣式

拓展：1.響應式能做什么事情？

智能地根據用戶行為以及使用的設備環境進行相對應的布局，比如在pc端是一排4個布局，在移動 端可能是一排兩個進行布局（被擠下去了）。

12.寫出彈性盒模型中所有的屬性， 并解釋什么意思

13.常見請求頭格式：Content-type 的值有哪些，各自的使用場景是什么（面試 題）

display:flex;設置彈性盒子 flex-direction:column | row 設置彈性盒子方向 flex-wrap:wrap 設置自動換行 justify-content:space-around， 剩余空間分配 align-items:center 設置對齊方式 text/html ： HTML格式 text/plain ：純文本格式 text/xml ： XML格式 image/gif ：gif圖片格式 image/jpeg ：jpg圖片格式 image/png：png圖片格式

14.socket中TCP的三次握手建立連接

答：客戶端發送請求到服務器，建立連接， 其中需要三次握手，第一次發送請求頭信息過去， 第二次服務器接收到請求頭確認客戶端發出一個響應頭 第三次客戶端收到響應頭，確定服務器信息，可以發送請求到服務器

15.手寫原生ajax；

var xhr=new XMLHttpRequest() xhr.open("get"，url,true) xhr.send() xhr.onreadystatechange=function(){ if(xhr.readystate==4 && xhr.status==200){ console.log(xhr.responseText) } }

16.本地存儲請詳細解答

localStorage - 用于長久保存整個網站的數據，保存的數據沒有過期時間，直到手動去除;

定義本地存儲：
localStorage.存儲名=值
localStorage.setItem(“存儲名”,值)

讀取本地存儲：
localStorage.getItem(“存儲名”)
localStorage.存儲名

清除指字本地存儲：
localStorage.removeItem(“存儲名”)

清空本地存儲：
localStorage.clear();

拓展：

1.為什么要用本地存儲？有什么作用？

用于長久保存整個網站的數據，保存的數據沒有過期時間，直到手動去除

2.用js聲明一個變量a、b、c保存在里面不行嗎？用變量就能接收的為什么要用 localStorage？

可以實現跨頁共享，在不同的頁面共享數據的話就可以用localStorage

17.解釋 jsonp 的原理，以及為什么不是真正的 ajax

jsonp的原理:利用script標簽中的src屬性實現跨域請求數據

為什么不是真正的 ajax?

實質不同 ajax的核心是通過xmlHttpRequest獲取非本頁內容 jsonp的核心是動態添加script標簽調用服務器提供的js腳本

ajax通過服務端代理一樣跨域 jsonp也不并不排斥同域的數據的獲取

jsonp只支持get請求， ajax支持get和post請求

拓展：什么是jsonp？

json+p,p指得是Padding（內邊距），即是json+襯托。
JSONP是一種被開發人員創造出來的一種非官方的跨域數據交互協議。

總結

以上是生活随笔為你收集整理的JS面试题（复杂）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。