前端重构实践(一) —— 性能优化
- 前言:
最近一直在做性能优化和模块化改造的工作,并完成了一次前端重构。在这里总结出一些经验和得失来帮助大家思考。共两篇文章,第一篇讨论性能优化,第二篇讨论模块化框架。而之所以把这两个话题放到一起,是因为这两项工作都涉及到对前端代码进行不同程度的重构,而且模块化改造其实是我们在对性能优化做到一定程度之后发现必须要做的一件事情。本篇是性能优化的部分,下面我把我们的产品简称为N页面。
- 应用场景分析:
N页面作为一个入口页面,对页面加载速度有着极高的要求。同时,N页面内部却又有着非常复杂的功能与交互。N页面的第一版上线时,页面引用的js文件有3个,一共40-50k(压缩&Gzip之后)。页面onload时间在1.3秒。
1.3秒的load时间,相比较绝大多数网站来说都是一个不错的数值。但老板一句话“怎么这个页面打开这么慢”,立刻像是给我们的后背安了一枚×××。性能优化成了N页面下一步工作的重中之重。
老板重视页面速度,对于Web前端开发人员来说其实是件幸事,这表明你将有更丰富的时间和资源去实践Web性能优化这一课题,不用被翻来覆去的产品升级需求所打扰。那么对于N页面,我们做了哪些实践:
常规优化手段包括:
CSS置顶,JS置底。
静态资源外联、合并、压缩。
图片优化。(Png使用pngcrush;Gif使用gifsicle;Jpeg使用jpegtran)
图片延迟加载。(主要针对首屏外的图片。)
使用CSS Sprite,首屏图片全部合到一张图上。
静态文件上CDN。(静态文件的下载能提速20%左右。)
静态文件设置强缓存。(命中强缓存82.4%;命中若缓存3.4%;未命中缓存14.2%。)
HTML压缩。(Gzip后减少%5。)
增强型手段:
基础库定制。(用代码分析代码,自动打包被使用到的方法作为基础库,使基础库从原来的压缩后25K减小为9.8K,减小了61%)
页面数据存储优化。(从原来的直接写json形式的script,变为将json隐藏在textarea中,初始化或用到的时候才去提取并进行解析。)
首屏CSS检测。(对首屏用到的CSS进行检测,将不属于首屏的CSS代码单独打包并移到首屏之外进行延迟加载)
js按需加载。(在后面做重点介绍)
- 监控& 测量
性能优化最重要的工作不是优化而是监控。这个道理很简单:没有监控体系就没办法衡量性能优化的效果,那么你所做的任何工作都是盲目的。
我们对性能的监控是从多个维度展开的,包括平均时间、时段分布、浏览器分布、省份、运营商等。便于发现和定位任何一个细节的问题。
而在平均时间这一维度,我们又分为四个级别:
Head时间– head标签加载完成的时间
TTi时间– 页面可交互时间(即首屏第一次渲染出来的时间)
Dom时间– Dom Ready的时间
Load 时间– 页面完全加载完成的时间
这样划分的好处是,页面加载每个环节的耗时一目了然:
Head :CSS加载时间
TTI :整体HTML加载和渲染时间
DOM 减TTI : js文件网络传输时间和在浏览器进行解析的时间
Load 减Dom : js初始化+ 图片加载的时间
而且,我们通过移动tti时间点的位置,发现了一个有趣的现象,如下图
可以看出,页面加载的性能瓶颈就在script的下载和解析时间。
为了进一步定位性能瓶颈,我们在页面内对用户网速进行了测试,结果很震惊:有2%的用户网速小于2k/s,5%的用户网速小于10k/s。(国内的网络状况真是惨不忍睹啊)
那么,优化方案就很明显了:最大限度地减小js文件大小,以减小网络传输时间,提升页面性能。
通过后来的优化工作我们发现:js代码压缩、Gzip后每减小1k,页面加载时间就能减小10ms左右。
- 按需加载:
这是除了js压缩外,你能想到的最有效减小js文件大小的办法了。
按需加载,顾名思义,就是在页面首次加载的时候只提供最需要的js给用户,而剩余的js等用户使用到了相关的功能再去加载。
按需加载适合哪种类型的网站:如果80%的用户来到你的页面只使用20%的功能,那么就有必要把这20%的js作为首屏加载,而剩余的js做按需加载。
从这个角度来讲,几乎所有网站都可以做按需加载,因为总有一些功能是用户很少会用到的。
那么,如何做按需加载:
按需加载需要有一套js模块加载的框架。这个框架的作用是:保障在所需的js加载完成后才去执行回调方法。
按需加载还需要有一套触发条件。在我们的页面中,对鼠标移动和鼠标点击都进行了监听,以保障在用户想使用某个功能之前或进行了相应操作时,触发js加载。
除此之外,我们还对js基础库进行了进一步拆分,分为首屏用到的基础方法,和延迟加载的js所需的基础方法。以最大限度地保证首屏js量的最小化。
通过按需加载的拆分,我们将首屏的js代码从原来的gzip之后40-50k减小到了只有24k。
同时,我们对CSS的加载也进行拆分,首屏不需要的CSS代码也随JS进行延迟加载。
- 效果 & 总结
性能优化是一个非常繁琐的工作,页面性能受很多因素的制约,不过相信一点:方法总比问题多。我们通过优化,最终将页面加载时间降到了650ms,仅为优化前的一半。所有优化工作中,效果最明显的就是js按需加载了。
不过按需加载也为我们的代码结构带来了很大的冲击,极大地改变了我们写代码的方式,也制造了很多问题,我会在下一篇《前端重构——模块化框架实践》中进行详细介绍。
by lizhouquan
转载于:https://blog.51cto.com/baidutech/1033687
前端重构实践(一) —— 性能优化相关推荐
- 让互联网更快的协议,QUIC在腾讯的实践及性能优化
本文来自腾讯资深研发工程师罗成在InfoQ的技术分享. 本文首发InfoQ公众号,系腾讯技术工程事业群与InfoQ合作的"腾讯技术工程"专栏第二篇文章,新的一年,我们将会为技术人员 ...
- 前端如何进行网站性能优化
大家好,我是IT修真院学员,一枚正直纯洁善良的WEB程序员,今天给大家分享一下,修真院官网JS任务4,深度思考中的知识点-前端如何进行网站性能优化. 一.背景介绍 性能优化的目的 1.从用户角度而言, ...
- Weex实战分享|企鹅电竞Weex实践和性能优化
渠宏伟 企鹅电竞前端团队Leader H5页面存在的问题 H5页面对比终端的不足,第一,加载慢:第二,交互差. 加载耗时比较长,因为它受限于Webview,Webview在Android上启动就比较慢 ...
- web前端 网页加载 性能优化大全
web前端 性能优化 - - 如何提高网页加载速度 文章目录 web前端 性能优化 --- --- 如何提高网页加载速度 1. 减少DNS查找 2. 使用CDN托管资源 3. 减少Http请求 浏览器 ...
- 前端框架/架构,性能优化,负载均衡,首屏渲染
前端数据结构与算法- https://zhuanlan.zhihu.com/p/27659059 > 前端重构方案 前端重构方案了解一下- https://blog.csdn.net/vM199 ...
- 都说百度前端牛,来看看百度前端工程化之H5性能优化
导读:从粗糙到精致,从简单到复杂,全球互联网Web App(网页应用)平均体积已增压到1.6Mb,随着音视频等富媒体内容的流量池膨胀,终端设备上的用户对网页装载速度尤其敏感.页面不能做到秒开,就会有大 ...
- 前端开发:Web性能优化有哪些方法?
Web性能优化,主要分为前端和后台两个部分性能优化,后台性能优化决定了Web能不能用,前端优化决定了其好不好用,也就是牵涉到前端用户体验和Web易用性等情况,所以前端性能与用户体验是有着极大的关联的. ...
- Web性能优化实践——应用层性能优化
随着公司项目的进一步推广,用户数量的增加,已经面临着单台服务器不能负载的问题. 这次的优化由于时间关系主要分两步走,首先优化应用层代码以提高单台服务器的负载和吞吐率.之后再进行分表,引入队列.MemC ...
- mysql数据库前端缓存_MySQL数据库性能优化--缓存参数优化
在平时被问及最多的问题就是关于 MySQL 数据库性能优化方面的问题,所以最近打算写一个MySQL数据库性能优化方面的系列文章,希望对初中级 MySQL DBA 以及其他对 MySQL 性能优化感兴趣 ...
最新文章
- 【CV】吴恩达机器学习课程笔记第10章
- Swift - 使用网格(UICollectionView)的自定义布局实现复杂页面
- 4行代码AC——L1-024 后天(5分)
- Python 开发桌面小工具,让代码替我们干重复的工作!
- 排序千万级数据_MySQL 对于千万级的大表要怎么优化?我写了6000字的深度解读...
- 被问到一个简单的脚本后
- linux用cmake编译,CMake使用简介(forLinux)
- 计算机连接网络显示有限访问权限,电脑WiFi连接总是提示有限的访问权限是什么意思...
- 小程序软件有必要申请软件著作权登记么?
- hexo d错误:fatal: unable to auto-detect email address
- chromecast 协议_如何更改您的Chromecast的设备名称
- WebUploader 上传 php 怎么回去返回的图片路径
- c语言内部函数与,内函数和外函数关系 有关C语言的内部函数和外部函数的定义说明...
- Matlab计算矩阵频率分布直方图
- HOOFR: 增强型仿生特征提取器
- 【面经——虎牙实习+一面+HR面+offer】
- 彻底了解DVD:从入门到精通(二)[转]
- 两种方式实现线程通信:三个线程交替打印AABBCC
- 达梦数据库DCA取证培训总结
- 菜鸟潇寒学习C++笔记------第二部分