正在加载...

iOS7沸沸扬扬的扁平化论战之外,WWDC 2013还是公布了很多让开发者小兴奋的点,其中包括多任务加强支持background fetchtransfer,近场通信的AirDropp2p,以及游戏控制器和游戏中心的加强;当然还包括了让web开发同学很兴奋JavaScriptCore了。下面henry/webryan来详细介绍下整合JavaScriptCore到原生应用的情况。

102713_1406_iOS7JavaScr1.png

1、什么是JavaScriptCore

前端开发的同学应该知道,浏览器核心模块主要是渲染引擎和JavaScript引擎两部分组成。前者用于处理页面布局,渲染及DOM结构等,后者用于JavaScript的解析、执行及DOM交互等。

JavaScriptCore是一种JavaScript引擎,主要为webkit提供脚本处理能力(其主要以safari浏览器为代表)。除此之外,市面上还有注明的JscriptIE, SpiderMonkeyfirefox)和V8chrome)。JavaScriptCore是开源webkit的一部分,它提供了强大的整合能力,有兴趣的同学可以到官网下载编译和测试(http://www.webkit.org/projects/javascript/

102713_1406_iOS7JavaScr2.png

2、为什么苹果要在native应用中(非webview)引入JavaScript

首先,脱离了浏览器外壳和繁重的UI布局和渲染的JavaScript引擎,无疑可以将JavaScript的能力更轻便地、高性能地带给原生的iOS应用,给应用开发者提供更多的想象力(无论是PC还是移动的浏览器,UIGUI部分都是最重要的性能瓶颈和优化点)。

其次,在移动开发场景中确实有众多的开发者对JavaScript有需求。在google上搜索”embed javascript engine ios”可以得到大量的实践和博文。

再次,苹果已经在mac上得到很不错的实践和反响。引入JavaScriptCore即扩大了SDK能力又讨好了开发者,何乐不为呢。

102713_1406_iOS7JavaScr3.png

3、引入JavaScriptCore到底包括了哪些能力呢?

aObjective-C –> JavaScript (即在Objective-C语言环境里执行JavaScript代码段,创建JavaScript变量及变量操作等等)

bJavaScript –> Objective-C(即在JavaScript语言环境里调用Objective-C公开给JavaScript的方法)

c、内存管理和线程封装(主要是需要注意引用和线程使用冲突)

4、代码层具体应该怎么使用呢?

a、执行JavaScript代码的方法:首先引入JavaScriptCore.h,然后通过JSContext创建JS运行环境,再通过evaluateScript来执行结果;

102713_1406_iOS7JavaScr4.png

最后要访问执行结果的话,需要注意数据类型的转换,Objective-CJS的对应关系主要如下:

Read More (阅读更多 )...

2013-9
19
发表于: Web前端 | 作者: | 目前已阅读: 7,611 次

有幸再次参加velocity,每次都会遇到很多不错的人,聊聊同行业的发展实在不错。希望明年可以在velocity上分享一些我们团队实践的干货。因为这次会议PPT都已经输出,很多图标和截图我这里就不做了,只把自己的笔记分享给大家,希望大家多多交流和实践。

 

简单通用的性能技巧

OmniTI的老外)

1、网络上主要的问题归咎于latency

2、除了TCP的握手,其他的hello包仍很多,比如超过4k的内容。JS,CSS等(这是pipeliningSPDY的节奏?)

3page speed: 新的尝试 https://github.com/linkedin/ats_pagespeed

4、首先考虑优化setsockopt() TCP_INIT_CWND controls in Linux (然后考虑广告omniTI,吐槽:每年开场打广告的习惯是改不了了)

PPThttp://velocity.oreilly.com.cn/2013/ppts/simple_universal_performance_tricks.pdf

印象笔记在中国

(肖贺)

1、因为用户的数据是独立的,所以采用用户数据分片的方式存储。一个服务器上只接入若干用户。然后用户的笔记内容可以通过扩容的方式进行存储。(这里的设计思路就很简单明了,当然在多重容灾方面照即通的方式就差远了)

2Note storage使用java系,tomcat+stripes+lucence

3、使用DRBD同步,没用HAmaster-slave(主要是因为简单)

PPThttp://velocity.oreilly.com.cn/2013/ppts/evernote_in_china.pdf

HTML5 Rocks

google doodle团队)

1animation-sprited image (png) 传统方式,图片重复较多

2canvas-based sprite animation

3、烟雾等,通过自研粒子系统进行随机生成。

4google.com/doodle 很多细节的实现是对外开放的

5、整体上是对H5CSS3布道+现场演示

Chromium resourcesscheduling

(陈智昌@google

1Chrome的工程师,主要是宣讲Chrome在网络优化、资源加载方面的一些优化细节;以及对开发者的一些建议。

2、浏览器在first paint之前等待加载head里的CSS,以防止FOUC(同时CSS后的JS会阻塞并行渲染和子资源,所以头部东西一定要简洁)

3Chrome解析器会做一些预判逻辑以提升解析速度;

4SPDY&HTTP 2.0 again 以及基本的资源加载策略HTML>CSS>JS>IMG;

PPThttp://velocity.oreilly.com.cn/2013/ppts/chromium_resource_scheduling.pdf

淘宝移动端性能优化

(曹仁@taobao

1、移动端加载时间占比

DNS

27%

Trans

23%

2App-cache存在资源更新的问题,保持manifest简洁,只缓存模版文件;其他文件通过local storage方式来缓存。(ajax+cors方式来获取文件内容,然后存储在本地)

3iOSsafari可以设置禁用localstorage,同时5.1后可以强制清除。

4google推出新的图片格式webp,可以减少30%qzone也在使用了)

5、最佳实践: 内联css基本骨架,然后js load更多内容

4、定制子应用的方式,将流程模块化处理。(h5border2px ?

5Mix:github/mixteam/

6、图片清晰度问题:

45%的手机用户,会在手机上收藏,然后在PC上成交。

Viewport : initail-scale=0.5,maximum-scale=0.5.

借住lesscss函数化,方便适应各种屏幕

字体容器布局图片放大一倍(占流量和内容)

–font-size:rem

–line-height:100%

7、心得:chrome调试,很多问题是css引起的,没有100%兼容,

PPThttp://velocity.oreilly.com.cn/2013/ppts/performance_optimizaition_of_mobile_web_page_in_taobao.pdf

前端javascript研发和维护

omniIT

(吐槽:主讲是自豪的生成自己写过1MB代码的汉子We deploy over 1 MB of Javascript,主要将了一些Common Sense的东西,但是我还是细心的写了下笔记)

1、基本的文件合并,文件位置,文件压缩(gzip

2choicesframework1 vs framework b? tech1 vs tech 2?

3、不在浏览器侧build页面,server更快;

4start with structure namespace、注释

5、使用常用设计模式,按场景需要(观察者和工厂)。 function是最基本的一个block

6init function ,在页面底部。

7session storage localstorage的区别

PPThttp://velocity.oreilly.com.cn/2013/ppts/developing_maintaining_large_JS_apps.pdf

Qzone touch实践

yunishi@tencent

1、多普勒测速–facebook 2011velocity(和浏览器新的API差别小于10%,传统方式也可以达到我们的目的)

2webp 国内已经有40-50%的浏览器的支持。

3、移动端的pipelining对开发透明,服务端配置支持(PS:重点对多请求有效,可以在CDN实现)

4manifest更新机制:时延问题。

5svn钩子来更新配置文件,以保证combo文件(其实也可以用watch工具)

6nodejs直出首屏内容(前端公用JS模版)、nodejs渲染模版的时间(10k)耗时几乎可以忽略

7、在qzhttpgzip压缩的时候,生成内容etag,性能开销很小。

8、拍照压缩上传,通过canvas将本地大尺寸图片渲染到尺寸更小的canvas,然后小图的base64字符串用来本地预览和上传。

9iOS大于2m会被抽样压缩变形。解决方案是通过判断抽样后,采用贴瓷砖的方式。 Github/stomita/ios-imagefile-megapixel

10android平台canvas.toDataURL()输出pngios输出jpg且可以调整压缩质量。 Android: jpegencoder.

11jpegmeta:判断拍照时候的旋转位

12、对特性实现,使用phonegap模式进行封装。

13android webview.loadUrl会隐藏用户输入键盘、/ iOS不能多次调用window.location=phonegap://xxx

14 mWebView.addJavascriptInterface(JAVA_OBJ,”OBJECT_NAME_IN_JS”), js调用ococ定时到js环境通过js接口getCommonds获取所需的oc函数队列。

15、对开源的态度:和聪明的人一起工作;持续跟进,追逐技术红利。和作者共鸣。

PPThttp://velocity.oreilly.com.cn/2013/ppts/web_app_performance_optimization_of_qzone_touch.pdf

携程客户端网站性能及用户行为数据采集

1Zabbixserver-side信息采集)

2Gomezpseudo client类似webpagetest

3Google analytics (real Client)

4、监控思路基本都是市面上常见的这里我就不赘述,大家看PPT

PPThttp://velocity.oreilly.com.cn/2013/ppts/performance_and_user_behavior_data_collection.pdf

Baidu 贴吧移动性能优化

(雷志兴@baidu

1、概念类:重点优化那些性能差的用户(这个henry也比较赞同)

2、模块/组件化(fis的逻辑,通过module的引入和important参数–php处理模块优先逻辑)

3、和我们的处理差不多,首页尽量减少http请求,内联等方式。

4、框架同时支持同步和异步加载模块,对开发者透明

5、减少渲染: 首屏以外滚动渲染,setTimeout分片,避免前端模版渲染(gz后差别不大),通过陀螺仪检测?

6、减少资源消耗:DOM清理,缓存数据而非DOM,拒绝iScrollCSS3d;减少CSSJS重要;内存比CPU重要

7、动态CDN 提升10-20%

8cache 命中,因为命中率低,baidu也没这么做;

PPThttp://velocity.oreilly.com.cn/2013/ppts/performance_optimization_of_tieba_in_baidu.pdf

在预处理时代的css性能

(吐槽:名字很大气。其实来介绍sassoocss的,sandy同学化来说,感觉还没michel讲的给力。。)

1Trulia project ?  http://trulia.github.io/

2Real User Measuerments

3、问题:如何判断unused css ?

4CSSbutton重复性?

5sass准则: 不要超过3

6oocss github.com

16毫秒的优化

zishunchen@tencent

这个不赘述,zishun在公司内开过课,满满的干货,没看过的同学抓紧吧。

PPThttp://velocity.oreilly.com.cn/2013/ppts/16_ms_optimization–web_front-end_performance_optimization.pdf

 

前几个月在和群联团队聊起基础建设话题的时候,引发了我对web开发工业化和工具化的重新思考。尤其是在新成员同学的加入后,对我们已经熟知的流程提出各种咨询和摸索,使我们不得不考虑尽快的将人为的经验、团队的传承尽快的落地为一种更容易上手的研发模型(工具)。况且现在工具化建设可以更便利地借助node.js的东风。

那么我们先回头看下现在的研发流程是怎么样的。

072113_0714_Web1.png
研发阶段:

为了保证架构的合理性以及培养人人都是架构师的理念,我们团队在早先做了架构评审检查项的list(见SVN),其中约有50项内容帮助大家在新项目启动的时候对API、选型、运营及流程等方面进行Review。但是在微代码、组件及基础功能的组合上,难免还是需要花一些人力去做整合利用,尤其是对新人来说很难做到资源最大化复用。这里是不是可以做一些工具化生产的事情呢?

1、架构选型自动化

通过project init的方式,将涉及到代码和外接依赖项的部分进行配置化拆分(且后期可调整)。

072113_0714_Web2.png

2API统一管理和自动化测试

在没有API统一管理平台的情况下,以下情况是经常会出现的:

  1. 新项目API文档,CGI同学从别的项目copy过来改改。发生变更时,需要人或svn watch的方式通知;
  2. 不同项目之间,类似功能的CGI通过人的方式沟通
  3. 虽然可以研发解耦,但是调试仍需要人
  4. 前端同学人为构造模拟数据

于是API统一管理和自动化工具接入的好处就显而易见了。这种模式类似于google protobuf的工作模式(如下图),联调双方约定好数据结构以后,剩下的工作就是各自研发了。而且通过固化的数据接口可以工具化产生CGI安全扫描用例、前端模拟数据和单元测试用例及结果等等很多往常需要人为参与的工作效果。当然在协议的可维护性、可复用性以及传承性也大大提高。

 

 

 

 

Read More (阅读更多 )...

前言:


无障碍化是指无论健全人还是残疾人,年轻人还是老年人都可以平等地获取互联网上的信息和服务。无障碍化网站建设不单可以增加网站的受益群体,更是一个有情怀、有担当的互联网企业的责任,也是一个互联网从业人员应该关注到的一个方面。在此我分享下我个人对无障碍化网站开发的理解。

061813_1458_1.png

无障碍化受益人群:

普通人 普通网站用户;文化背景和习惯与主流用户不同的用户;老年人或儿童等用户;无障碍化可使得用户更轻松地使用网站服务,降低使用、学习和理解的成本。
视力障碍用户 主要包括盲人、低视力、色盲、色弱等用户。针对这部分用户所做的信息无障碍化是最通用和最具有代表性的,尤其是盲人用户。因为这部分用户是必须依赖于辅助技术进行站点的信息阅读和交互。这也就要求被访问页面必须具备易读取,可交互,高效率等无障碍化要求。
听力、智力、精神、肢体障碍用户 可以通过视觉访问的用户,在依赖于系统的一些放大镜等工具进行正常访问(也需要一些色差等方面的网页支持);肢体障碍用户在交互方面和视力障碍用户面临的问题是类似的,都是需要通过辅助技术和网页进行交互支持。
061813_1458_2.png

 

辅助技术简介:

放大镜 这里包括硬件上的放大镜,安置在显示器上的;也包括一些软件上放大镜,比如操作系统的放大镜工具或者第三方软件的放大镜工具。目的是文字放大,便于用户识别和阅读。这里对网页依赖较小。
盲文点字显示器 通过将文字通过凸凹的方式转化成特殊的编码,以供盲人用户使用。但这个主要是用于阅读,交互的操作还是要使用键盘类。
读屏软件 将页面信息转换成语音播放给用户。代表性的产品包括:NVDA,争渡,永德,VoiceOver等。从互联网使用的角度来看,读屏软件的使用是最为广泛的,相对盲文电子显示器可以更快捷的获取信息。大家可以安装下NVDA体验下读屏软件。NVDA下载地址:
http://sourceforge.net/projects/nvda/files/releases/2013.1/nvda_2013.1.exe/download

从上面的辅助技术的介绍,我们不难发现无障碍化的阅读和交互很大层面上依赖于键盘和网页的交互。那么我们无障碍化网页建设很大一部分工作就是用于支持键盘操作和交互。

 061813_1458_3.png

无障碍化标准:

19972月,W3C组织成立网络无障碍推动小组(WAI),制定无障碍化规范和推动无障碍化实施。

Read More (阅读更多 )...