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 root 密码丢失问题

    root密码丢失,我们需要将mysql以不检查权限的方式重新启动. 在mysql的配置文件(/etc/my.cnf)中,[mysqld]下添加一句skip-grant-tables,然后重新启动服务, ...

  2. Event --mysql的scheduler.md

    事件调度器event 相当于oracle scheduler CREATE [DEFINER = { user | CURRENT_USER }] EVENT [IF NOT EXISTS] even ...

  3. Eclipse4.6(Neon) + Tomcat8 + MAVEN3.3.9 + SVN项目完整环境搭建

    软件清单 jdk-8u102-windows-x64.exe eclipse-inst-win64.exe (Eclipse4.6 Neon) apache-tomcat-8.5.5-windows- ...

  4. 第一个Struts1步骤

    一.前端 :登陆页面 index.jsp <%@ page language="java" import="java.util.*" pageEncodi ...

  5. [Leetcode][JAVA] Binary Tree Maximum Path Sum

    Given a binary tree, find the maximum path sum. The path may start and end at any node in the tree. ...

  6. 快速创建node应用[Express框架]

    安装Express npm install -g express 建立工程 express -e ejs FaceExpresscd FaceExpress && npm instal ...

  7. [转]轻松解决oracle11g 空表不能exp导出的问题

    转自:http://www.2cto.com/database/201109/105931.html oracle11g的新特性,数据条数是0时不分配segment,所以就不能被导出. 解决方法: 1 ...

  8. C#函数式编程之递归调用

    关于递归相信大家已经熟悉的不能再熟悉了,所以笔者在这里就不多费口舌,不懂的读者们可以在博客园中找到很多与之相关的博客.下面我们直接切入正题,开始介绍尾递归. 尾递归 普通递归和尾递归如果仅仅只是从代码 ...

  9. 大熊君说说JS与设计模式之------代理模式Proxy

    一,总体概要 1,笔者浅谈 当我们浏览网页时,网页中的图片有时不会立即展示出来,这就是通过虚拟代理来替代了真实的图片,而代理存储了真实图片的路径和尺寸,这就是代理方式的一种. 代理模式是比较有用途的一 ...

  10. C++ Primer学习笔记一

    /* 题目要求把字符串BRGBBGRRGBBGBBBGRRGBGRG按RGB顺序排列,空间复杂度为O(1) */#include<iostream> using namespace std ...