本文旨在加深對前端知識點的理解,資料來源於網絡,參考於(前端資源)
1、如何解決跨域問題
JSONP:
原理是:動態插入script
標籤,通過script
標籤引入一個js
文件,這個js文件載入成功後會執行我們在url參數中指定的函數,並且會把我們需要的json
數據作爲參數傳入。
由於同源策略的限制,XmlHttpRequest
只允許請求當前源(域名、協議、端口)的資源,爲了實現跨域請求,可以通過script
標籤實現跨域請求,然後在服務端輸出JSON數據並執行回調函數,從而解決了跨域的數據請求。
優點是兼容性好,簡單易用,支持瀏覽器與服務器雙向通信。缺點是隻支持GET請求。
JSONP
:json+padding
(內填充),顧名思義,就是把JSON填充到一個盒子裏
<script>
function createJs(sUrl){
var oScript = document.createElement('script');
oScript.type = 'text/javascript';
oScript.src = sUrl;
document.getElementsByTagName('head')[0].appendChild(oScript);
}
createJs('jsonp.js');
box({
'name': 'test'
});
function box(json){
alert(json.name);
}
</script>
CORS
服務器端對於CORS
的支持,主要就是通過設置Access-Control-Allow-Origin
來進行的。如果瀏覽器檢測到相應的設置,就可以允許Ajax
進行跨域的訪問。
通過修改document.domain來跨子域
將子域和主域的document.domain
設爲同一個主域.前提條件:這兩個域名必須屬於同一個基礎域名!而且所用的協議,端口都要一致,否則無法利用document.domain
進行跨域
主域相同的使用document.domain
使用window.name來進行跨域
window
對象有個name
屬性,該屬性有個特徵:即在一個窗口(window)的生命週期內,窗口載入的所有的頁面都是共享一個window.name
的,每個頁面對window.name
都有讀寫的權限,window.name
是持久存在一個窗口載入過的所有頁面中的
使用HTML5中新引進的
window.postMessage
方法來跨域傳送數據
還有flash、在服務器上設置代理頁面等跨域方式。個人認爲window.name
的方法既不復雜,也能兼容到幾乎所有瀏覽器,這真是極好的一種跨域方法。
2、創建ajax的過程
(1)創建`XMLHttpRequest`對象,也就是創建一個異步調用對象.
(2)創建一個新的`HTTP`請求,並指定該`HTTP`請求的方法、`URL`及驗證信息.
(3)設置響應`HTTP`請求狀態變化的函數.
(4)發送`HTTP`請求.
(5)獲取異步調用返回的數據.
(6)使用JavaScript和DOM實現局部刷新.
var xmlHttp = new XMLHttpRequest();
xmlHttp.open('GET','demo.php','true');
xmlHttp.send()
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState === 4 & xmlHttp.status === 200){
}
}
3、HTTP狀態碼
100 Continue 繼續,一般在發送post請求時,已發送了http header之後服務端將返回此信息,表示確認,之後發送具體參數信息
200 OK 正常返回信息
201 Created 請求成功並且服務器創建了新的資源
202 Accepted 服務器已接受請求,但尚未處理
301 Moved Permanently 請求的網頁已永久移動到新位置。
302 Found 臨時性重定向。
303 See Other 臨時性重定向,且總是使用 GET 請求新的 URI。
304 Not Modified 自從上次請求後,請求的網頁未修改過。
400 Bad Request 服務器無法理解請求的格式,客戶端不應當嘗試再次使用相同的內容發起請求。
401 Unauthorized 請求未授權。
403 Forbidden 禁止訪問。
404 Not Found 找不到如何與 URI 相匹配的資源。
500 Internal Server Error 最常見的服務器端錯誤。
503 Service Unavailable 服務器端暫時無法處理請求(可能是過載或維護)。
4、HTTP和HTTPS
HTTP
協議通常承載於TCP協議之上,在HTTP
和TCP
之間添加一個安全協議層(SSL
或TSL
),這個時候,就成了我們常說的HTTPS。
默認HTTP的端口號爲80,HTTPS
的端口號爲443。
5、爲什麼HTTPS
安全
因爲網絡請求需要中間有很多的服務器路由器的轉發。中間的節點都可能篡改信息,而如果使用HTTPS
,密鑰在你和終點站纔有。https
之所以比http
安全,是因爲他利用ssl/tls
協議傳輸。它包含證書,卸載,流量轉發,負載均衡,頁面適配,瀏覽器適配,refer傳遞等。保障了傳輸過程的安全性
6、談談性能優化問題
代碼層面:避免使用css表達式,避免使用高級選擇器,通配選擇器。
緩存利用:緩存Ajax,使用CDN,使用外部js和css文件以便緩存,添加Expires頭,服務端配置Etag,減少DNS查找等
請求數量:合併樣式和腳本,使用css圖片精靈,初始首屏之外的圖片資源按需加載,靜態資源延遲加載。
請求帶寬:壓縮文件,開啓GZIP,
代碼層面的優化
用
hash-table
來優化查找少用全局變量
用
innerHTML
代替DOM
操作,減少DOM
操作次數,優化javascript
性能用
setTimeout
來避免頁面失去響應緩存DOM節點查找的結果
避免使用CSS Expression
避免全局查詢
避免使用with(with會創建自己的作用域,會增加作用域鏈長度)
多個變量聲明合併
避免圖片和iFrame等的空Src。空Src會重新加載當前頁面,影響速度和效率
- 儘量避免寫在HTML標籤中寫Style屬性
7、移動端性能優化
- 儘量使用css3動畫,開啓硬件加速。
- 適當使用
touch
事件代替click
事件。 - 避免使用
css3
漸變陰影效果。 - 可以用
transform: translateZ(0)
來開啓硬件加速。 - 不濫用Float。Float在渲染時計算量比較大,儘量減少使用
- 不濫用Web字體。Web字體需要下載,解析,重繪當前頁面,儘量減少使用。
- 合理使用requestAnimationFrame動畫代替setTimeout
- CSS中的屬性(CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video)會觸發GPU渲染,請合理使用。過渡使用會引發手機過耗電增加
- PC端的在移動端同樣適用
8、快速 排序的思想並實現一個快排?
“快速排序”的思想很簡單,整個排序過程只需要三步:
(1)在數據集之中,找一個基準點
(2)建立兩個數組,分別存儲左邊和右邊的數組
(3)利用遞歸進行下次比較
<script type="text/javascript">
function quickSort(arr){
if(arr.length<=1){
return arr;//如果數組只有一個數,就直接返回;
}
var num = Math.floor(arr.length/2);//找到中間數的索引值,如果是浮點數,則向下取整
var numValue = arr.splice(num,1);//找到中間數的值
var left = [];
var right = [];
for(var i=0;i<arr.length;i++){
if(arr[i]<numValue){
left.push(arr[i]);//基準點的左邊的數傳到左邊數組
}
else{
right.push(arr[i]);//基準點的右邊的數傳到右邊數組
}
}
return quickSort(left).concat([numValue],quickSort(right));//遞歸不斷重複比較
}
alert(quickSort([32,45,37,16,2,87]));//彈出“2,16,32,37,45,87”
</script>