運行環境

時間 2019-12-08

標籤運行環境简体版

原文原文鏈接

瀏覽器就能夠經過訪問連接來獲得頁面的內容，經過繪製和渲染，顯示出頁面的最終的樣子
知識點：頁面加載過程、性能優化、安全性

一、頁面加載過程

知識點：加載資源的形式、加載一個資源的過程、瀏覽器渲染頁面的過程

（1）、加載資源的形式

輸入url(或跳轉頁面)加載html
http://www.baidu.com
加載html的靜態資源
<script src="./jquery.js"></script>

(2)、加載資源的過程

瀏覽器根據DWS服務器獲得域名的iP地址，向這個IP的機器發送http請求，服務器收到，處理並返回http請求，瀏覽器獲得返回內容

（3）、瀏覽器渲染頁面的過程

根據HTML結構生成DOM Tree
根據css生成cssOM
將DOM和cssOM 整合造成RenderTree(渲染樹)
根據RenderTree開始渲染和展現
遇到<script>時，會執行並阻塞渲染

window.onload和DOMContentLoaded

window.addEventListener('load',function(){
//頁面的所有資源加載完才執行，包括圖片視頻等
})
document.addEventListener('DOMContentLoaded',function(){
//DOM渲染完便可，此時圖片、視頻還可能沒有加載完
})

二、性能優化

（1）、原則

多使用內存，緩存或者其餘方法
減小CDN計算，減小網絡

（2）、從哪入手

加載資源和靜態資源
頁面渲染

（3）、加載資源優化

靜態資源的壓縮合並
靜態資源緩存
使用CDN讓資源加載更快
使用SSR後端渲染，數據直接輸出到HTML中

（4）、渲染優化

css放前面，js放後面
懶加載（圖片懶加載，下拉加載更多）
減小DOM查詢，對DOM查詢作緩存
減小DOM操做，多個操做盡可能合併在一塊兒執行
事件節流
儘早執行操做（如DOMContentLoaded)

(5)、緩存

經過鏈接名稱控制緩存 <script src="abc_1.js"></script>
只有內容改變的時候，連接名稱纔會改變<script src="abc_2.js"></script>

(6)、使用SSR後端渲染

如今vue、React提出了這樣的概念
其實jsp、php、asp都屬於後端渲染

（6）、懶加載

<img id="img1" src="preview.png" data-realsrc="abc.png" />//data-realsrc隨便寫的名字
var img1 = document.getElementById('img1');
img1.src=img1.getAttribute('data-realsrc")

(7)、緩存DOM查詢

//未緩存DOM查詢
var i ;
for(i =0;i<document.getElementsByTagName('p').length;i++){
    //todo
}
// 緩存DOM查詢
var pList = document.getElementsByTagName('p');
var i ;
for(i=0;i<pList.length;i++){
    //todo
}

(8)、事件節流

var textarea =document.getElementById('text');
var timeoutId;
textarea.addEventListener('keyup',function(){
    if(timeoutId){
        clearTimeout(timeoutId);
    }
    timeoutId = setTimeout(function(){
        //觸發change事件
    },100)
})

（9）、合併DOM插入

var listNode = document.getELementById('list');
    // 要插入10個li標籤
    var frag = document.createDocumentFragment();
    var x,li;
    for(x =0;x<10;x++){
        li = document.createElement('li');
        li.innerHTML = 'List item'+ x;
        frag.appendChild(li);
    }
    listNode.appendChild(frag);