话题
文章列表
caorich 性能
做hybrid页面,需要测试其性能。我们不能认为用浏览器打开该网页得到的数据就算它线上的性能,因为webview的环境,其性能和浏览器还是有所差距的。最近一直做相关工作,积累的一些小经验,这里分享出来。 打点 统计线上hybrid页面的性能,本质上还是打点上报。打的点一般参考 performance.timing 属性。一般页面最开始给一个初始绝对时间点作为参考,其余的点减去这个初始时间就是页面渲染的相对时间了。 如果没有客户端给初始时间点,可以用 performance.timing.fetchStart 作为初始时间点。我这里根据上报情况看,fetchStart和客户端给的绝对初始时间差距并不大。另外,如果页面有重定向, performance.timing.redirectStart 参数就不为0,将这个参数值作为初始时间应该更加合理。 html文档的加载时间: performance.timing.domLoading - performance.timing.fetchStart ...显示全部
4 个月前发表 197次浏览 0条评论 0次收藏
caorich 性能
DATA.JSON 文件格式 以下的内容当设计接口的详细说明时,请移步 bodymovin的官方文档 [https://github.com/bodymovin/bodymovin/tree/master/docs/json] 。文档的是用 JSON Schema [http://json-schema.org/] 编写的,这玩意儿就是一个词汇表,相当于本体的json实现,规范了对象、属性的表达方式(而已)。 言归正传。了解AE导出的data.json数据格式的最好方法就是先制作一个简单得不能再简单的关键帧动画,看看它导出的data.json是什么样的。 我们用AE制作了一个简单的动画,一个宽100,高200的长方形,在400*400的正方形白色底的画布上,从位置(100,200)移动到(300,200)。动画的时间长度为1s, fpr为30(一秒30帧)。现在我们导出data.json文件来看看 { ...显示全部
8 个月前发表 624次浏览 1条评论 0次收藏
caorich 性能
BODYMOVIN是什么 专业制作动画采用Adobe公司的 after effect 软件。做出来的动画可以导出为json文件,bodymovin就是这个动画json文件的前端播放器,支持渲染为svg\canvas\html三种格式。它不仅可以播放动画,可以完全控制动画的播放、暂停、速率、播放对应帧等等。更可以做到更改帧对象的位置。可以说是不可多得的好工具。 [http://i1.piimg.com/567571/c73e953311b7464c.png] 使用方法 bodymovin官网 [https://github.com/bodymovin/bodymovin] 首先机子要装AE(adobe after effect),如果没装,就需要找设计师要动画的json文件。 这里假设已经获取到动画导出的json文件了。我扒了codepen的例子到我的站点,大家可以用 这个json文件 [http://makto.win/bodymovin/bodymovin/data1.json] 来测试: 动画基本播放 以下所有代码默认都已经导入了 bodymovin.min.js ...显示全部
9 个月前发表 1441次浏览 0条评论 0次收藏
莫卓颖 性能
随着 互联网的蓬勃发展,并且伴随着产品功能的越来越复杂,对于技术人员来说最大的挑战就是如何在保证业务快速发展的同时,也可保证不断复杂的业务对用户体验的影响,其中对用户来说最重要的体验指标是如何快速、稳定的访问业务网站以及产品功能,既是网站的性能。本系列文章将会从前后端性能指标定义、性能工具使用、产品业务核心性能指标、前后端性能解决方案出发对这个性能优化体系进行完整的阐述。 建议阅读人群: 前端工程师、后端工程师、产品经理 ###核心性能定义介绍: 由于涉及前后端的性能指标、定义非常多,本文将重点介绍对前后端影响比较大的指标,让大家对性能优化的核心指标有个整体的认识与了解 ####后端性能定义 * DNS时间 :用户在浏览器输入网址名称(网址)后,浏览器通过查询DNS服务器所需要的时间 * 建立连接时间 :根据TCP协议要求,请求方(浏览器等)与接受方(服务器)经过一系列协商所需要的时间 * 服务器处理时间 :接收方(服务器)处理请求所需时间 * 数据传输时间 :从请求方(浏览器等)到接收方(服务器)以及从接收方(服务器)到请求方的时间 ####前端性能定义: ...显示全部
3 年前发表 1460次浏览 0条评论 0次收藏
vienwu 性能
-------------------------------------------------------------------------------- react是facebook推出一个用来构建用户界面的js库。官方介绍的三大特性如下: JUST THE UI 把react只当作一个ui组件就好,等同于传统mvc中的view。 VIRTUAL DOM react在编程模型和传统dom之间添加了一层,称之为虚拟dom。好处非常多,性能更好,可以在node环境下完成渲染(解决seo问题),可以更好的用于开发native apps。 DATA FLOW 反应式的单向数据绑定,比传统数据绑定更简单,简单的使用js事件触发改变组件状态也可以实现双向绑定的效果。 什么是ANGULARJS angularjs是google推出的一个前端js框架,面世已有几年时间,非常成熟,目前已经有非常多的第三方模块,基本上可以解决前端工程领域的各方面的问题。网上的资料也非常多,这里就不做过多介绍。 REACTJS和ANGULARJS ...显示全部
3 年前发表 4035次浏览 2条评论 0次收藏
yangchunwen 性能
HTTP协议是前端性能乃至安全中一个非常重要的话题,最近在看《web性能权威指南(High Performance Browser Networking)》,把其中关于HTTP部分的内容拿出来分享一下,加了一点自己的想法,当然没有《HTTP权威指南》讲得详细,但对于理解我们平常做的事情很有启发。预计会有两三篇文章,重点分别会涉及到HTTP 1.1、HTTPS、HTTP 2.0等内容,本篇主要涉及HTTP 1.1及其应用。 HTTP的历史 HTTP 0.9 HTTP的第一个版本被官方称为HTTP0.9,这是个只有一行的协议,例如: GET /about/ (超文本响应……) (连接关闭……) HTTP 0.9有几个要点: * 客户端/服务器、请求/响应协议 * ASCII 协议,运行于TCP/IP链接之上 * 设计用来传输 超文本 文档(HTML) * 服务器与客户端之间的连接在每次请求之后都会 关闭 这个版本的HTTP主要用来传输 文本 ,并且没有共用TCP连接。 HTTP 1.0 一个典型的HTTP 1.0请求过程如下: ...显示全部
3 年前发表 2877次浏览 3条评论 0次收藏