zoukankan      html  css  js  c++  java
  • 一些新的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、一起来看看淘宝首页的个性化

  • 相关阅读:
    MySQL 基础 查询
    Mysql+keepalived双主
    Kubernetes(二)K8S基础架构
    Kubernetes(一)K8S入门
    Docker (五) 利用Dockerfile创建Nginx镜像
    Docker (四) 使用Dockerfile的方式构建镜像
    Docker (三) 使用commit创建Docker镜像
    Docker (二) Docker网络配置
    Ansible (四) 角色Roles
    Docker (一) Docker入门
  • 原文地址:https://www.cnblogs.com/huansky/p/5898890.html
Copyright © 2011-2022 走看看