一些新的web性能优化技术

1、IconFont:图标字体,这是近年来新流行的一种以字体代替图片的技术。它可以适应任何分辨率而不会出现图片模糊问题,与图片相比它具有更小的容量,更高的灵活性(像字体一样可以设置图标大小、颜色、透明度、hover状态、反转等),IE8以上的浏览器都支持该技术。在使用IconFont之前,你首先要确定你选则的字体库是否是收费。

2、PC 时代的性能优化工程化产品 -- StyleCombine

StyleCombine 我们称其为服务端的模块加载器,这是一个为前端性能而生的极致化产品。以工程化的方式自动实现了雅虎 34 条守则中的 10 条,可轻松部署到 Nginx/Apache 服务器上,且无视你的应用类型( java、php、nodejs 通吃 )。

它的极致在于甚至可以在服务端解析 AMD/CMD 模块的依赖关系,将子模块的 url 自动进行请求合并。

  它的极致在于已发展为 1688 后台服务器的默认配置模块,经历过千亿次访问的反复考验,试问有几个前端产品可以如此深刻地影响到后端架构?

这是值得我们骄傲的前端工程化产品,也值得我们对其不断地优化和完善!

styleCombine 系统原理图:

3、无线时代的性能优化工程化产品 -- H5增量包机制 & Style Diff Center

性能体验是无线产品的命根子,可经过 PC 端性能优化工程化的锤炼之后,我们已不满足于单个页面性能上的修修补补,而目标在于性能优化成果的框架下沉和工程复用。于是有了 H5 增量包机制,同时也有了 Style Diff Center,而工程化的思路也最终完全下沉到 1688 主客 Wing 框架中。

但是无线 H5 应用性能优化的工程化之路,我们只是刚刚开始,还远未到极致。 当你看过腾讯同学的这套字节级别的增量更新机制时,相信你在感叹极致的同时,也会意识到我们能做的事情还有许多...

附上 H5 增量更新机制工作原理图:

4、

  • 模块的异步加载,关键模块优先加载
  • 图片的懒加载,用户滑动的时候在加载,图片尺寸的控制

5、为了让页面能够流畅地渲染,技术上下点功夫那是必须的!站在用户体验的角度去思考,其实很多问题都会迎刃而解:

  • 首屏一定要快
  • 滚屏一定要流畅
  • 能不加载的先别加载
  • 能不执行的先别执行
  • 渐进展现、圆滑展现

参考文章:

1、前端性能优化工程化进阶

2、web前端性能优化进阶路

3、淘宝首页性能优化实践

4、一起来看看淘宝首页的个性化

时间: 2024-10-31 12:17:22

一些新的web性能优化技术的相关文章

性能魔方mmTrix推出基于云的web性能优化服务

性能魔方,新一代云应用性能管理服务商,今天宣布推出基于云的web性能优化服务,帮助客户优化网站速度,提高用户体验,以获得更好的用户转化率和收入. 性能魔方团队有着丰富的行业经验和卓越的前瞻思想,并充分利用云计算技术,使网络更快."我们有信心,我们的网站性能监测和网站速度优化服务将迅速为网站带来好处和价值,这些价值包括更好的用户体验和更高的投资回报率"CEO蒲炜说. 测试你的网站性能,分析与行业基准或者竞争对手的差距,请访问www.mmtrix.com,这是免费的,而且使用简单. 关于性

web 性能优化指南阅读笔记

1.关于拥塞预防算法 PRR-比例降速,RFC6937 规定的一个新算法,其目标是改进丢包后的恢复速度,谷歌测量结果:该算法改进丢包造成的平均连接延迟减少了3%-10%.PRR是linux 3.2+内核默认的用赛预防算法. 2.关于拥塞窗口 把服务器的初始CWND值增大到RFC 6928新规定的10段,是提升用户体验以及所有TCP 应用性能的最简单方式.Linux上,IW10是2.6.39以上版本内核的新默认值. web 性能优化指南阅读笔记

Web性能优化 高并发网站解决 单例

Web性能优化分为服务器端和浏览器端两个方面. 一.浏览器端,关于浏览器端优化,分很多个方面1.压缩源码和图片JavaScript文件源代码可以采用混淆压缩的方式,CSS文件源代码进行普通压缩,JPG图片可以根据具体质量来压缩为50%到70%,PNG可以使用一些开源压缩软件来压缩,比如24色变成8色.去掉一些PNG格式信息等. 2.选择合适的图片格式如果图片颜色数较多就使用JPG格式,如果图片颜色数较少就使用PNG格式,如果能够通过服务器端判断浏览器支持WebP,那么就使用WebP格式和SVG格

移动web性能优化笔记

移动web性能优化 最近看了一些文章,对移动web性能优化方法,做一个简单笔记 笔记内容主要出自 移动H5前端性能优化指南和移动前端系列——移动页面性能优化

web性能优化--总体总结。

web性能优化: 1,从http方面考虑:我们应该尽量减少http请求数量,因为前后端通信的成本很大,请求一个100k的文件和请求两个50k的文件的时间是相差很多的.那么我们应该怎么做呐?                 (1),合并js,css,减少请求的数量.使得性能提升 (2),使用雪碧图将背景图片合并成一个文件. 2,从代码需求来分析 (1),非核心的代码延迟来进行加载或者动态进行加载,将公共代码就行抽离,使用cdn存储静态的资源,在浏览器进行缓存资源. 总结的不全,希望以后可以一直总结

关于 Web 性能优化

压缩源码和图片 JavaScript 文件源代码可以采用混淆压缩的方式,CSS 文件源代码进行普通压缩,JPG 图片可以根据具体质量来压缩为 50% 到 70%,PNG 可以使用一些开源压缩软件来压缩,比如 24 色变成 8 色.去掉一些 PNG 格式信息等. 选择合适的图片格式 如果图片颜色数较多就使用 JPG 格式,如果图片颜色数较少就使用 PNG 格式,如果能够通过服务器端判断浏览器支持 WebP,那么就使用 WebP 格式和 SVG 格式. 合并静态资源 包括 CSS.JavaScrip

Web性能优化系列

web性能优化之重要,这里并不打算赘述.本系列课程将带领大家认识.熟悉.深刻体会并且懂得如果去为不同的站点做性能优化 本系列参考了大量互联网资料.Pro HTML5 Performance.web性能权威指南等 通过自己实践.重新组织.主要用于学习交流. web性能优化目录  浏览器渲染过程

移动应用性能优化技术[摘抄1]

http://www.51cto.com/ http://mobile.51cto.com/exp/apm/ 测试的执行过程是被监控的,在所有针对不同用户负载的应用程序响应被测试完之后,其结果也会对比事先定义好的服务水平协议得到全面的分析.性能测试工具可提供问题诊断功能,帮你找出根本原因从而快速解决. 七.移动应用性能优化技术 移动应用的性能优化技术取决于特定的应用极其瓶颈特性.我们在这里分享几个通用的优化移动应用性能的技巧: 减少客户端到服务器的HTTP请求数量,可以缩短页面加载时间 将Jav

【web性能优化】DNS解析与ip

DNS解析与ip url   统一资源定位符  它或许指定的是一个文件资源 或许是一个方法(比如接口) 为什么看到的网站会动呢  是因为浏览器可以解析html DNS 解析 ip地址 http权威指南 js引擎 301    302 域名服务器  ip服务器 cookie  是否合法 .cn   .org .gov     最高级域名 www.baidu.com news.baidu.com. 从右向左解析域名  先解析的是. 是公网(最外层域名)的意思  再解析.com  然后baidu子域名