腾讯前端首屏优化案例

下面是对腾讯前端团队优化手Q一个页面案例的总结

优化目标页面:手Q群成员分布的页面

左面是首屏,右面是下拉后到底部

这个页面中,可以划分成四个部份:活跃群成员、男女比例、省市分布、年龄 将前三个部份归入首屏渲染时间,为主要优化目标 优化过程 (1)活跃群成员头像的懒加载,初始状态使用默认头像快速显示 (2)使用内联js 之前,js都放入外部文件,为了避免阻塞,放到页面底部加载 js之中有获取核心数据的逻辑 这种方式下,需要等待js文件加载完成,然后再发起请求获取数据 优化后,把获取核心数据的代码提取出来,放入head部分中,这样就可以提前执行获取数据的动作,减少了一个JS加载的往返时间 (3)使用内联css 与内联js的思路相同 之前,也是使用css外部文件 优化后,把首屏需要的css内联到head内 注意:html+内联js css 时要注意整体的大小,最好不要超过14K,这样可以最优网络传输 (4)次屏逻辑延后处理,减少阻塞 这个优化思路简洁 实用 有效,性能提升20%左右

原文发布于微信公众号 - 性能与架构(yogoup)

原文发表时间:2016-01-02

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏维C果糖

史上最简单的 MySQL 教程(四十二)「代码执行结构」

在 MySQL 中,没有for循环,仅有while循环、loop循环和repeat循环,呃,还有一种非标准的goto循环,在此我们仅介绍while循环,其基本语...

4587
来自专栏前端儿

Node.js起步 -- (1)

  我们知道JavaScript是运行在浏览器中的,浏览器为它提供了一个上下文(context),从而让JavaScript得以解析执行。

1562
来自专栏积累沉淀

shell脚本学习之必须了解的基础命令

命令历史 history !! 表示执行上一条命令 !n  表示执行历史中第n条命令 !字符串  表示执行命令历史中首次出现该字符串的命令 设置别名:...

1859
来自专栏IT技术精选文摘

教你如何监控网站URL是否正常

7045
来自专栏H2Cloud

Boost::asio io_service 实现分析

Boost::asio io_service 实现分析 io_service的作用 io_servie 实现了一个任务队列,这里的任务就是void(void)的...

5549
来自专栏北京马哥教育

高性能HTTP加速器Varnish(安装配置篇)

一、安装Varnish Varnish的安装非常简单,下面逐步介绍: 1、安装前的准备 Varnish安装环境如下表1所示: 表1 主机名 操作系统 IP地址...

3126
来自专栏cloudskyme

eclipse3.7插件构建自定义右键菜单

1.1 简介 在开发工具上添加自己需要的功能,可以基于eclipse的插件进行扩展以满足新功能的需要。下面就说说如何在eclipse上如何添加菜单项。 1.2 ...

4156
来自专栏Laoqi's Linux运维专列

超详细vim操作解析

vim详细操作解析 使用#yum install -y vim-enhanced 来安装vim服务 一般模式下移动光标 image.png Ctrl+b 往...

38611
来自专栏叁金大数据

自学Python四 爬虫基础知识储备

  首先,推荐两个关于python爬虫不错的博客:Python爬虫入门教程专栏   和 Python爬虫学习系列教程 。写的都非常不错,我学习到了很多东西!在此...

1011
来自专栏C/C++基础

程序内存布局

C/C++程序为编译后的二进制文件,运行时载入内存,运行时内存分布由代码段、初始化数据段、未初始化数据段、堆和栈构成,如果程序使用了内存映射文件(比如共享库、共...

1571

扫码关注云+社区

领取腾讯云代金券