Linux帧缓冲区软件着色器：C性能逊于Node.js的原因及优化

我原本预期C语言的性能远优于Node.js，但在实现修改Linux帧缓冲区的简单软件着色器动画时，实际测试中C语言的帧率（frames per second）反而低于Node.js。

C语言实现代码 #

// anime.c
#include <stdio.h>
#include <stdlib.h>
#include <fcntl.h>
#include <sys/mman.h>
#include <linux/fb.h>
#include <unistd.h>
#include <sys/ioctl.h>
#include <stdint.h>
#include <string.h>

#define BYTE 8
#define MAX_BYTE 255

int main()
{
    struct fb_var_screeninfo vinfo;
    struct fb_fix_screeninfo finfo;
    int fb_fd = open("/dev/fb0", O_RDWR);
    if (fb_fd == -1)
    {
        perror("Error: cannot open framebuffer device");
        exit(1);
    }

    if (ioctl(fb_fd, FBIOGET_VSCREENINFO, &vinfo) == -1)
    {
        perror("Error reading variable information");
        exit(2);
    }
    int w = vinfo.xres;
    int h = vinfo.yres;
    int color_channels = (vinfo.bits_per_pixel / BYTE);
    long screen_size = w * h * color_channels;
    uint8_t *buffer = (uint8_t *)mmap(0, screen_size, PROT_READ | PROT_WRITE, MAP_SHARED, fb_fd, 0);

    double t = 0;
    while (t < 10)
    {
        long k;
        for (k = 0; k < screen_size; k += color_channels)
        {
            uint32_t i = k / (color_channels * w);
            uint32_t j = (k / color_channels) % w;
            uint32_t x = j;
            uint32_t y = h - 1 - i;
            double px = (double)x * t / w;
            double py = (double)y * t / h;
            uint8_t r = (uint8_t)(MAX_BYTE * px) % MAX_BYTE;
            uint8_t g = (uint8_t)(MAX_BYTE * py) % MAX_BYTE;
            uint8_t b = (uint8_t)0;
            buffer[k] = b;
            buffer[k + 1] = g;
            buffer[k + 2] = r;
            buffer[k + 3] = MAX_BYTE;
        }
        t = t + 0.05;
    }
    munmap(buffer, screen_size);
    close(fb_fd);
    return 0;
}

编译及运行命令：

gcc anime.c -o anime -lm
sudo ./anime

Node.js实现代码 #

// anime.mjs
import fs from 'node:fs';

const MAX_BYTE = 255;
const framebufferPath = '/dev/fb0';

const Screen = () => {
    const ans = {};
    ans.width = 2560;
    ans.height = 1440;
    ans.bytesPerPixel = 4;
    ans.channels = 4;
    ans.size = ans.width * ans.height * ans.bytesPerPixel;
    ans.buffer = Buffer.allocUnsafe(ans.size);
    ans.fb = fs.openSync(framebufferPath, 'r+');
    ans.map = (lambda, time) => {
        const channels = ans.bytesPerPixel;
        const w = ans.width;
        const h = ans.height;
        for (let k = 0; k < ans.size; k += channels) {
            const i = k / (channels * w);
            const j = (k / channels) % w;
            const x = j;
            const y = h - 1 - i;
            const color = lambda(x, y, time);
            if (!color) continue;
            ans.buffer[k] = MAX_BYTE * color[2];
            ans.buffer[k + 1] = MAX_BYTE * color[1];
            ans.buffer[k + 2] = MAX_BYTE * color[0];
            ans.buffer[k + 3] = MAX_BYTE;
        }
        return ans.paint();
    }
    ans.paint = () => {
        fs.writeSync(ans.fb, ans.buffer, 0, ans.size, 0);
        return ans;
    }
    return ans;
}

const screen = Screen();
const render = (x, y, t) => {
    const px = (x * t) / screen.width;
    const py = (y * t) / screen.height;
    return [px % 1, py % 1, 0];
}

const play = ({ oldTime, time }) => {
    const newTime = new Date().getTime();
    const dt = (newTime - oldTime) * 1e-3;
    screen.map(render, time);
    if(time > 10) return;
    setTimeout(() => play({ oldTime: newTime, time: time + dt }));
}
play({ oldTime: new Date().getTime(), time: 0 });

运行命令：

sudo node anime.mjs

原因分析 #

1. 未开启编译优化：默认gcc编译使用-O0级别（无优化），保留调试相关冗余代码，执行效率极低。而Node.js的V8引擎会对JavaScript代码进行即时编译（JIT），自动完成循环展开、冗余计算消除等优化，实际执行效率接近编译后的优化C代码。
2. 循环内计算冗余：C代码通过k的除法和取模计算像素坐标i、j，这两类操作CPU耗时较高；同时每帧循环内重复计算多个可预求值的表达式，进一步拖慢速度。
3. 内存访问效率差异：C代码逐字节写入帧缓冲区，而Node.js的Buffer是连续内存块，writeSync一次性写入的方式更利于操作系统缓存优化；此外C直接操作mmap共享内存，缺少局部性优化。
4. 时间控制逻辑差异：C版本固定每帧t += 0.05，不考虑实际渲染耗时，若单帧渲染超过0.05秒，实际帧率会低于预期；而Node.js基于真实时间间隔更新，帧率表现更贴合实际执行效率。

优化方案 #

1. 开启编译优化 #

使用-O2或-O3级别编译，这是提升C代码性能最直接的方式：

gcc anime.c -o anime -lm -O2

-O2会启用大部分通用优化，包括循环展开、冗余计算消除、寄存器分配优化等，能大幅提升执行速度。

2. 重构循环逻辑，消除冗余计算 #

将基于k的循环改为直接遍历x、y坐标，避免除法和取模操作：

double t = 0;
while (t < 10) {
    // 预计算每帧的缩放因子，避免循环内重复计算
    double scale_x = MAX_BYTE * t / w;
    double scale_y = MAX_BYTE * t / h;
    // 直接遍历y、x坐标
    for (int y = 0; y < h; y++) {
        int flipped_y = h - 1 - y;
        double py = flipped_y * scale_y;
        uint8_t g = (uint8_t)py; // 强制转uint8_t等价于%MAX_BYTE，自动截断超出范围的值
        for (int x = 0; x < w; x++) {
            double px = x * scale_x;
            uint8_t r = (uint8_t)px;
            // 计算当前像素的内存偏移
            int offset = (y * w + x) * color_channels;
            buffer[offset] = 0;          // 蓝色通道
            buffer[offset + 1] = g;      // 绿色通道
            buffer[offset + 2] = r;      // 红色通道
            buffer[offset + 3] = MAX_BYTE; // Alpha通道
        }
    }
    t += 0.05;
}

直接获取x、y坐标避免了除法和取模，同时预计算缩放因子，减少循环内的浮点运算量。

3. 优化内存访问 #

将帧缓冲区指针转为uint32_t*，一次性写入整个RGBA像素（需确保像素4字节对齐），减少内存操作次数：

uint32_t *buf_32 = (uint32_t*)buffer;
// 在循环内：
// 注意字节序需匹配帧缓冲区格式，此处为小端序示例
uint32_t color = (MAX_BYTE << 24) | (r << 16) | (g << 8) | 0;
buf_32[y * w + x] = color;

4. 修正时间控制逻辑 #

参考Node.js的实现，基于真实时间更新t，确保帧率计算准确：

#include <time.h>

// ... 初始化代码 ...

struct timespec start, current;
clock_gettime(CLOCK_MONOTONIC, &start);
double t = 0;
while (t < 10) {
    // 渲染逻辑 ...

    // 计算真实时间间隔
    clock_gettime(CLOCK_MONOTONIC, &current);
    double dt = (current.tv_sec - start.tv_sec) + (current.tv_nsec - start.tv_nsec) * 1e-9;
    t += dt;
    start = current;
}

这样能更准确地模拟动画的时间流逝，避免固定步长导致的帧率偏差。

内容的提问来源于stack exchange，提问作者pedroth