ArchSummit 2014 - 全球架构师峰会前端相关的分享主题

分享 guokai 发表于 2 年前最后回复来自 qq2850071112 1 年前

去哪儿SPA分享

Notes:

去哪儿SPA的设计思路:

  • ✓ 模块化开发
  • ✓ 视图切换、URL路由
  • ✓ 模板前端渲染
  • ✓ 响应式设计 ICONFont
  • ✓ 浏览器及App内做功能扩充和体验差异
  • ✓ 开发环境及构建⼯工具

其中视图切换、URL路由中涉及到:

  • ✓ Quickling技术切换视图
  • ✓ 二次开发backbonejs的路由完成url hash对querystring参数的⽀支持
  • ✓ ⽀支持视图定位,url分享,⽀支持浏览器前进后退、⻚页⾯面刷新等

Quickling这个词诞生自facebook Web优化方案,它指的是页面的某一个块可以通过Ajax请求,包括这块使用到的静态资源,然后通过JSON方式返回给前端加载器,前端加载器先加载静态资源然后渲染块,这样得到一个可展示的页面局部,可以把它放到当前页的任何地方。

Quickling适用于网络高延迟、低带宽场景的解决方案。

Quickling核心思想在于:

  • 保证首屏及核心功能最快展现,使得展示核心功能所需要获取的数据、生成的html文档大小、资源加载量、渲染工作量最小化。
  • 提高服务端的渲染效率和并行度,保证功能不会受到慢数据模块的影响。
  • 支持page cache和用户缓存控制,可以避免大量的服务器端重复计算和客户端重复渲染。

模板渲染部分采用了Underscore:

  • ✓ 单⻚页的渲染都在前端完成,需要⼀一套简单⾼高
    效的前端模版
  • ✓ 使⽤用underscore的template,简洁、⾼高效
  • ✓ 采⽤用inline compress,将模版⽂文件编译成单 个模块化的js⽂文件
  • ✓ 模块可以和其他静态资源⼀一起做CDN部署

综上整体来看,去哪儿的SPA架构和技术选型没有太多的亮点,同航旅当前的实现方式类似,都是纯粹的SPA,前端渲染,前端做hash路由,前端构建。优点是前端能够集中精力在用户的浏览器端,能够致力于交互和体验,但缺点是瓶颈不容易突破。目前美团酒店是采用了Node作为中间件,用Juicer统一前后端模板,并通过Node进行首屏渲染,这样既可以保证用户首屏的加载速度,又可以在翻页或者异步数据交互时具有SPA的优势。

手机QQ的移动化实践之路

HTML5 Mobile Web: USED BY MILLIONS

演讲嘉宾:Dave Arel

Dave Arel 是一位主要专注于JavaScript语言的产品工程师。作为百丽公司JavaScript工程技术主管与前端负责人,他所开发的HTML5 iPad应用程序直接为成千上万企业以及数以百万计普通用户提供服务。因此,如果这款应用在使用过程中出现任何问题,他需要肩负起将其解决的职责。

Notes:

PPT中引述有ZuckerBerg的一句嘲弄HTML5的话:“The biggest mistake we made as a company was HTML5” ~Zuck。可见HTML5确实有太多不尽人意之处。

之后提到了浏览器的渲染引擎是如何工作的:

Painting和Drawing的区别:

  • Painting: The visual representation in memory.
  • Drawing: Casting the visual representation onto the screen.

Painting更多的只是在内存中完成可视化的过程,而Drawing则是将可视化的结果展现到屏幕终端上。

GraphicsContext

开启硬件加速和不开启硬件加速在运动的元素效果上差别很显著,原因在于开启硬件加速会启用GPU的运算,而不开启则只是通过CPU的运算能力。

如何开启硬件加速?

.background, #loading {
    -webkit-transform: translate3d(0, 0, 0);
}

Reasons for compositing:

  • Layer has 3D or perspective transform CSS properties <video> and <canvas> elements
    CSS animations
  • Layer uses accelerated CSS filters
  • Layer with a composited descendant has information that needs to be in the composited layer tree, such as a clip or reflection
  • Layer has a sibling with a lower z-index which has a compositing layer (in other words the layer is rendered on top of a composited layer)

翻译:什么情况下能使元素获得自己的层?

从目前来说,满足以下任意情况便会创建层:

  • 3D 或透视变换(perspective transform) CSS 属性
  • 使用加速视频解码的 <video> 元素
  • 拥有 3D (WebGL) 上下文或加速的 2D 上下文的 <canvas> 元素
  • 混合插件(如 Flash)
  • 对自己的 opacity 做 CSS 动画或使用一个动画 webkit 变换的元素
  • 拥有加速 CSS 过滤器的元素
  • 元素有一个包含复合层的后代节点(换句话说,就是一个元素拥有一个子元素,该子元素在自己的层里)
  • 元素有一个 z-index 较低且包含一个复合层的兄弟元素(换句话说就是该元素在复合层上面渲染)

Tips:

  • Keep composite layers small
  • Composite elements that are updated often (not just animated)
  • Compositing layers off screen allows you to buffer / pre-render
  • Avoid several texture uploads
  • Use Chrome/Safari (or others) to monitor compositing

Chrome 拥有两套不同的渲染路径(rendering path):硬件加速路径和旧软件路径(older software path)。在本文完成时,Windows,ChromeOS,Chrome for Android 上的所有页面用的都是硬件加速路径。在 Mac 和 Linux 上,只有那些需要复合(compositing)自身内容的页面用的是硬件加速路径。但是过不了多久,所有页面也都会使用硬件加速路径。

The Impact Of A Compact Web

暂无回复,说出你的观点吧
登录后即可参与回复