helondeng 于 2年前发表 4772 1 0
React-Native 基于目前React来开发IOS原生应用,Android版本将在年底推出。 为什么需要REACT-NATIVE 目前主流的应用大体分成三类:Native App, Web App, Hybrid App.texingfenxi [https://cloud.githubusercontent.com/assets/3880323/8510235/3706bf10-230c-11e5-8eb1-52eeb31cf6bf.png] Native App优点 * 性能好,性能好,还是性能好 缺点 * 开发成本高,无法跨平台 * 升级困难 Web App优点 * 跨平台,Write Once , Run Anywhere * 版本升级容易 缺点 * 无法系统系统级的API * 临时入口,用户留存度低 * 性能差 Hybrid AppNative App 和 Web App 折中的方案,保留了 Native App 和 Web App 的优点。但是最受吐槽的还是性能差。页面渲染效率低,在Webview中绘制界面,实现动画,资源消耗都比较大。
2年前
移动开发
json 于 2年前发表 4765 6 1
用户在浏览器的地址栏中敲入了网站的网址 ,会发生哪些事情呢? * 用户在浏览器的地址栏中敲入了网站的网址 * 浏览器查找域名的IP地址 * 找到ip地址后,浏览器给web服务器发送一个HTTP请求 * 服务器“处理”请求 * 服务器发回一个HTML响应 * 浏览器开始显示HTML 大概就是这样的过程,下面我们来仔细的分析下浏览器是如何查找到域名对应的ip地址的。 DNS域名解析过程 当用户在浏览器中输入ke.qq.com并按下回车键后: * 第1步,查找 浏览器缓存 。 浏览器会检查缓存中有没有这个域名对应的解析过的IP地址,如果缓存中有,这个解析过程就将结束。浏览器缓存域名也是有限制的,不仅浏览器缓存大小有限制,而且缓存的时间也有限制,通常情况下为几分钟到几小时不等。这个缓存时间太长和太短都不好,如果缓存时间太长,一旦域名被解析到的IP有变化,会导致被客户端缓存的域名无法解析到变化后的IP地址,以致该域名不能正常解析,这段时间内有可能会有一部分用户无法访问网站。如果时间设置太短,会导致用户每次访问网站都要重新解析一次域名。 * 第2步,查找 系统缓存 。
2年前
HTTP网络
yangchunwen 于 1年前发表 4737 7 0
相信很多人都试过这样的经历,浏览一个正常的网站时,右下突然角弹出一堆小广告,而且这些广告的内容和你浏览的网站格格不入: taobaodns [http://i12.tietuku.com/1dd0edf962adb967.jpg] 前几天还有某微博用户爆料访问github时居然也有广告: githubhijack [http://i12.tietuku.com/b1adbbdfaa71501f.jpg] 又或者,你有没有试过因为不小心输错了某个网站的网址,出来一堆不堪入目的广告内容? 我今天还特意在家里试了一把,故意输入一个乱七八糟的网址,出来的页面让我无语,各种小广告,而且连续故意输错几个网址,都是这样: wrongname [http://i12.tietuku.com/7b8d35c48dfd23cf.jpg] 上面说的几个事情,未必但很有可能就是 运营商DNS劫持 。事实上,运营商劫持几乎到了明目张胆的地步,尤其是一些N级小电信运营商。对运营商劫持的一些实际例子的危害,感兴趣可以看看这篇 文章 [http://www.75team.com/archives/350]
1年前
Web安全
coverguo 于 1年前发表 4558 3 7
前言: 什么是手Q天气 手Q天气是在手Q 6.0版本以上新增的功能,页面会展现当天的气温情况,已经五天温度折线图以及24小时温度图表等。 并且为了更好的交互效果,天气页面会根据8种不同的天气信息,展现相应的天气动画。如下雨下雪,飘云,日光闪烁等动画效果。 [http://7tszky.com1.z0.glb.clouddn.com/FlotQEJG8iBwvFjCTlw3g_FuPEqr] 在开发手Q天气的时候,学习到许多,发现有许多地方值得写一下。以下是我的总结。 -------------------------------------------------------------------------------- 一、REM整体布局 我们知道对于移动端来说,分辨率适配是个常见的问题,设计师往往给与我们的是iphone6(750px)的视觉稿。而对于天气页面来说 采用REM来整体布局 是个十分不错的选择。 REM 是什么
1年前
移动开发
结一 于 2年前发表 4550 2 2
最近在做整站方面的优化,所以借此机会把一些经验思想记录汇总成文,总览如下图: HTML整站设计 [http://7tszky.com1.z0.glb.clouddn.com/Flxv0gMtMWPGj1eP5C4dYSSnWGPO] 整体结构 整体分为header,section-main和footer三大核心,而section-feature和section-postscript则根据需要增删。最外层为全屏背景的承载,中间的inner-center为居中内容 header.header.inner-center section.section-feature.inner-center // if section.section-main.inner-center section.section-postscript.inner-center // if footer.footer.inner-center 如主体内容为多个全屏交替,则使用多个section-name布局,如首页: header.header.inner-center
2年前
CSS/重构
link ,除了分享,也是知识管理。 于 1年前发表 4393 6 1
PROTOCOL BUFFER入门教程 PROTOCOL BUFFER是个什么鬼? Protocol Buffer(下文简称protobuf)是Google提供的一种数据序列化协议,下面是我从网上找到的Google官方对protobuf的定义: Protocol Buffers 是一种轻便高效的结构化数据存储格式,可以用于结构化数据序列化,很适合做数据存储或 RPC 数据交换格式。它可用于通讯协议、数据存储等领域的语言无关、平台无关、可扩展的序列化结构数据格式。目前提供了 C++、Java、Python 三种语言的 API。 道理我们都懂,然后并没有什么卵用,看完上面这段定义,对于protobuf是什么我还是一脸懵逼~ 理都懂 [http://img.blog.csdn.net/20160325101815944] NODEJS开发者为何要跟PROTOCOL BUFFER打交道 作为JavaScript开发者,对我们最友好的数据序列化协议当然是大名鼎鼎的JSON啦!我们本能的会想protobuf是什么鬼?还我JSON! 这就要说到protobuf的历史了。
1年前
nodeJS全栈
莫卓颖 于 1年前发表 4339 3 1
背景 相信大家在做项目的过程中会经常遇到这样的一个需求,鼠标hover到某个元素的时候为这个元素添加边框,这个简单的需求仅需注意添加边框后不会对原有的位置造成布局的影响从而造成布局跳动。本文将会试图探讨完成这个简单需求的方法。 方案一 实现思路:为元素中预先设置边框,边框的颜色与元素所在父元素背景色一致,边框大小与hover时候的边框大小一致,鼠标hover过元素的时候只需要设置边框颜色便可。 兼容问题:无 实现代码: HTML结构 <ul class="parent"> <li></li><li></li></ul> CSS .parent{ width: 500px; background: #000; overflow: hidden; } .parent li{ width: 200px; background: red; border: 2px solid #000; margin-right: 2px; height: 200px; float: left; } .parent li:hover{
1年前
CSS/重构
结一 于 1年前发表 4300 3 3
首先,本文是普通入门知识篇,主要说的是断点的设置。 很多想接触响应式的同学都会有以下疑惑: * 为什么要做响应式? * 怎么入门响应式,是不是很难? * 分辨率那么多,响应式断点怎么设置? 所以本文简单说下下手响应式的一些基础,包你入门响应式,没学会的话再手把手教。 为什么要学响应式 这个问题呢就跟女神有多面一样,比喻在家是睡衣,上班是职业装,团建参加活动什么的就是休闲运动装了。网页呢,对于pc,平板,手机当然也得有不同的打扮排版才吸引用户,提升体验。 不然如中国移动手机端的表现是这样的(整个大小被等比例缩放到适应移动端的device-width),根本没法提用户体验: 中国移动移动端表现 [http://7tszky.com1.z0.glb.clouddn.com/FtN1lC_cKmEXPUkFBaU8tFEkq0Lw] 当然还有个更俗的原因就是你要全方位无死角伺候好你的各种平台的用户,让他们用得爽,然后你每个月才有白花花的银子。 响应式是什么 简单来说,响应式就是在不同的分辨率下,都要让内容以最佳的展现形式呈现给你用户,提升用户体验。如下图:
1年前
CSS/重构
吴浩 于 1年前发表 4267 1 0
一、重构的目的 1.URL简化 过长的url不利于传播,比如输入框的字数限制导致分享的url被截断或分享内容无法提交。复制url文本时,短的url也可能使鼠标少拖动一段距离。 2.规范URL http://ke.qq.com/cgi-bin/courseDetail?course_id=36413 [http://ke.qq.com/cgi-bin/courseDetail?course_id=36413] 类似这个课程详情页的url,包含大、小字母、下划线和中划线。我们希望统一下划线做单词间分隔。 3.结构化,语义化 例如: http://ke.qq.com/tupu/3/course [http://ke.qq.com/tupu/3/course]
1年前
运营
link ,除了分享,也是知识管理。 于 2年前发表 4261 0 1
街景wap官网中有在视网膜屏幕中实现1px border的需求. 首先,来看下面视觉给的输出图中的border:[http://7tszky.com1.z0.glb.clouddn.com/Fg8OjQ3yHWrQyg0IA0kXG-GMn7uf] 从上面的视觉图可以看到,border是一根非常细的线。这篇文章将说明如何使用border-image实现在视网膜屏中1px的border效果。 注:因为硬件条件的限制,设备像素比(devicePixelRatio)为1的非视网膜屏手机无法达到这样的效果 首先准备一张符合你要求的border-image: [http://7tszky.com1.z0.glb.clouddn.com/FmfBKPpD4hdPyvQFjaCHAFBco9Jp] 通常手机端的页面设计稿都是放大一倍的,如:为适应iphone retina,设计稿会设计成640*960的分辨率,图片按照2倍大小切出来,在手机端看着就不会虚化,非常清晰。 同样,在使用border-image时,将border设计为物理1px,如下: 样式设置: .border-image-1px{
2年前
CSS/重构
结一 于 9个月前发表 4249 0 2
React本身就非常关注性能,其提供的虚拟DOM搭配上Diff算法,实现对DOM操作最小粒度的改变也是非常的高效。然而其组件渲染机制,也决定了在对组件进行更新时还可以进行更细致的优化。 REACT组件渲染 react的组件渲染分为初始化渲染和更新渲染。 在初始化渲染的时候会调用根组件下的所有组件的render方法进行渲染,如下图(绿色表示已渲染,这一层是没有问题的): react 组件渲染 初始化渲染 [http://7tszky.com1.z0.glb.clouddn.com/FrGKO_9NVh9tD57aZDYKDBxEjOAF] 但是当我们要更新某个子组件的时候,如下图的绿色组件(从根组件传递下来应用在绿色组件上的数据发生改变): react 组件渲染 更新子组件 [http://7tszky.com1.z0.glb.clouddn.com/Fu_CLUzDTVEB0qJHZO86a1XzNMBx] 我们的理想状态是只调用关键路径上组件的render,如下图:
9个月前
javascript技术
coverguo 于 1年前发表 4216 5 3
在业务中,页面滚动的场景十分常见, 因此对于滚动的充分了解,可以让我们提高开发的效率! 滚动的几种场景 * 只有window窗体滚动 * 内滚动布局 * 窗体滚动+DIV内滚动 这时候,台下观众会问,什么是内滚动布局,什么是window滚动呢? 让我们来了解下哈 只有WINDOW窗体滚动 即页面只含有浏览器窗体默认的滚动条,窗体滚动条随页面内容而不断增长。 如手Q吃喝玩乐的站点首页, 在 android机 上就是使用window滚动 [http://7tszky.com1.z0.glb.clouddn.com/Fip_ikOJPGeTWIUSzzwfRLqpLAJL] 内滚动布局 什么是内滚动布局呢? 个人认为,内滚动布局就是主滚动条是在页面内部,而不是浏览器窗体上的布局。 故内滚动布局是相对传统的window窗体滚动而言的。 (具体为什么ios上和android上会使用不同的滚动方式,可以去了解下=。=) 内滚动布局什么时候会使用了? * ios 页面顶部带有fixed输入框(解决软键盘弹出导致页面错位的问题) 例如,手Q吃喝玩乐的站点首页, 在 ios机 上便是内滚动布局
1年前
javascript技术