Skip to main content

前端性能优化资源列表

21
GitHub Stars
157
Curated Resources
21
Categories
23 hours ago
Last Refreshed
文档分析器分析器 APICSS 性能测试Javascript 性能测试书签栏工具CDNCDN 监测CDN 工具图片优化器加载器Metrics MonitorMetrics Monitor - APIHTML 压缩器JS & CSS 压缩器其他雪碧图生成器SVGWeb ComponentsWeb 服务器模块Web 服务器性能测试

Use this list with your AI agent

Add the Context Awesome MCP server to Claude, Cursor, or any MCP client, then ask:

"Show me 国内 resources from awesome-wpo-chinese"

Installation instructions →

What's inside

CDN

图片优化器

  • AdvPNG

    Recompress png files to get the smallest possible size.

  • Exexif

    用于从 jpeg 文件中提取 tiff 和 exif 元数据的纯 Elixir(Erlang 虚拟机上的一种类 Ruby 语言) 库。

  • Gm

    Node.js 里的 GraphicsMagick 和 ImageMagick。

  • Grunt-contrib-imagemin

    在 Grunt 中压缩 PNG 和 JPEG 图片。

  • Grunt-imageoptim

    Make ImageOptim, ImageAlpha and JPEGmini part of your automated build process.

  • Grunt-smushit

    通过雅虎 Smushit 工具来移除 PNG 和 JPG 图片中多余字节的 Grunt 插件。

Web 服务器性能测试

  • Apache JMeter

    Open source load testing tool: It is a Java platform application.

  • Autoperf

    Autoperf is a ruby driver for httperf, designed to help you automate load and performance testing of any web application - for a single end point, or through log replay.

  • bayandin/awesome-awesomeness

  • CSS will-change

    This specification defines the

  • Gohttperf

    Go Port of HTTPerf.rb.

  • HTTP Archive

    It is a permanent repository of web performance information such as size of pages, failed requests, and technologies utilized. This performance information allows us to see trends in how the Web is built and provides a common data set from which to conduct web performance research.

雪碧图生成器

  • Assetgraph-sprite

    Assetgraph transform for auto generating sprites based on the CSS dependency graph.

  • Glue

    Glue is a simple command line tool to generate sprites:

  • Grunt-spritesmith

    Grunt task for converting a set of images into a spritesheet and corresponding CSS variables.

  • Gulp-sprite

    gulp task for creating a image sprite and the corresponding stylesheets for Gulp.

  • Gulp-svg-sprites

    gulp task for creating svg sprites.

  • Pitomba-spriter

    Spriter is a simple and flexible dynamic sprite generator for CSS, using Python. It can process CSS both synchronous and asynchronous as it provides classes to be used in your python code and also a watcher that listens to your filesystem and changes CSS and sprite as soon as a static is changed.

Metrics Monitor

  • Bench

    Using Phantomas (a PhantomJS backed client performance metrics scrapper). Benchmark a page, store results in MongoDB and display result via the built in server.

  • BrowserView Monitoring

    Continually checks web page load times in Internet Explorer, Chrome and Firefox from multiple points around the world.

  • Dotcom-tools

    analyze your website's speed in real browsers from 20 locations worldwide.

  • Grunt-phantomas

    Grunt plugin wrapping phantomas to measure frontend performance.

  • GTmetrix

    GTmetrix uses Google Page Speed and Yahoo! YSlow to grade your site's performance and provides actionable recommendations to fix these issues.

  • Keepfast

    Tool to monitor indicators related to performance of a web page.

Javascript 性能测试

  • Benchmark.js

    A robust benchmarking library that works on nearly all JavaScript platforms, supports high-resolution timers, and returns statistically significant results.

  • JSlitmus

    JSLitmus is a lightweight tool for creating ad-hoc JavaScript benchmark tests.

  • JSPerf

    jsPerf aims to provide an easy way to create and share test cases, comparing the performance of different JavaScript snippets by running benchmarks.

  • Matcha

    Matcha allow you to design experiments that will measure the performance of your code. It is recommended that each bench focus on a specific point of impact in your application.

  • Stats.js

    This class provides a simple info box that will help you monitor your code performance.

  • Timing.js

    Timing.js is a small set of helpers for working with the Navigation Timing API to identify where your application is spending its time. Useful as a standalone script, DevTools Snippet or bookmarklet.

CDN 监测

  • CDNperf

    finds you fast and reliable JavaScript CDNs that make your websites snappy and happy.

JS & CSS 压缩器

  • Clean-css

    A fast, efficient, and well tested CSS minifier for node.js.

  • CSSmin.js

    cssmin.js is a JavaScript port of YUICompressor's CSS minifier.

  • CSSO

    CSS minimizer unlike others. In addition to usual minification techniques it can perform structural optimization of CSS files, resulting in smaller file size compared to other minifiers.

  • CSSshrink

    Because CSS is ospon the critical path to rendering pages. It must be small! Or else!

  • Django-compressor

    Compresses linked and inline javascript or CSS into a single cached file.

  • Django-pipeline

    Pipeline is an asset packaging library for Django, providing both CSS and JavaScript concatenation and compression, built-in JavaScript template support, and optional data-URI image and font embedding.

Showing a sample of 157 resources. View the full list on GitHub →