活用 Shader,让你的页面更小,更炫,更快_Javascript教程_网页制作_码蚁之家_www.codes51.com
返回首页
专题
网络编程
ASP教程 .NET教程 PHP教程 JSP教程 C#教程 Java教程 Delphi教程 VB教程 C/C++教程 Android开发 IOS开发 Windows Phone开发 Python教程 Ruby教程 移动开发 其他编程教程
网页制作
HTML教程 CSS教程 Dreamweaver教程 FrontPages教程 Javascript教程 web前端
数据库
SqlServer MySql Oracle Access DB2 SQLite 其他数据库
图形设计
photoshop教程 Fireworks教程 CorelDraw教程 Illustrator教程 AutoCad教程 FLASH教程
操作系统
Windows xp教程 Windows 7教程 Windows 8教程 Windows 2003教程 Windows Server 2008教程 Linux教程 Windows 10
网站运营
建站经验 SEO优化 站长心得 网赚技巧 网站推广 站长故事
手机学院
手机速递 安卓教程 iphone教程 手机评测 手机技巧 手机知识 手机应用 手机游戏 手机导购
网店宝典
开店指导 开店经验 网店装修 网店推广 网店seo 网购技巧
软件教程
办公软件 系统工具 媒体工具 压缩工具 图文处理 文件管理
范文之家
自我介绍 自我鉴定 写作模板 合同范本 工作总结 贺词祝福语 演讲致辞 思想汇报 入党申请书 实习报告 心得体会 工作计划 简历模板 工作报告 导游词 评语寄语 口号大全 策划书范文
信息工程
软件工程 企业开发 系统运维 软件测试
移民之家
移民动态 移民政策 移民百科 移民生活 技术移民 投资移民
知识大全
母婴 数码 摄影 装修 美文 常识 时尚 婚嫁 美食 养生 旅游 兴趣 职场 教育 文学 健康
问答大全
电脑网络 手机数码 QQ专区 生活 游戏 体育运动 娱乐明星 休闲爱好 文化艺术 社会民生 教育科学 健康医疗 商业理财 情感家庭 地区问题 其他
编程问答
IOS Android .NET Java C/C++ Delphi VC/MFC 其他语言 PHP MSSQL MYSQL Oracle 其他数据库 Web开发 Windows Linux 硬件/嵌入开发 网络通信 移动开发 云计算 企业IT 游戏开发
笑话大全
幽默笑话 爱情笑话 成人笑话 校园笑话 爆笑笑话 综合笑话 古代笑话 现代笑话 国外笑话

活用 Shader,让你的页面更小,更炫,更快(1/7)

来源:互联网  时间:2018/5/15 14:01:41

 活用 Shader,让你的页面更小,更炫,更快

可编程着色器(shader)是运行在 GPU 中的程序,是现代图形渲染技术的基础。shader 赋予了开发者「逐像素着色」的能力。桌面/移动设备的图形程序 API 诸如 OpenGL,OpenGL ES,DirectX 以及新一代的 Vulkan,shader 都是重中之重,核心中的核心。

WebGL 的出现,使得在浏览器环境中渲染 3D 场景变得轻而易举。但是 WebGL 和 shader 不仅可以用来渲染 3D 场景,还可以做一些其他酷酷的事情。前两天,我用 shader 技术改造 / 复刻了之前开发的一个业务页面,颇有心得和启发,不妨记录下来。

广告:在 GCanvas 的帮助下,前端开发可以在 Weex,RN 等 Hybrid 环境中使用本文中用到的技术。详情见 GCanvas。

先看一下效果:链接

 活用 Shader,让你的页面更小,更炫,更快

左侧是原页面,地址;右侧是用 Shader 复刻后的页面,地址。

这其实是 2018 年春晚项目的一个活动页面,页面结构非常简单。这个页面当时是我完成的,所以现在复刻起来熟悉一些。

我们可以看到,复刻前的页面(后面称「原页面」)是静态的,加载了 1 个 js 文件和 6 张图片共 599K 的资源(包含一张 502K 的大尺寸透明 png 图片);而复刻后的页面上,有不少元素在动,加载了 1 个 js 文件和 4 张图片共 122K 的资源。不管是视觉效果,还是页面尺寸上的提升,都是比较明显的。

 活用 Shader,让你的页面更小,更炫,更快

 活用 Shader,让你的页面更小,更炫,更快

下面,我们就以这个页面为例,分析一下,使用 shader 是如何让这个页面更小,更炫,更快。

阅读后面的文本需要一些 WebGL 和 GLSL 的基础知识,之前在团内对曾做过一些培训,参加的同学应该不会有什么压力,没参加的同学,也可以稍微看下 the book of shaders 这篇教程。shader 比你想象的要简单易用,相信我。

大尺寸透明背景图

原页面存在的一个最大的问题是,有一张特别大的透明背景图。

 活用 Shader,让你的页面更小,更炫,更快

这张图的体积达到了惊人的 501K,这是因为这张图是具有透明通道的 png 图片。而且由于这张图是广告内容,可能不止一张,是无法融合到背景里去的,必须透明。这时怎么优化呢?
我们知道,具有透明通道的 png 的压缩是比较困难的;而不具备透明通道的图片,我们可以把它转化为 jpg 等格式,压缩比就高得多了,我们就可以以较小的质量损失去换取较大的压缩空间。

我的思路是这样:把这张透明的 png 格式图片拆分为两张不透明的 jpg 格式图片。这两张不透明的图片,其中一张继承 png 图片的 rgb 通道,还有一张则仅使用 r 通道储存 png 图片的 a 通道。然后把这两张图片拼接在一起,给 WebGL 使用。由于拼接后的这张图没有透明度分量,所以可以使用 jpg 格式压缩,尺寸大幅度降低。这张图只有 41.5k,大约为之前的 8.2%。

这张图看上去是这样的:


上一篇详解React-Router中Url参数改变页面不刷新的解决办法
下一篇vue-cli与webpack处理静态资源的方法及webpack打包的坑
明星图片
相关文章
《 活用 Shader,让你的页面更小,更炫,更快》由码蚁之家搜集整理于网络,
联系邮箱:mxgf168#qq.com(#改为@)