前端性能优化实践方案总结

发布时间:2017-2-26 6:54:51 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"前端性能优化实践方案总结 ",主要涉及到前端性能优化实践方案总结 方面的内容,对于前端性能优化实践方案总结 感兴趣的同学可以参考一下。

此篇文章介绍前端性能优化的一些实践方案。主要是结合结尾几个案例摘抄总结,找出性能优化过程中一些通用的方案。

1. 客户端将初始化webview和加载内容同步进行,通过客户端的长链接来加载内容。如果长链接通过够快,可能webview启动完成,页面就可以显示出来了。

2. 离线缓存:客户端缓存html页面,webview启动时用缓存的页面展示给用户,wns组件同时计算缓存页面的md5,并放到请求头的e-tag上,服务器收到请求后,将服务器上需要返回给客户端的html页面的md5值与缓存页面的md5值进行比对,如果一致返回304,如果不一致,则刷新webview,显示最新数据,并更新缓存内容。只缓存html资源,其它静态资源依赖浏览器缓存。

3. 增量更新:内容拆分成静态内容和动态内容后,对静态内容进行增量更新,也就是只更新有变化的部分。将静态资源打包动态更新至客户端,客户端提前下载静态资源包,用户访问先从本地加载资源,减少白屏时间。此种方法只在核心页面使用,根据资源包的大小,网络环境判断是否下载。例如低于 100kb的资源包,3g、4g、WIFI 环境启动下载,超过 500KB WIFI 环境下才会下载。

4. 预加载:通过前置页面提前预加载相关资源。

5. 页面图片的处理:雪碧图,CSS3写的图,使用base64位引用小的icon图。支持webp图片格式。针对不同的网络带宽下载不同的图片格式,比如wifi下载高清图,4g普通图,3g低质量的图。图片的懒加载。减少图片大小和图片请求。

6. 首屏优化:域名收敛(减少dns寻址时间),html文档压缩(减少同步返回的数据量),静态资源合并,模块异步加载,图片懒加载等。

7. 合适的数据渲染方式:模版的渲染到底是前端做还是后端输出视情况而定。后端输出模版适用于数据量不大的情况,当数据量较大,后端输出的html体积会增大,此时可采用前端模版来渲染,后端开接口只提供数据,前端组装页面模块并展示。折中的办法是后端输出部分的静态数据,加快页面展示,前端再去获取最新数据并对模块进行更新。目前我们的活动模板就采用了这种方式。

8. 提前缓存大促相关资源:大促预热期间,使用localstorage缓存大促期间要用的公共静态资源,减少cdn的压力。

9. 兜底容灾:接口请求错误时使用缓存数据补上,如果缓存数据没有,则隐藏该模块。

10. 支持http/2

11. 利用调试工具分析网页的cpu 和内存占用,网络请求,动画性能等指标。

12. service worker+流的结合:在网站和客户端之间放置一个service worker,service worker的作用是在获取缺失信息的同时缓存某些固定不变的数据,加速页面的渲染。

13. 所有的静态文件在上线前都内联到页面上,从而减少请求数量。这个打包工具会做处理。

14. 本地缓存:将页面中不变的静态资源,比如css,html,js文件保存在本地的localstorage里,甚至把页面上某个节点的内容保存在localstorage里,挂个空的钩子。获取钩子去加载本地存储的具体内容。

15. 合并外链请求:将外链的资源文件缓存到localstorage里,每个文件有对应的版本号,后端返回新的版本号后,与本地存储的版本号进行对比,将不一样的版本号进行合并后发送请求。

16. 模块的异步加载,不在首屏的先不加载,等到滚动或其他外部条件触发时再加载。

17. 分析统计数据:给请求加埋点,统计耗时,错误请求等。模块5秒钟内没有渲染完成加埋点等。根据统计结果针对性分析。

18. dns阶段可以做域名收敛。

19. 获取html文件阶段,可以考虑离线包。

20. 从cdn上获取js/css等静态文件的时候,可以考虑本地缓存,离线包等。

21. 开发环境与生产环境能自由切换。

22. 每个组件都包含自己需要的图片,样式,js,html模版等资源文件。加载一个组件时能将该组件所需要的所有资源加载到,实现组件的复用。

23. 组件的功能界限问题:哪些功能在组件内部封装,哪些功能由组件调用者实现。内部逻辑写在组件内部,可变内容由调用者提供。给组件传递参数的时候,可以将参数合并后整成对象传入。

24. 补充前端自动化测试:检测html是否规范,链接是否合法,静态资源的合法性,js报错,页面是否有弹出框,是否有console,页面js的内存纪录,接口的返回数据格式测试,模块是否开天窗等。

25. 快速上线的通道:只用于修改样式等简单的前端问题。

26. 页面展示阶段:懒加载,图片支持webp格式,裁剪尺寸等。

27. 使用requestAnimationFrame()将模版渲染切片。使用point-event:none,禁用滚动中页面的hover效果。

 

案例来源:

QQ空间前端工程师如何做首屏优化 (1,2,3,4点)

苏宁移动前端负责人朱海源:移动端电商类展示页面性能优化实战   (5,6,7,8,9点)

唯快不破:Web 应用的 13 个优化步骤   (10,11,12点)

[聊一聊系列]聊一聊百度移动端首页前端速度那些事儿    (13,14,15,16点)

【第620期】PC与无线齐飞,Web共Native一色——天猫首页全解密   (17,18,19,20点)

【第597期】沪江易未来:沪江网校前端架构漫谈   (21,22,23点)

聊一聊淘宝首页和它背后的一套    (24,25,26,27点)

上一篇:nslookup命令
下一篇:生成格式化的json

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。