<noframes id="5hjpd"><progress id="5hjpd"><form id="5hjpd"></form></progress>

    <noframes id="5hjpd">

    <span id="5hjpd"><progress id="5hjpd"><progress id="5hjpd"></progress></progress></span>
      <noframes id="5hjpd">
      <ins id="5hjpd"><sub id="5hjpd"><rp id="5hjpd"></rp></sub></ins>
      <del id="5hjpd"><big id="5hjpd"></big></del>
      <track id="5hjpd"></track>

      前端性能優化和測試工具總結

      導語 嗨,各位,又到了周末總結時間!得益于大量的 Grunt 和 Gulp 插件,我們可以輕松實現網站數據的可視化,雖然深入理解這些工具還比較困難,但分門別類的將它們列出來,也是很有幫助的。內容分發網絡(CDN)CD
      嗨,各位,又到了周末總結時間!得益于大量的 Grunt 和 Gulp 插件,我們可以輕松實現網站數據的可視化,雖然深入理解這些工具還比較困難,但分門別類的將它們列出來,也是很有幫助的。

      內容分發網絡(CDN)

      CDN 可以幫你把網站的資源分發到世界各地,有助于提高網站的響應速度,當然,這對于那些特殊地區的用戶是收效甚微的。

      CloudFlare

      CloudFlare 的強大之處在于它可以成為你的 DNS 服務器(CDN 只是它所有服務的一個組成部分),這樣對你的網站發起的所有請求都會經過它。

      CloudFlare 的 CDN 在過去十五年的設計和發展中,并沒有一味的守舊和固步自封。我們的專利技術中充分利用了最新的技術進步,包括并不限于硬件、web 服務器和網絡路由。換言之,我們創新的建設了下一代的 CDN。新的 CDN 配置簡單、價格低廉,其性能也一定比你使用過的任何傳統 CDN 都要優秀。

      MaxCDN

      CSS-Tricks 當前就在使用 MaxCDN 托管所有的靜態資源。它可以無縫地融合 WordPres 和 W3 的所有緩存資源,所以我們無需做什么特別處理,即可將資源移入 CDN,并能保證鏈接的準確性。

       


      對于一個博客來說,考慮到其中的大文件主要是 JavaScript、CSS 和圖片,而不是視頻等類型,這帶寬占用的可真多。

      我們的 CDN 服務同樣是一個網站加速器和實時控制中心。創建它,就是為了讓網站的用戶和運維都能從下一代 CDN 中獲得最大收益。

      CloudFront

      亞馬遜網絡服務(AWS)版本的 CDN。

      亞馬遜 CloudFront 是一個內容分發網絡服務。它可以無縫融合入其他的亞馬遜網絡服務產品,為開發者和企業分發內容到最終用戶手中提供了一種簡單的方式,整個過程都具有低延遲、高轉換速度的特點,也沒有最小使用量的強制要求。

      CDNperf

      上述的 CDNs 并不能托管你任意的資源,它們往往只是托管最頻繁用到的文件。雖然對于線上產品來說將資源和服務器托管到私有的 CDN 上并不是最好的方式,但這種方式對于分發資源來說仍然是快速和簡單的。

      CDNperf 可以幫你找出最快和最可信賴的 JavaScript CDNS,讓你的網站更快更有朝氣。

       


      cdnperf

      性能測試

      下面的這些性能測試工具,使用了量化的方式測試了網站中諸如首字節加載時間(time to first byte)或者渲染時間等表現。有些工具還會檢查特別檢查資源是否被緩存,多個 CSS 或 JS 文件是否值得合并。

      WebPagetest

      WebPagetest 是性能測試的黃金標準,它提供了多方面的量化指標用于性能測試,比如有一個基本的評分,用于評價當前頁面優化的水平;有一個截圖,顯示頁面加載后的視覺效果;還有一個瀏覽器加載資源的瀑布流...

      根據用戶瀏覽器真實的連接速度,在全球范圍內進行網頁速度測試,并提供詳細的優化建議。

       


      webpagetest

      通過使用 API wrapper,也可以將 WebPagetest 的相關服務添加到 NPM 模塊和命令行工具中。

      • webpagetest-mapper:將 WebPageTest 的測試數據轉換為可讀的文檔格式。
      • WPT Bulk Tester:使用 Google Docs 測試多個 URLs(如果你擁有 API key,也可以使用 webpagetest.org 來做這件事,或者其他公開可訪問的實例)。

      Yslow

      Yslow 基于 Yahoo 的高性能網頁教條,分析網頁的性能并給出響應緩慢的原因。

      Google PageSpeed

      PageSpeed 根據網頁最佳實踐分析和優化測試的網頁。

       


      google pagespeed

      PageSpeed 也有一個 CLI(Command Line Interface)工具:PSI(PageSpeed Insights with reporting)

      在構建進程中,可以使用 PSI 測試移動端和桌面端的性能,最終得到可讀性良好的測試結果。

       


      google pagespeed

      我的網站都開銷到哪里去了?

      評估網站在世界各地為每個移動端用戶支出的維護成本。

       


      what does my site cost?

      Pingdom 網站速度測試

      輸入 URL 地址,即可測試頁面加載速度,分析并找出性能瓶頸。

       


      pingdom

      SpeedCurve

      SpeedCurve 既可以讓你追蹤競爭對手的性能表現,也可以追蹤自己的性能表現。使用 SpeedCurve 時,你可以查看某個因素在不同站點的速度表現。對于移動用戶來說,他們希望網站在手機上加載起來要快于電腦,如果感到加載遲緩,往往會迅速關上網頁,所以,網站的響應速度對他們很重要。

       


      speedcurve

      Calibre

      Calibre 可以幫你追蹤頁面的加載時間,以及頁面大小。問題頁面(Janky page)?是的,Calibre 會直接告訴你哪些頁面有問題。

       


      image

      GT Metrix

      GT Metrix 結合了 Google PageSpeed 和 YSlow,幫助開發者創建快速、高效和全面優化的網頁瀏覽體驗。

       


      image

      perf.js

      在開發過程中,將性能的時序情況顯示在頁面上。

      perf bar

      一種簡單的方式,用于快速收集和查看網頁性能,提供預置的量化標準,也支持自定義的量化標準。

      grunt-perfbudget

      用于評估性能的 Grunt task。 grunt-perfbudget 使用 WebPagetest 的公有或私有實例在特定的 URL 進行測試。它會將測試結果和你預期的性能期望做比較,如果小于預期,那么這個 task 就順利完成了,如果超過了你預期的性能期望,那么就會報告失敗,并且會幫助你分析超出預期的原因。

      Sitespeed

      Sitespeed.io 是一個基于最佳實踐以及一些加載時序等量化標準的開源工具,有助于開發者分析網頁的加載速度和渲染性能。它會從開發者的站點收集多個頁面的數據,根據最佳實踐等規則來分析這些網頁,并將結果以 HTML 的形式輸出,或者以數值的形式發送到 Graphite。

      speedgun

      該網站允許你使用 Speedgun.js 收集任意公開站點的性能數據。它會運行五次,并顯示一個友好的示圖,幫助開發者了解當前頁面的加載過程。

      gulp size

      顯示項目大小。

       


      image

      瀏覽器工具盒插件

      Chrome 開發者工具

      在 Chrome 的開發者工具中,對于評估性能有兩個非常有用的標簽:AuditsNetwork。

      Audit 面板用于分析加載的頁面。它可以提供優化建議,減少頁面加載時間,加快頁面的響應速度。

       


      image

      Network 面板以動態的方式實時地展示了資源的請求和下載。雖然辨析和定位這些請求會比純粹的加載頁面多花一些時間,但這些消耗對于指導頁面的性能優化是非常重要的。

       


      image

      火狐開發者瀏覽器

      該瀏覽器是為開發者而創造的,專注于服務開發者的工作流。這是有史以來第一次,將構建、測試和擴展等服務集中于一體。

      更多信息請查看 MDN 上的 Network Monitor。

      Page performance

      這個擴展插件應用于 Chrome 瀏覽器,可以開速分析當前頁面的性能。如果瀏覽器打開了多個標簽,那么該插件會自動分析當前頁面的性能表現。

       


      image

      審查

      PerfAudit

      我們審查頁面的加載和渲染性能。對于令人反感的響應緩慢和問題頁面,我們有義不容辭的使命提供快速、穩定和準確的頁面。

      Perfmonkey

      PerfMonkey 讓追蹤頁面的渲染性能變得無比簡單。

      SVG 和圖片

      ImageOptim

      ImageOptim 是一個免費的應用,它在減少圖片體積、提高加載速度的同時,還不會犧牲圖片質量。它優化了壓縮參數、移除了無用的頭信息和非必要的顏色配置信息。

       


      image

      它也可以被集成到 Grunt 和 Gulp 中。

      SVGO

      SVG Optimizer 是一個基于 Nodejs 的 SVG 矢量圖形優化工具。

      如果你需要的是交互界面的操作,而不是 CLI,那么可以下載這個 APP。

      SVGOMG

      SVGOMG 是 SVGO's Missing GUI 的縮寫,旨在揭露 SVG 文件的主要問題,而不具有 SVGO 的完整可配置項。

       


      image

      手動優化 SVGs

      類似于其他的圖形文件,SVG 也應該在上線前被優化。雖然有許多類似 Raymond 的工具可以幫你做這種優化,但最好的方式還是深入理解其細節并做一些手動的優化。

      Triamge

      Triamge 是一個擴平臺的 GUI 和 CLI 工具,用于優化網站的圖片文件。它組合使用 optipng、pngcrush、advpng 和 jpegoptim,并根據文件類型做優化(最新版本中,已經支持 PNG 和 JPG)。

       


      image

      CSS

      CSS Triggers

      該網站用于展示哪些 CSS 屬性可以影響瀏覽器的布局、渲染和其他組合操作。

       


      image

      更多有關 CSS-triggers 的消息,可以點擊這里查看。

      CSS Stats

      該網頁應用以可視化的形式展示了開發者項目中有關 CSS 的統計信息。

       


      image

      CSS Shrink

      CSS 壓縮工具。由于 CSS 是頁面渲染的核心文件,所以必須保持輕巧,便于快速響應和渲染。

      uncss

      UnCSS 是一個用于移除腳本中無用 CSS 的工具。它可以審查多個文件,也可以審查由 JavaScript 注入的 CSS。

      它也可以被集成到 Grunt 和 Gulp 中。

      Critical path

      提取和整合 HTML 中關鍵的 CSS。

      HTML

      HTMLMinifier

      HTMLMinifier 是一個高度可配置、經過完善的測試、基于 JavaScript 的 HTML 壓縮工具,并且內置了代碼審查類的工具。

      gulp-htmlmin

      用于壓縮 HTML 的 gulp 插件。

      grunt-contrib-htmlmin

      用于壓縮 HTML 的 grunt 插件。

      JavaScript

      uglifyjs

      JavaScript 解析器、混淆、壓縮和美化工具集。

      它也可以被集成到 Grunt 和 Gulp 中。

      你也許并不需要某些 jQuery 插件

      jQuery 及其附屬工具都是非常優秀的項目,使用它們往往使開發工作輕松而又快捷。

      另一方面,如果你正在開發一個庫,那么你需要思考一下是否真的需要依賴于 jQuery。也許你只需要引入幾行代碼,就可以放棄引入一個庫實現某些功能。如果你的庫只是針對于高級瀏覽器,那么可能直接調用瀏覽器的內置函數就可以實現相關功能了。

       


      image

      擴展閱讀


      http://www.randomwithlife.com/ true 前端性能優化和測試工具總結 http://www.randomwithlife.com/show-41-757-1.html report <?php echo strlen($content) / 2; ?> 嗨,各位,又到了周末總結時間!得益于大量的 Grunt 和 Gulp 插件,我們可以輕松實現網站數據的可視化,雖然深入理解這些工具還比較困難,但分門別類的將它們列出來,也是很有幫助的。內容分發網絡(CDN)CD
      TAG:測試工具 前端 性能
      本站歡迎任何形式的轉載,但請務必注明出處,尊重他人勞動成果
      轉載請注明: 文章轉載自:愛思資源網 http://www.randomwithlife.com/show-41-757-1.html

      [前端插件推薦] Plugin

      1 2 3 4
      • jQuery實現逐字逐句顯示插件l-by-l.min.js
      • jQuery帶方向感知的鼠標滑過圖片邊框特效插件
      • jQuery HotKeys監聽鍵盤按下事件keydown插件
      • 響應式無限輪播jQuery旋轉木馬插件
      響應式無限輪播jQuery旋轉木馬插件
      web前端開發
      愛思資源網 Copyright 2012-2014 www.randomwithlife.com All rights reserved.(晉ICP備13001436號-1)
      欧美精品久久久久久久自慰

      <noframes id="5hjpd"><progress id="5hjpd"><form id="5hjpd"></form></progress>

        <noframes id="5hjpd">

        <span id="5hjpd"><progress id="5hjpd"><progress id="5hjpd"></progress></progress></span>
          <noframes id="5hjpd">
          <ins id="5hjpd"><sub id="5hjpd"><rp id="5hjpd"></rp></sub></ins>
          <del id="5hjpd"><big id="5hjpd"></big></del>
          <track id="5hjpd"></track>