運行環境

時間  2019-11-18
標籤 運行 環境 简体版
原文   原文鏈接

運行環境

--瀏覽器能夠經過訪問連接來獲得頁面的內容；（上線的代碼產生的內容）
--瀏覽器經過繪製和渲染，顯示出頁面的最終的樣子；
--整個過程當中，咱們須要考慮什麼問題？（瀏覽器內核狀況）
1.頁面加載過程

1.1.從輸入url到獲得html的詳細過程javascript

1.瀏覽器根據DNS服務器（解析出）獲得域名的IP地址
    2.向這個IP的機器發送http請求
    3.服務器收到、處理並返回http請求
    4.瀏覽器獲得返回內容

1.2.window.onload 和 DOMContentLoaded 的區別php

    都是頁面加載以後要觸發什麼事件；
    
    window.addEventListener('load',function(){
        //頁面的所有資源加載完纔會執行，包括圖片、視頻等
    });
    
    document.addEventListener('DOMContentLoaded',function(){
        //DOM 渲染完便可執行，此時圖片、視頻還可能沒有加載完
    });

 

2.1.加載資源的形式css

   1.-輸入url（或跳轉頁面）加載html
        http://coding.m.imooc.com
    2.-加載html中的靜態資源
        <script src="/static/js/jquery.js"></script>

 

2.2.加載一個資源的過程html

都符合1.瀏覽器根據DNS服務器（解析出）獲得域名的IP地址
          2.向這個IP的機器發送http請求
          3.服務器收到、處理並返回http請求
          4.瀏覽器獲得返回內容

2.3.瀏覽器渲染頁面的過程前端

1.根據HTML結構生成DOM Tree（只有結構）
    2.根據css生成CSSOM（樣式）
    3.將DOM 和 CSSOM 整合造成RenderTree（渲染樹）
    4.根據RenderTree 開始渲染和展現
    5.遇到<script>時，會執行並阻塞渲染
    （瀏覽器渲染一個DOM樹，script中js有權利改變DOM結構和內容，咱們不得不讓瀏覽器
    去作出一個妥協性的讓步，js在加載執行中，渲染先結束先阻塞先不要管它）
*頁面加載--幾種示例
 1.<!DOCTYPE html>
      <html>
      <head>
        <meta charset="UTF-8">
        <title>Document</title>
      </head>
      <body>
        <p>test</p>
      </body>
      </html>
      
    2.div{
        width:100%;
        height:100px;
        font-size:50px;
      }
      
      <!DOCTYPE html>
      <html>
      <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="styleSheet" type="text/css" href="test.css">
      </head>
      <body>
        <div>test</div>
      </body>
      </html>
      
    3. document.getElementById('container').innerHTML == 'update by js';
      
      <!DOCTYPE html>
      <html>
      <head>
        <meta charset="UTF-8">
        <title>Document</title>
      </head>
      <body>
        <div id="container">default</div>
        <script src="index.js"></script>
        <p>test</p>
      </body>
      </html>
*首先你輸入url（或跳轉頁面）把html代碼加載出來，瀏覽器要解析，到body裏面
    開始渲染了，body裏第一行渲染出一個div內容是default，到body裏第二行發現一
    個script，停下來加載script，（第三行代碼就一直等着）加載完並執行完以後，最後
    一行才正式渲染出來。
 4.
      <!DOCTYPE html>
      <html>
      <head>
        <meta charset="UTF-8">
        <title>Document</title>
      </head>
      <body>
        <p>test</p>
        <p>![](test.png)</p>
        <p>test</p>
      </body>
      </html>
加載完html結構以後就開始渲染，body中第一行圖片是異步請求的，好比這個test.png
    很大，請求的很慢，這個時候並不會阻礙整個dom樹的一個渲染，渲染body第一行ok結束
    ，渲染第二行結束，img標籤已經有了，只不過圖片尚未加載出來而已，這個img標籤
    已經能夠用了，這個時候圖片是異步加載，咱們在渲染第三行。
1.爲何要把css放在head中？
加載css以後，瀏覽器直接知道規則，在渲染下面的DOM結構的時候就會把這些結構考慮
    進去去渲染；（css必定要在body裏面的東西出來以前就加載完，並且這個規則要告訴
    瀏覽器，加載完以後瀏覽器就本身知道了，而後再body渲染的時候，一次就把這個事幹好）
2.爲何要把js放在body最下面？
1.不會阻塞以前的body內容，由於內容（沒有script執行，先把html結構基本的一些
    標籤渲染出來，最後在執行script，這個時候就不會阻塞了，能讓頁面更快的出來，
    這是性能的問題）已經渲染；
    2.把script放在最後能拿到全部的標籤

2.性能優化（自己是一個綜合性的問題）

原則：
    1.多實用內存（內存的存儲）、緩存或者其餘方法
    2.減小CPU計算、減小網絡請求
    
從哪裏入手：
    1.加載頁面和靜態資源
        --靜態資源的壓縮合並；
        --靜態資源緩存；（本地有緩存就沒有必要在請求一次）
        --使用CDN讓資源加載更快（CDN是一個不一樣區域的網絡優化，若是我在北京訪問一個
        地址的時候，一樣的一個地址CDN會給我轉到北京就近的一個機房中加載下來；若是
        沒有CDN，你的服務器就在杭州，我從任何一個地方的請求都須要走杭州的一個機房，
        距離比較遠，通過的路由器就比較多，也就比較慢一些）
        --使用SSR（server side rander 服務端渲染）後端渲染，數據直接輸出到HTML中

2.頁面渲染（渲染優化）java

--css放前面，js放後面
        --懶加載（圖片懶加載、下拉加載更多）；
        圖片先不加載，何時用什麼加載；
        --減小DOM查詢，對DOM查詢作緩存；
        --減小DOM操做，多個操做盡可能合併在一塊兒執行；
        --事件節流（很頻繁的操做合到一個操做）；
        --儘早執行操做（如 DOMContentLoaded）
        DOM渲染完就當即執行，無論前端資源像圖片有沒有加載完

性能優化--幾個示例：react

1.--資源合併jquery

        <scirpt src="a.js"></script>
        <scirpt src="b.js"></script>
        <scirpt src="c.js"></script>
        
        代碼合併成（構建工具來合併）：
        <script src="abc.js"></script>

 

2.--緩存面試

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

 

3.--使用CDN (比在服務器上作zepto鏈接要快不少)ajax

<link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="styleSheet"> 
<script src="https://cdn.bootcss.com/zepto/10rc1/zepto.min.js"></script>

 

4.--使用SSR後端渲染

（好處：把數據直接輸出到html中，瀏覽器能直接拿到，直接渲染，不必ajax把數據在獲取一遍）
  1.如今Vue React（這兩個默認沒有後端渲染的） 提出了這樣的概念：
     先把模板拿下來以後經過ajax獲取數據
   2.jsp php asp都屬於後端渲染（動態頁面--咱們的數據能夠直接輸出到瀏覽器，不用再經過ajax獲取）

**5.--懶加載 **

        ![](preview.png)
        <script type="text/javascript">
            var img1 = document.getElementById('img1');
            img1.src = img1.getAttribute('date-realsrc');
        </script>
一開始的圖片是顯示很小的圖，很快就加載出來，但這個圖片真正用的時候在把這個真正的圖片賦值過來讓它顯示就行；加快頁面渲染速度；

 

6.--緩存DOM查詢

        //未緩存DOM查詢（每次循環都須要執行DOm查詢）
        //執行每一次循環，document.getElementsByTagName('p')都要作一次查詢
        var i;
        for(i=0;i<document.getElementsByTagName('p').length;i++){
            //todo
        };
        
        //緩存了DOM查詢（一次DOM查詢把東西存到一個變量中，下次循環就沒有必要在挨個作DOM查詢了，
        只是獲取這個變量的屬性就能夠了）
        //直接把東西查詢出來緩存到pList中，就查詢一次，下面在執行10遍循環的時候
        ，就不會在去執行查詢了，只需從緩存的pList去取就好了，這就快了。
        var pList = document.getElementsByTagName('p');
        var i ;
        for(i=0;i<pList.length;i++){
            //todo
        }

 

7.--合併DOM插入(原本有10次dom查詢，如今只剩一次了)

     var listNode = document.getElementById('list');
        
        //要插入10個li標籤
        (定義一個臨時片斷，10次循環只用對片斷中去加，不會觸發DOM操做)
        var frag = document.createDocumentFragment();
        var x,li;
        
        for(x=0;x<10;x++){
            //定義一個片斷，10個li依次插入片斷中
            li = document.createElement("li");
            li.innerHTML = "List item"+x;
            frag.appendChild(li);
        }
        
        //把片斷插入listNode
        listNode.appendChild(frag);

 

8.--事件節流（性能優化的原則，減小cpu的計算

      var textarea = document.getElementById('text');
        var timeoutId;
        textarea.addEventListener('keyup',function(){
            //每次看看timeoutId有沒有，有了就先清掉
            if(timeoutId){
                clearTimeout(timeoutId);
            }
            
            //當輸入完停下來這個時候觸發change事件；
            //從新賦值timeoutId，設個100毫秒的延遲；若是一旦停大於100毫秒以上就觸發change事件；
            timeoutId = setTimeout(function(){
                //觸發change事件
            },100);
        });

 

9.--儘早執行操做

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

 

3.安全性

1.--場景的前端安全問題有哪些？

1.1.XSS跨站請求攻擊
      eg:1.新浪博客寫一篇文章，同時偷偷插入一段<script>
        （一旦看這篇文章，代碼就會執行；獲取cookie，發送本身的服務器，多少人看了這篇文章，就能獲取多少用戶信息）
        ----攻擊代碼中，獲取cookie，發送本身的服務器；
        ----發佈博客，有人查看博客內容；
        ----會把查看着的cookie發送到攻擊者的服務器；
        
        *怎麼預防：
        --前端替換關鍵字，例如替換 < 爲 < > w爲 >（會影響性能，js執行效率比較低，前端只有瀏覽器）
        --後端替換（依賴於服務器的能力）
      
    1.2.XSRF跨站請求僞造
        eg:你已登陸一個購物網站，正在瀏覽商品
         ----該網站付費接口是 xxx.com/pay?id=100 可是沒有任何驗證；
         ----而後你收到一封郵件,隱藏這<img src=xxx.com/pay?id=100>;
         ----你查看郵件的時候，就已經悄悄的付費購買了。
    
    
        *解決方案：
        --1.增長驗證流程，如輸入指紋、密碼、短信驗證碼（後端來作驗證，前端配合）
****************面試技巧****************

1.簡歷

1.1簡潔明瞭，重點突出項目經歷和解決方案；
    （項目經歷：作過什麼東西要寫明白，能夠經過你作的東西瞭解到你，這個項目真實的技術等級、技術複雜度）
    （解決方案：在項目中作了什麼貢獻，遇到什麼樣的問題，用什麼解決的(用的什麼框架來作，技術棧、解決方案)）
    1.2.把我的博客放在簡歷中，而且按期維護更新博客
    1.3.把我的的開源項目放在簡歷中，並維護開源項目
    1.4.簡歷千萬不要造假，要保持能力和經歷上的真實性

2.面試過程當中。。。

2.1.如何看待加班？加班就像借錢，救急不救窮
        （加班做爲常態那就不行了，加班會很累，壓力會比較大，睡很差；
        根本沒有業餘時間去提升本身的能力）
    2.2.千萬不要挑戰面試官，不要反考面試官
    2.3.學會給面試官驚喜，但不要太多
    2.4.遇到不會回答的問題，說出你知道的也能夠
        好比：性能優化 知道多少說出來多少
    2.5.談談你的缺點——————說一下你最近正在學什麼就能夠了
        好比：最近在學react
        可能對react還不是很瞭解，如今正在學，大約一個月以後就能作出來一個react網站
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程