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. [转]Excel 取汉字拼音首位

    转自:http://jingyan.baidu.com/article/63acb44adca44461fcc17e85.html 转自:http://jingyan.baidu.com/articl ...

  2. [转] mhvtl虚拟磁带库的安装与应用

    转自:candon123  -- http://candon123.blog.51cto.com/704299/388192/ 1.获取mhvtl: 官方网站:http://mhvtl.nimsa.u ...

  3. OA项目之分页

    using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace Digit ...

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

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

  5. Sql Server 复制表

    SELECT INTO 和 INSERT INTO SELECT 两种表复制语句 1.INSERT INTO SELECT语句 语句形式为:Insert into Table2(field1,fiel ...

  6. 对比poj3050

    #include <stdio.h> const int MAXN = 10; const int dir[4][2] = { {-1, 0}, {1, 0}, {0, -1}, {0, ...

  7. [PHP]Yaf + composer 引起大幅性能下降

    composer.json 文件可以用命令 composer init 创建,命令是交互式的. 也可以直接编辑一个 json 文件,如下: repositories 中 url 使用中国全量镜像地址. ...

  8. Microsoft Language and Locale Codes(微软语言和地区代码汇总)

    https://msdn.microsoft.com/en-us/library/ms533052(v=vs.85).aspx

  9. JAVA -Xms -Xmx -XX:PermSize -XX:MaxPermSize 区别

    java  -Xms -Xmx -XX:PermSize -XX:MaxPermSize     在做java开发时尤其是大型软件开发时经常会遇到内存溢出的问题,比如说OutOfMemoryError ...

  10. Centos添加新硬盘、分区、格式化、自动挂载

    创建分区 #fdisk /dev/hdb 格式化新创建的分区 #mkfs.ext3 /dev/hdb1 使新创建的分区挂载/mnt/data01目录下 #mount /dev/hdb1 /mnt/da ...