文章列表
莫卓颖 于 2年前发表 1319 0 0
随着 互联网的蓬勃发展,并且伴随着产品功能的越来越复杂,对于技术人员来说最大的挑战就是如何在保证业务快速发展的同时,也可保证不断复杂的业务对用户体验的影响,其中对用户来说最重要的体验指标是如何快速、稳定的访问业务网站以及产品功能,既是网站的性能。本系列文章将会从前后端性能指标定义、性能工具使用、产品业务核心性能指标、前后端性能解决方案出发对这个性能优化体系进行完整的阐述。 建议阅读人群: 前端工程师、后端工程师、产品经理 ###核心性能定义介绍: 由于涉及前后端的性能指标、定义非常多,本文将重点介绍对前后端影响比较大的指标,让大家对性能优化的核心指标有个整体的认识与了解 ####后端性能定义 * DNS时间 :用户在浏览器输入网址名称(网址)后,浏览器通过查询DNS服务器所需要的时间 * 建立连接时间 :根据TCP协议要求,请求方(浏览器等)与接受方(服务器)经过一系列协商所需要的时间 * 服务器处理时间 :接收方(服务器)处理请求所需时间 * 数据传输时间 :从请求方(浏览器等)到接收方(服务器)以及从接收方(服务器)到请求方的时间 ####前端性能定义:
2年前
性能
vienwu 于 2年前发表 4282 2 0
-------------------------------------------------------------------------------- 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
2年前
性能
yangchunwen 于 2年前发表 3372 3 0
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请求过程如下:
2年前
性能
coolriver 于 2年前发表 1914 0 0
非可变性是函数式编程的一个核心规则,对于面向对象编程也有很多用处。本文为参考sitepoint(参考链接1)中的文章后所记录的一些主要内容。 参考链接1: http://www.sitepoint.com/immutability-javascript/ [http://www.sitepoint.com/immutability-javascript/] 参考链接2: immutable-js [http://facebook.github.io/immutable-js/] 参考链接3: Immutable_object [http://en.wikipedia.org/wiki/Immutable_object] 什么是非可变性?(IMMUTABILITY) 如果用非可变性来形容一个对象,对么这个对象的特点是: 这个对象在创建之后不会被修改 。JS中很多值是非可变的,例如: var statement = "I am an immutable value"; var otherStr = statement.slice(8, 17); 在执行完以上代码后, statement
2年前
性能
杨文坚 ,首席吹牛工程师 于 2年前发表 2932 0 1
前一篇文章 [https://github.com/miniflycn/qvd/issues/1] 我们介绍了虚拟DOM的实现与原理,这篇文章我们来讲讲React的直出。 比起MVVM,React比较容易实现直出,那么React的直出是如何实现,有什么值得我们学习的呢? 为什么MVVM不能做直出? 对于MVVM,HTML片段即为配置,而直出后的HTML无法还原配置,所以问题不是MVVM能否直出,而是在于直出后的片段能否还原原来的配置。下面是一个简单的例子: <sapnHello {name}!</span 上面这段HTML配置和数据在一起,直出后会变成: <spanHello world!</span 这时候当我们失去了name的值改变的时候会导致页面渲染这个细节。当然,如果为了实现MVVM直出我们可能有另外的方法来解决,例如直出结果变成这样: <spanHello <span q-text="name"world</span!</span
2年前
性能
杨文坚 ,首席吹牛工程师 于 2年前发表 2065 4 0
作为 React 的核心技术之一 Virtual DOM ,一直披着神秘的面纱。 实际上,Virtual DOM包含: 1. Javascript DOM模型树(VTree),类似文档节点树(DOM) 2. DOM模型树转节点树方法(VTree -> DOM) 3. 两个DOM模型树的差异算法(diff(VTree, VTree) -> PatchObject) 4. 根据差异操作节点方法(patch(DOMNode, PatchObject) -> DOMNode) 接下来我们分别探讨这几个部分: VTREE VTree模型非常简单,基本结构如下: { // tag的名字 tagName: 'p', // 节点包含属性 properties: { style: { color: '#fff' } }, // 子节点 children: [], // 该节点的唯一表示,后面会讲有啥用 key: 1 }
2年前
性能
杨文坚 ,首席吹牛工程师 于 2年前发表 1820 1 0
Facebook’s challenges are applicable to any very complex websites with many developers. Or any situation where CSS is bundled into multiple files and loaded asynchronously, and often loaded lazily. ——@vjeux 将Facebook换成Tencent同样适用。 同行们是怎么解决的? * Shadow DOM Style Shadow DOM的样式是完全隔离的,这就意味着即使你在主文档中有一个针对全部 <h3> 标签的样式选择器,这个样式也不会不经你的允许便影响到 shadow DOM 的元素。 举个例子: 举个栗子 [http://7tszky.com1.z0.glb.clouddn.com/Fst7pnZpcfxtdFcqOCQw6aWM2iMZ] <body <style button { font-size: 18px;
2年前
性能
moonye 于 2年前发表 1514 1 1
##背景 当前网速越来越快,但是随着网页内容越来越丰富,其实我们打开网页的速度并未得到什么提升,相反,过多的内容会导致网页打开速度变慢。于是,出现了一些性能优化的方法。 1.合并文件,如css,js等 2.将js文件放在文档的底部 3.将服务器部署到离用户近的地方,如cdn技术 4.缓存技术 5.负载均衡 6.文档直出 等等 有这么多通用的方式能够适用于我们的产品中,每一种实现的技术难度不大,当我们都应用了这些技术,发现网站性能依然不那么乐观的时候,会考虑到一些非常规、适用于某些特定场景的优化技术 ##另一种思路 Facebook的研究科学家changhao jiang提出了一个优化方案,名字叫做bigpipe,应用了此项技术的facebook首页,访问速度提升一倍。它极大的提升了fackebook的性能。它是怎么做到的。 传统的一个打开页面的步骤 1. 浏览器发送HTTP请求 2. 服务器接收到HTTP请求,解析请求,从存储层拉取数据,拼接HTML,发回一个HTTP响应 3. 这个请求通过网络传输到浏览器
2年前
性能