`
yiminghe
  • 浏览: 1465629 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

体会chrome设计之UI responseness

阅读更多

感谢开放的google以及谷奥:


@youtube   @youku

 

 

 

UI responseness

0.common technique : lazy initialization
点击菜单时才加载功能,使得启动超级快


1.multi-process:

render process and browser process,防止崩溃,即使tab繁忙也要保证整体响应

2. browser process using multi-threading:


browser process 分为不同的线程,分别处理
UI(key) thread:绘制页面,键盘,鼠标交互
IO thread:进程间消息传递
file thread:硬盘资源管理

3.backing store cache in browser process

问题:
1.render process长期不用则会被操作系统交换出去
2.多次耗费时间的重绘,例如从大到小resize浏览器窗口

最近的一些 tab 缓存到 backing store cache,当访问时从缓存提取快


4.benchmark

启动速度测试
长时间后点击tab,测试backing store cache
主观测试,可怜的qa

5.how does chrome's simplicity contribute to a responsive user experience


简约而不简单
抵制option,抵制用户设置项
上下文菜单少
整合地址栏与搜索


6.future plan improvement


1.同步xhr禁止,不可能
2.ctrl-f 举例可能导致 ui不响应

browser process发送查询词给 render process,render process halt,则整个chrome不响应了


7.what motivates you to work on UI responsiveness


对用户有用的设计
用户每天都要用web做重要的事,省时很重要!

 

 

附录:


Introduction to chrome and chrome-extension

 

 

 

 

0
1
分享到:
评论

相关推荐

    chrome的UI库

    5. **UI库的应用**:除了用于开发浏览器,Chrome的UI库还可以应用于各种软件和应用的界面设计。例如,它可以用于桌面应用程序、移动应用甚至游戏,以提供现代、高效的用户交互体验。开发者可以通过复用和修改库中的...

    Google Chrome DirectUI Demo

    在这个主题中,我们将深入探讨谷歌Chrome浏览器如何利用DirectUI技术实现其高效的UI界面,以及这一技术与FireMonkey的相似之处。 首先,DirectUI是微软DirectX框架的一部分,它为开发者提供了一种脱离Windows控件...

    UiPath安装Chrome插件.docx

    ### UiPath安装Chrome插件详解 #### 一、前言 在进行自动化任务处理时,UiPath作为一种强大的机器人流程自动化(RPA)工具,能够帮助我们实现一系列复杂的业务流程自动化。尤其是在处理与网页相关的任务时,UiPath...

    Chrome UI 框架分析

    主要是对chrome UI的源代码进行分析和相关讲解

    Chrome UI 分析

    Chrome UI(用户界面)分析涉及多个层面,包括框架结构、排版绘制机制、消息分发、以及各种UI组件的设计与实现。以下是对Chrome UI分析中的知识点的详细阐述。 首先,Chrome UI框架的总体结构涉及通用代码的存放,...

    chrome ui 框架学习笔记

    - **消息循环**:消息循环是Windows操作系统的核心机制之一,Chrome UI框架利用这一机制捕获并处理各种类型的输入事件。 - **消息过滤**:通过设置特定的过滤条件,框架能够识别出哪些消息应该被传递给特定的控件,...

    winform构建好看的ui,使用web元素,渲染速度快,不用引入chrome,体积小

    本文将深入探讨如何在WinForm应用中利用Web元素来构建好看的UI,同时保持快速的渲染速度,并避免引入大型依赖,如Chrome浏览器组件,以减小程序体积。 首先,我们可以利用.NET Framework或.NET Core提供的...

    UI笔记(UI设计师自学成才)

    消息机制是 Chrome UI 中的核心组成部分之一,它负责管理用户输入和其他系统事件的处理。 - **消息处理流程**:在 Windows 系统中,每个控件都是独立处理消息的。而在 Chrome UI 架构中,整个窗口可以被视为一个...

    CoreUI设计后台管理界面模板

    1. **Bootstrap基础**:CoreUI构建于Bootstrap之上,这意味着它利用了Bootstrap的网格系统、CSS样式、JavaScript插件和响应式设计。Bootstrap是目前最广泛使用的前端框架之一,提供了丰富的组件和工具,使得开发者...

    swagger-ui(Chrome插件)

    8. **协作**:Swagger UI的交互式特性使得团队成员可以更方便地理解和讨论API的设计,促进跨职能团队的协作。 9. **文档共享**:通过将Swagger UI部署到Web服务器,可以将API文档公开给外部合作伙伴或者最终用户,...

    web流程设计器(jsplumb+jqueryUI)拖拽功能

    在本文中,我们将深入探讨如何使用jsPlumb和jQuery UI库构建一个基于Web的流程设计器,该设计器具有拖拽功能,并适用于多种主流浏览器。这个工具对于业务流程建模、工作流设计以及任何需要图形化表示流程的应用场景...

    uistack一个Chrome扩展程序可让您查看网站使用的框架和库

    这个Chrome扩展程序,即ui-stack,使得用户能够快速、便捷地洞察网站背后的JavaScript MVC框架和UI库,从而为学习、调试或优化前端代码提供了便利。 JavaScript是现代Web开发的核心语言,而MVC(Model-View-...

    jquery 界面设计的插件LigerUI

    jQuery LigerUI 是一款强大的前端界面设计插件,专为提升网页交互体验和视觉效果而设计。它基于jQuery库,提供了丰富的UI组件,如表格、表单、对话框、菜单、按钮、日期选择器等,帮助开发者快速构建出美观且功能...

    从Chrome开源代码中提炼的界面引擎

    【Chrome开源代码中的界面引擎】,也被称为DirectUI或Chrome Skin,是Google Chrome浏览器的核心组件之一,用于构建高效、响应迅速且用户友好的图形用户界面。这个框架深受开发者喜爱,因为它提供了高度定制化的能力...

    一款简约风格开源新UI主页设计毛玻璃拟态UI – 个人主页(开源版).zip

    这款开源的个人主页设计采用了毛玻璃(Blurry)和拟态UI(Material Design)的结合,为用户提供了独特的视觉体验。毛玻璃效果,也被称为模糊效果或者亚克力效果,在界面上通过半透明的模糊背景,营造出深度感和立体...

    UI.Vision-RPA-浏览器自动化工具(v8.2.7) (Taskt,UI.Vision,OpenRPA和TagUI)

    UI.Vision chrome插件:UI.Vision-RPA-浏览器自动化工具(v8.2.7) chrome插件地址在无法正常下载,提供该资源方便大家下载使用。 UI Vision RPA软件是可视化过程自动化、无代码UI测试自动化、网页抓取和屏幕抓取的...

    ChromeUI未改变之前版本,官方离线无升级版

    ChromeUI未改变之前版本,官方离线无升级版,现在能找到UI未改变之前最新的版本了,官方之前离线无升级版的链接都失效了,特留备份

    Chrome浏览器插件axure-chrome-extension

    Chrome浏览器插件Axure Chrome Extension是一款专为Axure RP设计的工具,旨在增强Axure原型在Chrome浏览器中的体验。Axure RP是一款广泛使用的交互原型设计软件,它允许设计师快速创建 wireframes、prototypes 和 ...

    Axuer MAC 谷歌浏览器插件 Axure RP Extension for Chrome for Mac

    Axure RP是一款强大的原型设计工具,广泛用于IT行业,尤其是产品经理、交互设计师和UI设计师们。这款工具允许用户快速创建交互式线框图、原型和规格文档,以便于团队沟通和用户测试。在Mac操作系统中,Axure RP的...

Global site tag (gtag.js) - Google Analytics