亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

前端性能優化-通用的緩存SDK

難度中級
時長 4小時28分
學習人數
綜合評分9.27
27人評價 查看評價
9.3 內容實用
9.2 簡潔易懂
9.3 邏輯清晰
  • 先驅者userData 優點: 第一個吃螃蟹的人 缺點:存儲限制大小,單個文件的大小限制是128KB,一個域名下總共可以保存1024KB的文件,文件個數應該沒有限制。在受限站點里這兩個值分別是64KB和640KB Cookie兼容性最好的本地存儲 優點:兼容性最好,幾乎所有的瀏覽器都支持。 缺點:大小有限制,而且每次發送請求,請求頭里會帶著Cookie一起發過去,現在基本大多數登錄的合法性驗證都是用Cookie驗證的。
    查看全部
    1 采集 收起 來源:userData+cookie

    2018-03-10

  • sessionStorage 臨時存儲神器 優點:臨時存儲神器,關閉頁面標簽自動回收,不可以跨頁面交互。 缺點:不能存儲持久化的東西。
    查看全部
    0 采集 收起 來源:sessionStorage

    2018-03-10

  • 視頻的外部資源可使用link 加載樣式的方式加載,會被提前加載。起到提前加載視頻所需外部資源,讓視頻先運行的作用。
    查看全部
    1 采集 收起 來源:資源提前

    2018-03-10

  • 瀏覽器工作流程
    查看全部
  • 觸發重繪: 1、改變字體 2、增加或移除樣式表 3、內容變化,如用戶在input框輸入文字 4、激活css偽類,如:hover 5、腳本操作DOM 6、計算可見的寬高屬性 7、設置style屬性的值
    查看全部
    0 采集 收起 來源:如何分辨重繪

    2018-01-18

  • documentFragment api可省去一次回流 var fragment = document.createDocumentFragment(); var spanNode = document.createElement('div'); for(var i=0;i<10;i++){ (function(i){ spandNode.innerHTML= spandNode.innerHTML + 'number:'+i+'<br>'; fragment.appendChild(spandNode); })(i) } document.body.appendChild(fragment);
    查看全部
  • 處理圖片的方法
    查看全部
    0 采集 收起 來源:未來方法+結語

    2018-01-17

  • 默認圖占位,獲取設備信息,然后根據設備信息返回最合適的圖片
    查看全部
    0 采集 收起 來源:未來方法+結語

    2018-01-17

  • 【SessionStorage】-ie7以下不支持 優點:臨時 存儲神器,關閉頁面標簽自動回收,不可跨頁面交互。同一瀏覽器不同標簽中Sessionstorage是不共享的 缺點:臨時 成了蕭何敗也蕭何,因為是臨時所以不能存儲持久化的東西 【userData】-ie支持 優點:比SessionStorage早 缺點:存儲限制太小。單個文件大小限制是128KB,一個域名下總共可以保存1024KB的文件,文件個數應該沒有限制。在受限站點里這兩個值分別是64KB和640KB 【Cookie】-兼容性最好的本地存儲 優點:兼容性最好,幾乎所有的瀏覽器都支持 缺點:大小有限制,而且每次發送請求,請求頭里會帶著Cookie一起發過去,現在基本大多數登陸的合法性驗證都是用cookie驗證的。 【openDatabase】-一般支持html5的都支持 優點:就是一個完整的數據庫。 缺點:可能對于前端同學來說,成本高。 【localstorage】-可在頁面關閉后依然保存,其他與sessionStorage無異 優點:兼容性中等,操作簡單,就是key-value形式,幾乎現代的瀏覽器都支持。不能跨瀏覽器取,不能跨域取。 缺點:存在大小限制,ie9,ie10不支持
    查看全部
  • 視頻的外部資源可使用link 加載樣式的方式加載,會被提前加載。起到提前加載視頻所需外部資源,讓視頻先運行的作用。
    查看全部
    0 采集 收起 來源:資源提前

    2018-01-16

  • 播放器形式 【video】 優點:不需要下載額外資源(如:flash播放器需要下載.swf輔助插件),控制簡單有較為完整的api 缺點:每個瀏覽器的外觀都不一樣,如果要統一需要自己寫ui實現 【Flash】 優點:兼容性好,只要有flash player播放器插件,都可以進行播放。 缺點:1、需要下載額外的swf播放文件才可以播放,瀏覽器必須有flash player插件 2、flash player版本的碎片化 3、UI定制需要寫as,學習成本較高 優化方案:Flash 和 html5相結合如: Flowplayer 功能簡單,使用方便,https://flowplayer.org/player/ VideoJs 功能強大,使用復雜,http://videojs.com
    查看全部
  • CSS-Sprites 圖片工具 http://alloyteam.github.io/gopng by 鵝廠 http://fits.baidu.com/ by 狼廠 http://gruntjs.com/ by 可愛的開發者 圖片標簽 <picture> <source srcset="smaller.png" media="(max-width:768px)"> <source srcset="big.png" media="(min-width:1000px)"> <img srcset = "default.png" alt="MyDefaultImg"> </picture>
    查看全部
    0 采集 收起 來源:未來方法+結語

    2018-03-22

  • 圖片壓縮時的算法決定了其顯示時的方式 小波算法:先模糊然后清晰 離散余弦變換:清晰,逐行顯示
    查看全部
  • 圖片分類: jpg,jpeg,以24位顏色存儲單個位圖,可壓縮 png,可做透明圖片,體積較大,需要清晰的顯示顏色豐富的圖片時用 gif,全透/全不透,不支持半透明 svg,矢量圖,地圖中用的多,體積小 apng,webp:jpg+png優點,未被所有瀏覽器采納
    查看全部
  • 瀏覽器配置的dns永遠高于本地host配置
    查看全部
    1 采集 收起 來源:問題解決+結語

    2018-01-16

舉報

0/150
提交
取消
課程須知
1、對html基礎知識已經掌握。 2、最好看過上一節前端性能優化的基礎認知
老師告訴你能學到什么?
1、一個針對實際存在項目做的優化 2、業內通用的必須掌握的優化方案 3、高性能dom的實戰 4、圖片加載的原理,以及優化方案 5、自定義一個高性能的播放器。 6、一起開發一個所有項目都能使用的性能優化工具類。 7、從一個bug的出現到,分析、解決的方法論

微信掃碼,參與3人拼團

微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

友情提示:

您好,此課程屬于遷移課程,您已購買該課程,無需重復購買,感謝您對慕課網的支持!