一些前端的筆記

本文旨在加深對前端知識點的理解,資料來源於網絡,參考於(前端資源)

1、如何解決跨域問題

JSONP:

原理是:動態插入script標籤,通過script標籤引入一個js文件,這個js文件載入成功後會執行我們在url參數中指定的函數,並且會把我們需要的json數據作爲參數傳入。

由於同源策略的限制,XmlHttpRequest只允許請求當前源(域名、協議、端口)的資源,爲了實現跨域請求,可以通過script標籤實現跨域請求,然後在服務端輸出JSON數據並執行回調函數,從而解決了跨域的數據請求。

優點是兼容性好,簡單易用,支持瀏覽器與服務器雙向通信。缺點是隻支持GET請求。

JSONPjson+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協議之上,在HTTPTCP之間添加一個安全協議層(SSLTSL),這個時候,就成了我們常說的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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章