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. CCKJ 笔试

    面向对象三个特性: 面向对象技术是目前流行的系统设计开发技术,它包括面向对象分析和面向对象程序设计.面向对象程序设计技术的提出,主要是为了解决传统程序设计方法--结构化程序设计所不能解决的代码重用问题 ...

  2. Python笔记——break的注意事项

    在python中有个控制流的语句:break 它是用来终止循环语句的,不管此时循环体进行到哪,只要碰到break都停止执行循环语句. 1.举例脚本: #!/usr/bin/env python for ...

  3. Nginx-->进阶-->Module-->ngx_http_stub_status_module

    一.模块介绍 The ngx_http_stub_status_module module provides access to basic status information. This modu ...

  4. springMVC框架中，在hib-config.xml配置sqlserver2008数据库连接的代码

    <bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource">     ...

  5. jquery星级评论打分组件

    <!DOCTYPE HTML><html> <head> <meta charset="utf-8"><title>jq ...

  6. sublime txt 设置在浏览器预览

    1. 安装SideBarEnhancements插件 ctrl+shift+p —> Install Package —> 找到SideBarEnhancements 2. 配置预览快捷键 ...

  7. 使用GITHUB的体会

    github的网页链接  https://github.com/zhangji123/test 学习总结 通过学习使用github软件使我掌握了其使用方法及其独特之处 1.github的网址: htt ...

  8. Sql Server 简单查询 异步服务器更新语句

    //结构:select 子句 [into 子句] from 子句  [where 子句] [group by 子句]  [having 子句] [order by 子句] select  dept_c ...

  9. jsp-avaBean

    package javaBean; public class pagecount { private long count=0; public long getcount() { return cou ...

  10. TextView的一些高级应用（自定义字体、显示多种颜色、添加阴影）

    1.    自定义字体可以使用setTypeface(Typeface)方法来设置文本框内文本的字体,而android的Typeface又使用TTF字体文件来设置字体所以,我们可以在程序中放入TTF字 ...