Jianghu Digital Platform
Login

JianghuJS-Cache Acceleration

12002

1. Concept

  • Why Accelerate

In software development, acceleration typically refers to improving the performance of systems or applications through various means. Performance issues may arise from slow data processing speeds, network transmission delays, complex computational processes, and more. By utilizing cache acceleration, some performance bottlenecks can be effectively addressed, enhancing system response times and overall performance.

  • Advantages of Acceleration

    • Faster website access: Accelerating front-end and back-end resources can shorten the time users take to access pages, speed up page loading times, improve user experience, and retain user traffic.

    • Reduced server load: By accelerating front-end and back-end resources, server load and network bandwidth consumption can be minimized, preventing server crashes due to excessively large files.

    • Enhanced security: By accelerating front-end and back-end resources, some static resources can be placed on CDN acceleration nodes and encrypted during transmission using HTTPS, further improving access security.

    • Cost savings and improved scalability: By utilizing CDN networks for resource transmission acceleration, large applications can not only enhance access speeds but also shift significant traffic to CDN nodes, alleviating server bandwidth pressure while saving server costs and improving application scalability.

2. Key Acceleration Points

  • Front-end Static Resources

    • CDN Distribution: Store static resources (such as images, stylesheets, JavaScript files) on CDN nodes worldwide, allowing users to access resources from closer nodes, thereby improving loading speeds.

    • File Compression and Merging: Compress and merge front-end static resources to reduce file sizes, accelerating transmission and loading speeds.

    • Use of Caching: Implement browser caching and server-side caching strategies to reduce duplicate requests and enhance access speeds.

  • Network Channel Acceleration

    • Use of HTTPS: Employ HTTPS protocol for secure transmission while leveraging HTTP/2 protocol's multiplexing features to reduce the number of connections and improve concurrent access speeds.

    • DNS Resolution Optimization: Configure DNS resolution appropriately, selectively using faster DNS servers to reduce domain name resolution times.

    • TCP Connection Optimization: Adjust TCP connection parameters, such as modifying TCP congestion control algorithms to optimize network transmission efficiency.

  • Back-end Data Cache Acceleration

    • Database Caching: Utilize caching techniques to store frequently queried data in cache, reducing database access and improving data retrieval speeds.

    • Result Set Caching: Implement caching strategies for computationally expensive result sets to reduce computation times and enhance response speeds.

    • Use of Cache Middleware: Introduce caching middleware, such as Redis or Memcached, to provide high-speed, scalable caching services that accelerate data retrieval and storage.

These acceleration points cover multiple aspects of front-end resources, network channels, and back-end data processing, and their comprehensive application can significantly enhance overall system performance.

3. Static Resource Cache Acceleration

Front-end static resource cache acceleration can improve page loading speeds, reduce server load, and minimize bandwidth consumption. Below are several common methods.

  • Acceleration Methods

  1. Modify HTTP Response Headers: Add Expires and Cache-Control fields to the HTTP response headers to inform browsers and CDN cache servers of the expiration time or caching strategy for the resource. When the resource is within the cache validity period, the browser or CDN cache server will issue a 304 Not Modified response to retrieve the resource from the cache.

  2. Version Number in File Names: Use the file version number as the filename; if the file content changes, the filename changes, prompting the browser to re-fetch the resource and avoid using outdated resources. For example:

<link href="style.css?version=1.1" rel="stylesheet">

  1. Local Caching: Use localStorage or sessionStorage to locally store static resources on the user's device, allowing for direct retrieval from local cache on subsequent visits, thus speeding up page access.

  2. Preloading: Use the rel attribute with the value preload in link tags to pre-load static resources during page loading, enabling subsequent resource requests to complete faster.

  3. CDN Acceleration: Utilize CDN cache servers to accelerate the transmission of static resources, enhancing page access speeds and reducing bandwidth consumption.

  • JianghuJs Front-end Acceleration

There are two methods: through Egg framework configuration and the NPM package egg-static-cache.

  1. Through Egg Framework Configuration
  • Add configuration in config/config.default.js:
// config.default.js
const path = require('path');

static: {
    dynamic: true,
    preload: false,
    maxAge: 31536000,
    buffer: true,
    dir: [
        { prefix: `/${appId}/public/`, dir: path.join(appInfo.baseDir, 'app/public') },
        { prefix: `/${appId}/public/`, dir: path.join(eggJianghuDir, 'app/public') },
    ],
},

Here, maxAge indicates the cache duration for static resources (in seconds), prefix indicates the prefix, dir indicates the directory for static resources, dynamic indicates whether caching is enabled, preload indicates whether to preload the cache at startup, maxFiles indicates the maximum number of cached files, and buffer indicates whether to cache in memory.

// plugin.js
exports.static = true;
  • enable indicates whether caching is enabled.
  1. NPM Package egg-static-cache
  • Install the egg-static-cache dependency:
npm install egg-static-cache --save
  • Add configuration in config.default.js:
// config.default.js
exports.staticCache = {
  maxAge: 31536000,
  dynamic: true,
  prefix: '/public/',
  gzip: true,
};
  • Add configuration to enable egg-static-cache in plugin.js:
// plugin.js
exports.static = true;
exports.staticCache = {
  enable: true,
  package: 'egg-static-cache',
};

  • enable indicates whether caching is enabled, and package indicates the name of the dependent NPM package.

  • Specify access to static resources in Router:

// Router.js
app.router.get('/public/(*)', app.controller.home.resources);
  • Implement front-end resource caching in Controller:
// Controller.js
const staticCache = require('egg-static-cache');
async resources() {
    const { app, ctx } = this;
    await staticCache(app, ctx, {
         prefix: '/public/'
    })
}

4. Data Cache Acceleration

  • JianghuJs Back-end Acceleration (_cache)

The JianghuJs framework minimizes weight and avoids introducing middleware like Redis, thus using a cache table to address data caching issues, which users can extend as needed.

  • Usage:

Users can use scheduled tasks or other methods to process data and store it in the _cache table for direct access.

  • Table Design
CREATE TABLE `_cache` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `userId` varchar(255) NOT NULL COMMENT 'User ID',
  `content` longtext COMMENT 'Cached data',
  `recordStatus` varchar(255) DEFAULT 'active',
  `operation` varchar(255) DEFAULT 'insert' COMMENT 'Operation; insert, update, jhInsert, jhUpdate, jhDelete, jhRestore',
  `operationByUserId` varchar(255) DEFAULT NULL COMMENT 'Operator User ID',
  `operationByUser` varchar(255) DEFAULT NULL COMMENT 'Operator Username',
  `operationAt` varchar(255) DEFAULT NULL COMMENT 'Operation Time; E.g: 2021-05-28T10:24:54+08:00 ',
  PRIMARY KEY (`id`)
) ENGINE = InnoDB COMMENT = 'Cache Table';