DOCSLIB.ORG

User Experience on Mobile Device Dantong Dong, Yunfan Hua Overview

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
User Experience on Mobile Device Dantong Dong, Yunfan Hua Overview User Experience on Mobile Device Dantong Dong, Yunfan Hua Overview Proxy Optimization Motivation 01 04 NutShell: Scalable Whittled Proxy Execution Special Topic: Autonomous Key Challenges 02 05 Driving Caching and Rendering Edge Computing Optimization Optimization Google’s AMP approach: 03 06 Low latency offloading to achieve caching and pre-rendering high accuracy Mobile Devices V.S. Personal Phone Autonomous Vehicle & Fast Rendering Virtual Reality Good Responsiveness Mission Critical Compromisable High Accuracy Fast Tracking 1. Motivation - “Mobile First” - More websites have been loaded on smartphones and mobile devices than on desktop computers - Users spend up to three times more hours browsing on smartphones than on other devices - Each 2 second delay in page loading result in 4.3% of revenue loss 02. Key Challenges - Most webpage are developed targeting laptop as its native computing framework - As a result Webpage loading in personal mobile device is very slow 03. Caching and Rendering Optimization: Google’s AMP 03. Caching and Rendering Optimization: Google’s AMP becomes 03. Caching and Rendering Optimization: Google’s AMP Simplifies HTML Tag Lazy Caching/Loading Pre-rendering AMP simplify the original AMP adopts lazy loading of Some of the result in HTML content by replacing certain object and leverage Google search(hot words/ it with its own HTML tag for Google AMP’s CDN for news) will be pre-rendered faster processing caching and ready to view 03. Caching and Rendering Optimization: Google’s AMP Key Optimization Happen between Red line and Green line, naming HTML Tag simplification 03. Caching and Rendering Optimization: Google’s AMP User: App Independent Dev: No extra effort Does not depend on any Developer can develop web application or infrastructure page normally and all the on user side. “click and see” optimization is on Google. approach No extra effort involved Caching: Good Idea, Bad Approach AMP page is not persistent. After a time, the cached page is not viewable and have to redirect to original URL 03. Caching and Rendering Optimization: Other Products Facebook’s Instant Article Amazon Silk Opera Mini Speed up article load speed Specialized Web browser to Similar to Amazon Silk, it’s by leverage Facebook’s speed up web page loading a specialized mobile mobile app format and on mobile phone. Only browser but OS infrastructure works on Amazon products independent. All of Them Are App Dependent Extra Development Effort OS Dependent 04. Proxy Optimization: What Is Proxy in The Context of Mobile App? A standard web page consists of HTML, CSS, JavaScript. Proxies executes Web page JavaScript (JS) and push objects needed by the client - Proxies needs to be scalable, need to execute JS for many concurrent users - Proxy optimization can make the web page more responsive with less latency 04. Proxy Optimization: Nutshell NutShell: Scalable Whittled Proxy Execution for Low-Latency Web over Cellular Networks. NutShell can sustain 27% more user requests per second than a traditional proxy execution Whittled Proxy Execution a technique to identify and execute in the proxy only the JS code necessary to identify and push the objects required for the client page load, while skipping other code. 04. Proxy Optimization: Nutshell - JS Execution 04. Proxy Optimization: Nutshell - Outcome 04. Proxy Optimization: Nutshell - Novelty Different From Caching And Rendering Optimization Cellular Network focused Deployed Learning Technique JS execution Optimization Proxy optimization relies on Utilized Learning instead of vs. HTML/CSS component Cellular Network, and need traditional method to Loading Optimization to consider scalability identify JS code 05. Special Topic: Autonomous Driving 05. Special Topic: Autonomous Driving - Some mobile device, such as autonomous driving device and augmented reality(AR) device, requires low latency loading on mobile device to achieve high detection accuracy - Without optimization, executing large networks on such mobile devices is difficult - Mission critical devices, requires low end-to-end latency 06. Edge Computing Optimization Traditional Computation: Offloading and rendering happens sequentially 06. Edge Computing Optimization Edge Assisted Real-time Object Detection for Mobile Augmented Reality Uses fast object tracking method to maintain detection accuracy Low Latency Offloading Decouples the rendering pipeline from the offloading pipeline 06. Edge Computing Optimization Reference ● Edge Assisted Real-time Object Detection for Mobile Augmented Reality, Mobicom 2019 ● AMP up your Mobile Web Experience: Characterizing the Impact of Google's Accelerated Mobile Project, Mobicom 2019 ● NutShell: Scalable Whittled Proxy Execution for Low- Latency Web over Cellular Networks, Mobicom 2017 CREDITS This is where you give credit to the ones who are part of this project. ● Presentation template by Slidesgo ● Icons by Flaticon ● Infographics by Freepik ● Images created by Freepik ● Author introduction slide photo created by Freepik ● Text & Image slide photo created by Freepik Q&A.
Load more

Recommended publications
  • Amazon Silk Developer Guide Amazon Silk Developer Guide
    Amazon Silk Developer Guide Amazon Silk Developer Guide Amazon Silk: Developer Guide Copyright © 2015 Amazon Web Services, Inc. and/or its affiliates. All rights reserved. The following are trademarks of Amazon Web Services, Inc.: Amazon, Amazon Web Services Design, AWS, Amazon CloudFront, AWS CloudTrail, AWS CodeDeploy, Amazon Cognito, Amazon DevPay, DynamoDB, ElastiCache, Amazon EC2, Amazon Elastic Compute Cloud, Amazon Glacier, Amazon Kinesis, Kindle, Kindle Fire, AWS Marketplace Design, Mechanical Turk, Amazon Redshift, Amazon Route 53, Amazon S3, Amazon VPC, and Amazon WorkDocs. In addition, Amazon.com graphics, logos, page headers, button icons, scripts, and service names are trademarks, or trade dress of Amazon in the U.S. and/or other countries. Amazon©s trademarks and trade dress may not be used in connection with any product or service that is not Amazon©s, in any manner that is likely to cause confusion among customers, or in any manner that disparages or discredits Amazon. All other trademarks not owned by Amazon are the property of their respective owners, who may or may not be affiliated with, connected to, or sponsored by Amazon. AWS documentation posted on the Alpha server is for internal testing and review purposes only. It is not intended for external customers. Amazon Silk Developer Guide Table of Contents What Is Amazon Silk? .................................................................................................................... 1 Split Browser Architecture ......................................................................................................
    [Show full text]
  • Exploiting Split Browsers for Efficiently Protecting User Data
    Exploiting Split Browsers for Efficiently Protecting User Data Angeliki Zavou, Elias Athanasopoulos, Georgios Portokalidis, and Angelos D. Keromytis Columbia University, New York, NY, USA {azavou,elathan,porto,angelos}@cs.columbia.edu ABSTRACT as the services offered to them. Web browsers have become Offloading complex tasks to a resource-abundant environ- the preferred “portal” to access these services, since they ment like the cloud, can extend the capabilities of resource allow developers to create a uniform interface that is acces- constrained mobile devices, extend battery life, and improve sible from different platforms (PCs, smartphones, tablets, user experience. Split browsing is a new paradigm that etc.), and requires minimal (if any) changes to support new adopts this strategy to improve web browsing on devices like platforms. For the same reason, many mobile applications smartphones and tablets. Split browsers offload computa- (e.g., the NY Times and Facebook apps) simply encapsulate tion to the cloud by design; they are composed by two parts, browsers, acting in essence, as site-specific browsers [24]. Their key role and popularity, their size, and in the case one running on the thin client and one in the cloud. Render- 1 ing takes place primarily in the latter, while a bitmap or a of mobile devices, a growing monoculture, are probably the simplified web page is communicated to the client. Despite main reasons browsers are frequently targeted by attack- its difference with traditional web browsing, split browsing ers [5, 11, 17]. In the past, they have suffered severe attacks still suffers from the same types of threats, such as cross-site that exploit vulnerabilities like buffer overflows [17], which scripting.
    [Show full text]
  • Mobile Browsers Free Download Top 7 Best Browsers for Windows Phone
    mobile browsers free download Top 7 Best Browsers for Windows Phone. Windows Phone ships with Internet Explorer or IE as the default web browser on it, and over a period of time, Microsoft has done a pretty good job with the features on IE, continuously improving it. But, there is still room for improvement as many features are missing on the widely used browser of all time. This is where the third party web browsers come into the picture. There are lots of free and paid web browsers available in the Windows Phone store, and today we will be taking a look at the 7 such best browsers for Windows Phone that you can use as an alternative to Internet Explorer. 1. UC Browser 2. Maxthon Browser 3. Opera Mini Beta 4. Nokia Xpress 5. SurfCube 3D Browser 6. Surfy 7. Aerize Explorer. 1. UC Browser. UC Browser is one of the most best browser for Windows Phone, and one very good thing about the team behind it is that they release quite a lot of regular updates for the browser. It comes with a lot of useful features such as speed dial, Wi-Fi downloading, option to save to SD card, Bluetooth file sharing and more; all this packaged in a good interface makes it even more attractive. You are also allowed to change the browser skin using the options available in the UC Theme Center, and these can also be used as lock screen wallpapers. App size & price : 2.34 MB - 10.18 MB and Free. 2. Maxthon Browser.
    [Show full text]
  • Kindle Devices
    Instructions for using Libby on Kindle devices Libby is a collection of ebooks, How to setup Libby: audiobooks and magazines. You can 1) Open the Silk web browser on your have 10 items checked out and 10 Kindle and go to www.libbyapp.com items on hold at one time. 2) When you open the Libby website for the first time, it will ask you if you have a library card. Select “Yes”. Loan periods (you can choose the 3) If you have already installed Libby on length of the loan at checkout): another device, select “Copy from my Ebook – 7, 14 or 21 days other device” and then follow the Audiobook—7, 14 or 21 days instructions. Otherwise, select “I’ll Search for a Library” and then type in Magazines—7, 14 or 21 days Plainfield. From the search results, select eIndiana Digital Consortium Plainfield-Guilford Township Public The Libby app can be installed on: Library. Android mobile devices 4) When it asks you where you use your Apple mobile devices library card, select Plainfield-Guilford Township Public Library. It will then ask Windows 10 computers you to enter your library card number. Type in the number that’s on the back of If you can’t install the Libby app on your Plainfield library card, then select your device, you can access Libby “Sign In”. through your device’s web browser (go 5) After you are signed in, you will see the to www.libbyapp.com). Compatible details for your Linked Card. You will web browsers include: have the option to rename this card.
    [Show full text]
  • Download Kindle Browser for Windows 10 the Best Web Browser for Amazon Fire TV Stick: Firefox Vs
    download kindle browser for windows 10 The Best Web Browser for Amazon Fire TV Stick: Firefox vs. Silk. You probably already know that you can browse the web with Amazon Fire TV and Amazon Fire TV Stick. But what's the best browser to use? The Amazon Fire TV and Fire TV Stick is about more just watching Netflix and streaming Spotify. The devices are also an excellent way to browse the web on your TV. Two browsers are available in the Amazon Appstore: Firefox and Silk. Both are optimized for the operating system, and both give you the full internet experience. Silk is Amazon's in-house browser. As Fire TV owners will already know, you also need to use a browser if you want to access YouTube. Google no longer makes its video service available on the Fire TV platform. But what is the best browser for the Amazon Fire TV and Amazon Fire TV Stick? And are there any sideloaded apps that can rival Firefox and Silk for the crown? Keep reading to see our comparison and conclusion. For Watching YouTube. In late 2017, Google and Amazon had a spat. The details aren't important, but in the fallout, Google axed its YouTube app for Fire TV. Rather than pandering to its competitor, Amazon rolled out a near-instantaneous update for its devices that introduced web browser capabilities. At the same time, Firefox and Silk became available in the Appstore. Today, if you click on the YouTube app on your Fire Stick, you'll be taken to the YouTube homepage in one of the two browsers.
    [Show full text]
  • Speeding up Web Page Loads with Shandian
    Speeding up Web Page Loads with Shandian Xiao Sophia Wang and Arvind Krishnamurthy, University of Washington; David Wetherall, University of Washington and Google https://www.usenix.org/conference/nsdi16/technical-sessions/presentation/wang This paper is included in the Proceedings of the 13th USENIX Symposium on Networked Systems Design and Implementation (NSDI ’16). March 16–18, 2016 • Santa Clara, CA, USA ISBN 978-1-931971-29-4 Open access to the Proceedings of the 13th USENIX Symposium on Networked Systems Design and Implementation (NSDI ’16) is sponsored by USENIX. Speeding up Web Page Loads with Shandian Xiao Sophia Wang∗, Arvind Krishnamurthy∗, and David Wetherall∗† Abstract pages use JavaScript libraries such as jQuery [21] or in- Web page loads are slow due to intrinsic inefficiencies clude large customized JavaScript code in order to sup- in the page load process. Our study shows that the in- port a high degree of user interactivity. The result is that a efficiencies are attributable not only to the contents and large portion of the code conveyed to a browser is never structure of the Web pages (e.g., three-fourths of the CSS used on a page or is only used when a user triggers an resources are not used during the initial page load) but action. The second inefficiency stems from how the dif- also the way that pages are loaded (e.g., 15% of page load ferent stages of the page load process are scheduled to times are spent waiting for parsing-blocking resources to ensure semantic correctness in the presence of concur- be loaded).
    [Show full text]
  • Accelerating the Mobile Web with Selective Offloading
    Accelerating the Mobile Web with Selective Offloading Xiao Sophia Wang Haichen Shen David Wetherall University of Washington University of Washington University of Washington Seattle, Washington, USA Seattle, Washington, USA Seattle, Washington, USA [email protected] [email protected] [email protected] ABSTRACT making it less attractive on mobile. Our preliminary tests Mobile Web page loads are notoriously slow due to limited on the top ten mobile pages suggest that mobile page load computing power and slow network access. Our preliminary times are 1.5x (3x) of desktop counterparts in initial (re- experiments show that computation is a significant fraction peated) loads. of page load time on mobile devices. Also, energy arguments Our previous research in desktop settings that quantifies suggest that it will stay this way. To compensate the limited the composition of page load time suggests that computa- computing power, our position is that offloading portions of tion is significant [15]. We extensively loaded the top 200 the page load process to the cloud can significantly improve Alexa [1] Web pages and found that computation comprises mobile page load time. We propose a measurement-based 35% of page load latencies on the critical path (the longest framework that allows to offload portions of mobile page bottleneck path) even on an iMac with a 3GHz quad core load process to the cloud. Unlike browsers that offload fixed CPU and a 8GB memory. This fraction is as much as 40% parts of page loads such as Opera Mini, our framework will on a machine with 2GHz CPU and a 4GB memory.
    [Show full text]
  • 455,363 330,819 767,540 1.69 00:01:47
    Go to this report EERE Corporate ­ http://www.eere.energy.gov Topic Landing Pages Audience Overview Oct 1, 2011 ­ Sep 21, 2013 % of visits: 100.00% Overview Visits 1,400 700 January 2012 April 2012 July 2012 October 2012 January 2013 April 2013 July 2013 330,819 people visited this site New Visitor Returning Visitor Visits Unique Visitors Pageviews 455,363 330,819 767,540 27.5% Pages / Visit Avg. Visit Duration Bounce Rate 1.69 00:01:47 66.66% 72.5% % New Visits 72.42% Language Visits % Visits 1. en­us 391,320 85.94% 2. zh­cn 6,437 1.41% 3. es 6,060 1.33% 4. en­gb 5,710 1.25% 5. en 5,072 1.11% 6. fr 3,365 0.74% 7. ko 3,363 0.74% 8. zh­tw 2,967 0.65% 9. ja 2,696 0.59% 10. es­es 2,383 0.52% view full report © 2013 Google Go to this report EERE Corporate ­ http://www.eere.energy.gov Topic Landing Pages New vs Returning Oct 1, 2011 ­ Sep 21, 2013 % of visits: 100.00% Explorer Site Usage Visits 1,400 700 January 2012 April 2012 July 2012 October 2012 January 2013 April 2013 July 2013 Visitor Type Visits Pages / Visit Avg. Visit Duration Bounce Rate 455,363 1.69 00:01:47 66.66% % of Total: 100.00% (455,363) Site Avg: 1.69 (0.00%) Site Avg: 00:01:47 (0.00%) Site Avg: 66.66% (0.00%) 1. New Visitor 330,218 1.66 00:01:36 66.43% 2.
    [Show full text]
  • Giant List of Mobile Browsers
    Giant List of Mobile Browsers We are quickly moving towards a mobile world, with people increasingly accessing the internet exclusively on their devices. As mobile surfing is still relatively new compared to desktop, their browser wars are just beginning. Soon the blockchain will get involved & that will open up the field even further. Pick your pony now. 1. 360 Security http://www.360securityapps.com 2. ABC Browser Pro https://play.google.com/store/apps/details?id=com.fchatnet.minibrowser 3. Aloha https://alohabrowser.com 4. Amazon Silk https://www.amazon.com/Amazon-com-Amazon-Silk-Web-Browser/dp/B01M35MQV4 5. APUS Browser https://play.google.com/store/apps/details?id=com.apusapps.browser 6. Baidu Mobile https://mobile.baidu.com 7. Best Browser https://play.google.com/store/apps/details?id=org.zbrowser.ui.activities 8. BlackBerry Access https://www.blackberry.com/us/en/products/apps/blackberry-dynamics-apps/blackberry-access/overview 9. Blazer https://play.google.com/store/apps/details?id=com.mdjsoftware.download 10. Bolt http://www.boltbrowser.com 11. Brave https://brave.com/download 12. Browser for Android https://play.google.com/store/apps/details?id=org.easyweb.browser 13. Cake https://cakebrowser.com 14. Cameleon Privacy AdBlock & Float Browser https://play.google.com/store/apps/details?id=work.ionut.browser 15. Chrome https://play.google.com/store/apps/details?id=com.android.chrome 16. Cliqz https://cliqz.com/en/mobile 17. CM Browser https://www.cmcm.com/en-us/cm-browser 18. Cosmic https://play.google.com/store/apps/details?id=com.cosmic.webbrowser 19. Cosmic Privacy https://play.google.com/store/apps/details?id=com.cosmic.privacybrowser 20.
    [Show full text]
  • Download Google Chrome Android Tablet Download Google Chrome Android Tablet
    download google chrome android tablet Download google chrome android tablet. Completing the CAPTCHA proves you are a human and gives you temporary access to the web property. What can I do to prevent this in the future? If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware. If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices. Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store. Cloudflare Ray ID: 67a1f92178c584bc • Your IP : 188.246.226.140 • Performance & security by Cloudflare. Google Chrome. Todos ficaram surpreendidos quando a Google anunciou o lançamento do seu próprio web browser. Ele oferecia facilidade, velocidade e grandes níveis de usabilidade. Isso é exatamente o que encontramos nesta versão do famoso browser para dispositivos Android. A aplicação oferece todos os elementos que estamos acostumados na versão do nosso computador, tais como abas e favoritos. Além disso ela também oferece uma nova forma de administrar as abas, deslizando o dedo para alternar entre uma e outra. A versão Chrome para Android é provavelmente o browser mais poderoso que podemos encontrar no mercado, apresentando carregamentos de página em alta velocidade, navegação anônima, busca e navegação a partir da Omnibox e até mesmo sincronização de abas e favoritos entre o computador e o browser do celular.
    [Show full text]
  • Abusing Cloud-Based Browsers for Fun and Profit
    Abusing Cloud-based Browsers for Fun and Profit Vasant Tendulkar Joe Pletcher Ashwin Shashidharan NC State University University of Oregon NC State University [email protected] [email protected] [email protected] Ryan Snyder Kevin Butler William Enck University of Oregon University of Oregon NC State University [email protected] [email protected] [email protected] ABSTRACT tures have deployed infrastructures for rendering Web pages Cloud services have become a cheap and popular means of in the cloud (e.g., Amazon Silk [5], Opera Mini [24], and Puf- computing. They allow users to synchronize data between fin [12]). The obvious benefit to this architecture is relieving devices and relieve low-powered devices from heavy com- the mobile device from the graphical rendering. However, putations. In response to the surge of smartphones and this is less of a concern for newer, more powerful smart- mobile devices, several cloud-based Web browsers have be- phones. Such devices benefit more from the cloud server come commercially available. These \cloud browsers" as- downloading the many parts of a Web page using high- semble and render Web pages within the cloud, executing bandwidth links and only using the higher-latency, last-mile JavaScript code for the mobile client. This paper explores wireless network once. Proxy-based Web page rendering has how the computational abilities of cloud browsers may be ex- existed in literature for more than a decade [17, 16, 20, 8, 9] ploited through a Browser MapReduce (BMR) architecture and is of continued interest [10, 31]; however, it was not until for executing large, parallel tasks.
    [Show full text]
  • Arhitectura Navigatorului
    Full-Stack Web Development busaco ~ / profs.info.uaic.ro github.com/alrra/browser-logos arhitectura unui browser Web Dr. Sabin Sabin Buraga Dr. Dr. Sabin Corneliu Buraga – profs.info.uaic.ro/~busaco/ do nothing, say nothing, be nothing. be say nothing, nothing, do “ Elbert Hubbard To avoid criticism To avoid ” Dr. Sabin Buragaprofs.info.uaic.ro/~busaco mediu de execuție (sistem de operare, aplicație nativă,…) busaco ~ / browser Web funcționalități de bază profs.info.uaic.ro procesare conținut, redare,… interpretor acces la JavaScript platformă Dr. Sabin Sabin Buraga Dr. rețea, grafică, fonturi, widget-uri native,… busaco ~ / Un client (i.e. browser Web) se identifică via valoarea câmpului-antet User-Agent dintr-o cerere HTTP profs.info.uaic.ro Dr. Sabin Sabin Buraga Dr. www.useragentstring.com busaco ~ 1993 – primul browser Web: Mosaic – Mosaic/0.9 / 1994 – primul browser comercial: Netscape Navigator include primul interpretor JavaScript și oferă o interfață de programare (BOM – Browser Object Model) profs.info.uaic.ro Mozilla/Versiune [Limbă] (Platformă; Criptare) Mozilla/2.02 [fr] (WinNT; I) Mozilla/Versiune (Platformă; Criptare [; descriere OS]) Mozilla/3.0 (X11; I; AIX 2) Dr. Sabin Sabin Buraga Dr. Netscape Communicator 4 – Mozilla/4.04 [en] (WinNT; U) www.nczonline.net/blog/2010/01/12/history-of-the-user-agent-string/ busaco ~ / profs.info.uaic.ro Dr. Sabin Sabin Buraga Dr. 1994 – primul browser disponibil pe un dispozitiv miniaturizat (PDA – Apple Newton): PocketWeb www.teco.edu/pocketweb/ busaco ~ / 1996 – primul navigator produs de Microsoft: MSIE include dialectul JScript și propriul BOM oferă multe facilități, ulterior standardizate de W3C profs.info.uaic.ro Mozilla/2.0 (compatible; MSIE Versiune; Sistem de operare) Mozilla/2.0 (compatible; MSIE 3.02; Windows 95) MSIE 4—7 – Mozilla/4.0 (compatible; MSIE 4.5; Mac_PowerPC) MSIE 8 – Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0) Dr.
    [Show full text]