游戏一卡我就想砸手机：聊聊渲染到底在忙什么

说实话，我以前对“渲染”这个词完全没感觉。 直到上周五，我窝在被窝里打游戏，打到最后一个圈——手机后盖烫得跟刚出锅的饼似的，画面开始一顿一顿。那几秒我真想把它从窗户扔出去。当然没扔，手机挺贵的。 摘了壳，放窗台吹了会儿风，画面居然顺了。 这事儿让我开始琢磨：手机里到底是谁在拼命加班？答案里绕不开一个词——渲染。

翻页动画，其实就是最原始的渲染

小时候谁没在课本角落画过那种小人？翻得够快，小人就跑起来了。 手机屏幕干的是同一件事。只不过它一秒钟要翻六十页、一百二十页。你看到的“流畅画面”，是一叠画好之后才播给你看的。 区别在于，课本上画的是火柴人，几笔就完事。手机上要画的是一个完整世界：角色的发丝、地上的碎石、水面那一层晃晃悠悠的光。每一帧，全都得从零算出来。 算不完怎么办？那就丢帧。你感受到的“卡”，本质上是画面没画完，或者来不及画完。

GPU 不是更聪明，它只是人更多

CPU 和 GPU 的分工，很多人搞混。 CPU 像是几个博士生，什么难题都能解，但人少。GPU 呢，像几百个小学生在流水线上涂色，每个人只会干一件事，架不住人实在太多，一起涂特别快。 渲染这活儿，本质上就是“图片上几百万个格子，每个格子该填什么颜色”。太适合 GPU 了。 所以游戏一开高画质，GPU 就开始满负荷运转，功耗蹭蹭往上涨，热量跟着来。你摸着烫手的那块区域，多半就是它。 再往下还有个更烧钱的东西——光线追踪。以前游戏里的光影靠“估”，美工提前把该亮的地方画亮。光追是老老实实模拟光线怎么弹、怎么折射。效果确实好，可它是真贵。开光追之后帧数腰斩，太正常了。

不玩游戏也躲不掉，网页照样在渲染

有件事挺多人不知道：你此刻正在看的这个网页，浏览器也在一刻不停地渲染。 一个网页从代码到你眼前，要走好几步。浏览器先读 HTML，搭出一棵结构树；再读 CSS，决定哪块大哪块小、什么颜色；最后才把这些描述一笔一笔画成像素，送到屏幕上。

这也能解释一些老网站的毛病。为什么有的页面滚动起来跟拖着沙袋似的？因为满屏的阴影、圆角、半透明，加上一堆动画，每次滚动浏览器都得重新算一遍。 还有个词叫“重排”和“重绘”。你改一个元素的宽高，周围所有东西的位置都得重算，这是重排，最贵。你只改个颜色，浏览器不用动布局，重画一下就行，这是重绘，便宜不少。 所以前端有个说法：能用 transform 做动画，就别去改 left 和 top。这不是玄学，是真的省算力。

掉帧一定是渲染的锅吗？不一定

很多人一卡就觉得是显卡不行。其实未必。 游戏运行的链条大概是：CPU 先算逻辑，玩家在哪、敌人做什么动作、下一步场面会变成什么样；算完之后把“这一帧该画什么”打包交给 GPU；GPU 再画出来。 这条链子上任何一环慢，都会卡。 比如 CPU 那边任务太重、逻辑太复杂，GPU 再强也只能干等着。就像后厨，摆盘师傅手速再快，前面切菜的一直没把料备好，也出不了菜。 还有散热。手机烫了会自动降频，这是保护机制。本来能跑满的，为了不烧坏，主动刹车。帧率就掉了。 你摘壳、放窗边、开个省电模式，本质都是在帮它降温、减负。

所以，下次手机发烫的时候

别急着骂厂商偷工减料。 它可能正在一秒钟给你画六十张画，还得画得挑不出毛病。降低画质、调低帧率、关掉光追——这些不是敷衍，是让它少画几笔，喘口气。 渲染这事儿说白了就一句话：把一堆数字，变成你眼睛能看懂的画面。 听着简单。做起来，是真的累。