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、一起来看看淘宝首页的个性化

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

  1. web性能优化 来自《web全栈工程师的自我修养》

    最近在看<web全栈工程师的自我修养>一书,作者是来自腾讯的前端工程师.作者在做招聘前端的时候问应聘者web新能优化有什么了解和经验,应聘者思索后回答“在发布项目之前压缩css和 Java ...

  2. Web 性能优化： 使用 Webpack 分离数据的正确方法

    摘要: Webpack骚操作. 原文:Web 性能优化: 使用 Webpack 分离数据的正确方法 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 制定向用户提供文件的最佳方式可能是一 ...

  3. 关于WEB 性能优化 （摘抄）

    压缩源代码和图片 JavaScript文件源代码可以采用混淆压缩的方式,CSS文件源代码进行普通压缩,JPG图片可以根据具体质量来压缩为50%到70%,PNG可以使用一些开源压缩软件来压缩,比如24色 ...

  4. web性能优化——浏览器相关

    简介 优化是一个持续的过程.所以尽可能的不要有人为的参与.所以能自动化的或者能从架构.框架级别解决的就最更高级别解决. 这样即能实现面对开发人员是透明的.不响应,又能确保所有资源都是被优化过的. 场景 ...

  5. web性能优化之--合理使用http缓存和localStorage做资源缓存

    一.前言 开始先扯点别的: 估计很多前端er的同学应该遇到过:在旧项目中添加新的功能模块.或者修改一些静态文件时候,当代码部署到线上之后,需求方验收OK,此时你送了一口气,当你准备开始得意于自己的ma ...

  6. Web 性能优化：21 种优化 CSS 和加快网站速度的方法

    这是 Web 性能优化的第 4 篇,上一篇在下面看点击查看: Web 性能优化:使用 Webpack 分离数据的正确方法 Web 性能优化:图片优化让网站大小减少 62% Web 性能优化:缓存 Re ...

  7. Web 性能优化： 图片优化让网站大小减少 62%

    摘要: 压缩各种格式的图片. 原文:Web 性能优化: 图片优化让网站大小减少 62% 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是 Web 性能优化的第二篇,上一篇在下面看点 ...

  8. web前端除了关注代码功能实现,还应具备web性能优化以及SEO优化的常识

    web前端除了关注代码功能实现,还应具备web性能优化以及SEO优化的常识 ——不会WPO.SEO的前端工程师不是好码农 作为一名web前端工程师,除了要实现上级的要求,满足其所需要的功能,还要在平时 ...

  9. Web性能优化 高并发网站解决 单例 已看1

    Web性能优化分为服务器端和浏览器端两个方面. 一.浏览器端,关于浏览器端优化,分很多个方面1.压缩源码和图片JavaScript文件源代码可以采用混淆压缩的方式,CSS文件源代码进行普通压缩,JPG ...

随机推荐

  1. 重置mysql数据库密码相关方法

    方法一: 在my.ini的[mysqld]字段加入:skip-grant-tables重启mysql服务,这时的mysql不需要密码即可登录数据库 然后进入mysqlmysql>use mysq ...

  2. zlib快速编译脚本

    zlib允许使用IDE编译生成dll以及静态库,高版本写一个脚本就能轻松的一键编译生成静态/动态lib以及dll文件 以下是一句话编译批处理脚本 nmake -f win32\Makefile.msc ...

  3. javascript 封装分页

    最近自己做了一个后台,想把分页通过js给封装起来 于是乎就有了下面的代码 此代码,算是一个半成品,还需完善,思路还是可以借鉴的 page方法传入3个参数 1.total总条数 2.page当前页码 3 ...

  4. three.js 源码注释（四十四）Light/DirectionalLight.js

    /** * * DirectionalLight方法 根据设置灯光的颜属性color, 强度属性intensity创建平行光光源. * DirectionalLight 对象的功能函数采用定义构造的函 ...

  5. OSIC Performance Bot

    https://github.com/lbragstad/keystone-performance

  6. c++中级 STL基础学习（二）

    deque 和vector差不多,可以在前端后端插入,一般用deque取代vector,vector只能在后端插入push_back().deque还可以push_front(),但是deque后端插 ...

  7. unreal3对象属性自动从配置文件中加载的机制

    unrealscript中有两个与属性自动配置相关的关键字: config/globalconfig 当把它们应用于属性时,对象在创建后,该属性的初始值会被自动设置为相对应ini文件中的值. 举例来说 ...

  8. cocos2d-x 之 CCArray 的遍历(3)

    cocos2d-x中CCArray的遍历,需要几个宏.现代C++程序设计建议尽量不要使用宏,所以数组的遍历也可以自己写. 但cocos2d-x官方已经提供了几个方便数组遍历的几个宏,用好了,能方便许多 ...

  9. (转) 在C#用HttpWebRequest中发送GET/HTTP/HTTPS请求

    转自:http://blog.csdn.net/zhoufoxcn/article/details/6404236 通用辅助类 下面是我编写的一个辅助类,在这个类中采用了HttpWebRequest中 ...

  10. PHP如何连接Access数据库

    PHP代码: <?php $connstr="DRIVER={Microsoft Access Driver (*.mdb)}; DBQ=" .realpath(" ...