Go With The Reflow
•Download as PPT, PDF•
12 likes•3,813 views
The document discusses reflow in web browsers. Reflow is the process by which a browser calculates the layout and geometry of elements on a page. Reflow is computationally expensive and a major cause of performance issues, especially on mobile devices. The document provides examples of things that can trigger reflow like resizing the window, DOM changes, or changing CSS properties. It also suggests ways to optimize pages to reduce the number of reflows, such as changing class names instead of inline styles.
Report
Share
Report
Share
![Go With the Reflow Experiments testing browser rendering ,[object Object],[object Object],[object Object],[object Object]](https://image.slidesharecdn.com/gowiththereflow-090623195111-phpapp01/85/Go-With-The-Reflow-1-320.jpg)
![What is Reflow? ,[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recommended
Browserscope oscon 2011
This document discusses Browserscope, an open-source project that crowdsources browser testing to profile browser capabilities and performance. It collects data from over 10,000 browsers to track functionality over time, uncover regressions, and provide a historical resource for web developers. Tests are run on real users' browsers to aggregate unbiased results without dedicated testing resources.
Automated Web App Performance Testing Using WebDriver
This document discusses techniques for using WebDriver to perform web performance testing. It recommends measuring page load performance and interactive scenarios using tools like WebPageTest.org. It also suggests "marrying" WebDriver and WebPageTest by using functional tests to measure performance while test runs. Finally, it provides tips on how to instrument pages to measure load times around WebDriver calls and browser standards for performance metrics.
Web performance testing with web driver
This document discusses integrating web performance testing into WebDriver by leveraging the WebDriver API. It proposes adding logging capabilities to WebDriver to collect performance metrics during tests without needing to integrate separate testing systems. This would allow performance data to be collected as a natural part of functional tests, improving the developer experience. The document includes examples of how to enable logging in WebDriver and access the performance log data after a test.
Performance Metrics in a Day with Selenium
This document discusses various methods for gathering performance metrics from automated tests, including setting your own timings, using the Navigation Timings API, browser plugins, proxies, and the HTTP Archive (HAR) format. It provides code snippets for implementing timers in tests, exporting data from Firebug and Fiddler to HAR, and using the BrowserMob proxy to capture network traffic during tests.
Automated Testing with Google Chrome - WebDriver- ChromeDriver
Presented these slides at the Google Conference that happened in Chennai.
Google Developer's Group DevFest 2013
Mobile WebDriver Selendroid
The document discusses Selendroid, a tool for automating tests on mobile web and native Android applications. It begins with an overview of Selenium and the need for mobile test automation. Selendroid is introduced as an open source tool that allows controlling Android devices and applications using the WebDriver protocol. It supports testing native and hybrid mobile applications as well as mobile web. Key features highlighted include compatibility with the JSON wire protocol, no app modification requirement, and support for gestures, grid infrastructure and an inspector tool.
Webpack & React Performance in 16+ Steps
This document provides tips for boosting performance in React and Webpack applications. It discusses various optimizations that can improve build speed and bundle size for development and production environments. Some of the key recommendations include using PureComponent to minimize unnecessary re-renders, avoiding large JSX blocks, code splitting, tree shaking with Webpack 2, and leveraging tools like HappyPack, UglifyJS, and CSS loaders.
Ci of js and apex using jasmine, phantom js and drone io df14
This document discusses using continuous integration and continuous delivery for Salesforce development. It introduces the concepts of CI and CD and describes using Grunt, Drone.io, Jasmine, Istanbul and Ant together in an opinionated stack. Grunt is used to define tasks. Jasmine is used for JavaScript testing. Ant is used for Apex tests and deploying to orgs. Drone.io automates running builds and deploying code changes to development and QA orgs after code is committed.
Recommended
Browserscope oscon 2011
This document discusses Browserscope, an open-source project that crowdsources browser testing to profile browser capabilities and performance. It collects data from over 10,000 browsers to track functionality over time, uncover regressions, and provide a historical resource for web developers. Tests are run on real users' browsers to aggregate unbiased results without dedicated testing resources.
Automated Web App Performance Testing Using WebDriver
This document discusses techniques for using WebDriver to perform web performance testing. It recommends measuring page load performance and interactive scenarios using tools like WebPageTest.org. It also suggests "marrying" WebDriver and WebPageTest by using functional tests to measure performance while test runs. Finally, it provides tips on how to instrument pages to measure load times around WebDriver calls and browser standards for performance metrics.
Web performance testing with web driver
This document discusses integrating web performance testing into WebDriver by leveraging the WebDriver API. It proposes adding logging capabilities to WebDriver to collect performance metrics during tests without needing to integrate separate testing systems. This would allow performance data to be collected as a natural part of functional tests, improving the developer experience. The document includes examples of how to enable logging in WebDriver and access the performance log data after a test.
Performance Metrics in a Day with Selenium
This document discusses various methods for gathering performance metrics from automated tests, including setting your own timings, using the Navigation Timings API, browser plugins, proxies, and the HTTP Archive (HAR) format. It provides code snippets for implementing timers in tests, exporting data from Firebug and Fiddler to HAR, and using the BrowserMob proxy to capture network traffic during tests.
Automated Testing with Google Chrome - WebDriver- ChromeDriver
Presented these slides at the Google Conference that happened in Chennai.
Google Developer's Group DevFest 2013
Mobile WebDriver Selendroid
The document discusses Selendroid, a tool for automating tests on mobile web and native Android applications. It begins with an overview of Selenium and the need for mobile test automation. Selendroid is introduced as an open source tool that allows controlling Android devices and applications using the WebDriver protocol. It supports testing native and hybrid mobile applications as well as mobile web. Key features highlighted include compatibility with the JSON wire protocol, no app modification requirement, and support for gestures, grid infrastructure and an inspector tool.
Webpack & React Performance in 16+ Steps
This document provides tips for boosting performance in React and Webpack applications. It discusses various optimizations that can improve build speed and bundle size for development and production environments. Some of the key recommendations include using PureComponent to minimize unnecessary re-renders, avoiding large JSX blocks, code splitting, tree shaking with Webpack 2, and leveraging tools like HappyPack, UglifyJS, and CSS loaders.
Ci of js and apex using jasmine, phantom js and drone io df14
This document discusses using continuous integration and continuous delivery for Salesforce development. It introduces the concepts of CI and CD and describes using Grunt, Drone.io, Jasmine, Istanbul and Ant together in an opinionated stack. Grunt is used to define tasks. Jasmine is used for JavaScript testing. Ant is used for Apex tests and deploying to orgs. Drone.io automates running builds and deploying code changes to development and QA orgs after code is committed.
web optimizations
This document provides tips for optimizing website performance, including optimizing the loading sequence, HTML, CSS, images, JavaScript, headers, fonts, and other resources. It emphasizes measuring performance before and after optimizations to identify bottlenecks and areas for further improvement. Key recommendations include minifying files, reducing file sizes, caching resources, optimizing the critical rendering path, and using a content delivery network.
Client Side Optimization
Client Side Optimization can give websites a snappier interface and by reducing bandwidth save money. Presentation given at RailsWayCon 2010
Scalability vs. Performance
Creating scalable web sites that can handle many simultaneous requests and still provide fast experience for each user is hard. Historically, the industry was not differentiating Scalability and Performance, but with emergence of front-end engineering, new field of Web Performance Optimization was born and it became critical to approach them separately. Sergey Chernyshev will compare these two directions of web engineering and describe the differences between them, he will also cover current performance trends and describe different approaches to take in order to measure and analyze Web Performance in comparison to traditional methods that are successfully used to test scalability of web systems.
Metarefresh
This document summarizes challenges faced by the Flipkart frontend team. It discusses how they handle over 4 million pageviews per day across browsers using an in-house CDN. Key challenges include secure cross-domain calls, scalable CSS, and cleaning up old code. Techniques used include iframes, window.postMessage(), and window.name for cross-domain transport. The document also covers their approach to webfonts, CSS architecture using OCSS, and an experimental tool to clean up redundant CSS declarations.
AtlasCamp 2014: Static Connect Add-ons
Building Atlassian Connect add-ons with client-server frameworks like Express.JS and Play produces powerful add-ons, but requires hosting and database consideration. In contrast, "static" Connect add-ons are easier to write and far simpler to deploy. A static Connect add-on is simply a set of files (including an atlassian-connect.json descriptor) that are web accessible, either through a web server or via deployment to a CDN. Static add-ons have several advantages. First, infinite scalability. Why pay for CPU when you can let the user agent do the work? Second, simple persistence. Why pay for disk when you have local storage and JIRA & Confluence's persistence REST APIs? Third, extreme performance. Let a worldwide CDN serve your files from the nearest edge - it's literally impossible to compete with a static add-on when it comes to performance! Finally, easy caching. Why bother serving requests when your unchanged static files can be cached indefinitely with simple HTTP caching? In this talk I'll highlight the benefits and restrictions of static add-on architecture, and discuss the nuts and bolts of implementing a static add-on. I'll also show off the static add-on skeleton that will get your static add-on development off to a flying start.
Meta Refresh 2014
This document discusses techniques for improving perceived performance of websites. It explains that perceived performance is how quickly a site seems to load from a user's perspective, rather than actual technical performance metrics. Some key techniques discussed include using skeleton screens, progressive enhancement, and showing loading progress to trick users into thinking a site is loading faster than it actually is. The document also advocates for measuring real user performance data through APIs to identify actual bottlenecks and prioritize improvements.
Challenges of angular in production (Tasos Bekos) - GreeceJS #17
Modern web applications have constantly growing requirements and their API and complexity grows exponentially. In this session we'll look at a practical example of how to optimize solutions, like bundling, tree shaking, ahead of time compilation, lazy loading, etc. Also, we will get a glimpse of what it takes to switch a complex product to a modern stack, with Angular in its heart, and how the company's commitment is making it possible.
Altitude San Francisco 2018: HTTP Invalidation Workshop
One of the most powerful tools that Fastly offers is worldwide, instant purge. Come learn the ins and outs of how HTTP invalidation works in general and how purge and surrogate keys can be used to improve your site's delivery and get even more value from Fastly.
This talk will also cover the purge blast radius
Surrogate Keys are an amazing way to purge your content from cache, but they can be a bit scary when you aren't sure how many URLs this surrogate key is tied to or what kind of affect this will have on origin. Join the USA Today Network as we explain how we leverage big data tools, Go APIs, New Relic, and Sumo Logic to provide our users a suite of tools for purging content from Fastly. Developers love knowing the blast radius of their surrogate keys, while our engineers love the real-time metrics and notifications we get when developers are hard-purging content.
Gatsby intro
This document introduces Gatsby.js, a static site generator built with React, Webpack, and GraphQL. It discusses static site generators and their benefits like fast load times, simplicity, and reliability. Gatsby allows building lightning fast websites, especially for content that doesn't change frequently, like blogs, business sites, and ecommerce sites. The document explains key concepts behind Gatsby like React, Webpack, and GraphQL and demonstrates Gatsby by reviewing the author's blog built with it. While Gatsby is still early, its benefits include optimized loading, best practices out of the box, and flexibility of a React application.
A faster web
Service workers can improve network resilience by caching content to reduce trips to the server. Workbox is a set of libraries and tools that help generate service workers using best practices. It can integrate with build tools like Webpack. Caching layers like Redis can also be used in front of databases to provide redundancy and faster requests while protecting databases. Redis is an open source in-memory data store that can be used as a cache. The demos showed how to implement these caching strategies to improve performance.
Consuming Web Services in Android
This document discusses consuming web services from mobile applications. It covers common mobile development challenges like limited screen space, CPU power, and bandwidth. It then provides an overview of technologies used to access web services like XML, JSON, REST, and SOAP. Examples are given of using AsyncTask and Services in Android to make asynchronous web service calls. Code demonstrations and additional resources are also referenced.
Client side performance analysis
This document discusses re-using WebDriver-based tests for client-side performance analysis (CSPA). It covers the basics of CSPA, when to initiate CSPA, how CSPA relates to WebDriver tests, tools that can be used for CSPA including BrowserMob Proxy and dynaTrace, and examples of online services and desktop tools. References are provided for further information on CSPA and tools like YSlow, PageSpeed, GTmetrix and webpagetest.
Concepts on Mean Stack Development
Explanation of the file structure and concepts behind a full stack web development project utilizing the MEAN stack on Amazon AWS.
About Caching
Caching is used to optimize performance by taking advantage of different access speeds of storage mediums. It stores frequently accessed data in faster storage like memory or disk cache. There are different types of caches like browser cache, server cache using memcached, and cache within a request. Memcached is mainly used for read-through caching but has issues like requiring separate deployment and CAS operations. GroupCache is an alternative that avoids duplicated calls to the backend and has better performance without network IO or CAS. Write-through caching aims to have zero reads from the backend but is challenging to implement transactionally at scale.
Jayway Web Tech Radar 2015
Are you having trouble with all the things happening in web technology lately? Frustrated with the rate of change? Hard to keep up? Then we have good news for you: a little while ago, we at Jayway did a tech radar on web technology and we would like to share it with you.
Some of the technologies we will cover are: ECMAScript 6, React, Angular, Ember, Isomorphic/Universal web applications, Unidirectional client data flow, Backend-as-a-Service, Meteor, and Static site generators.
We will also do a small comparison of the web tech radar we did 18 months ago, and draw conclusions from the differences and the current rate of change.
Finally, we'll give some advices for navigating in the ever changing landscape of new web technology.
Modern Static Site with GatsbyJS
GatsbyJS is a site generator that allows you to build modern, fast and secure apps and websites using React, GraphQL, and other tools. It focuses on developer experience with batteries included and features like hot reloading. Popular sites using Gatsby include reactjs.org, airbnb.io, and figma.com. Gatsby gets data from various sources and delivers sites via services like S3, Netlify, and GitHub Pages. Developers can install Gatsby globally, generate a new Gatsby site, and develop locally while previewing changes in real time.
The State of Rust Web Frameworks
Talk given at Rust Seoul on 2019-04-16 on the state of Rust web frameworks.
Video: https://www.youtube.com/watch?v=bSj6R-05dIk
How to Start Performance Testing?
Short presentation on how to start performance testing. Going from phase of requirement gathering to the writing your first test scripts and using performance test tool. Glance over JMeter - open source performance testing tool.
Intro to Front End Development with Angular + Firebase
Intro to front end development and tooling with Angular + Firebase. Originally presented at FullStack Academy in NYC on 2/19/14.
Back to the future with static site generators
If you remember when web sites were all created with plain HTML pages, then you'll know that CMSs and dynamic web frameworks saved us and solved all our problems. Or did they? In fact, we instead spend a lot of time customising existing code to meet our requirements, grappling with deployments and then whacking caching on top of over-powered servers to get an ounce of speed.
Static Site Generators aim to sit somewhere in the middle and are perfect for semi-dynamic sites and with a little learning, better for content creators.
In this session, Chris will look at an overview of the principles and options for static site generators and deep dive into one or two to explain further how the work and can fit into your projects.
Front-end optimisation & jQuery Internals
This document discusses optimizing jQuery and front-end performance. It covers minimizing HTTP requests, file size, and blocking behavior to improve dependency loading. It discusses optimizing initial page rendering through proper asset ordering, lazy loading, and reducing flash of unstyled content. It also discusses minimizing reflows and repaints as well as JavaScript optimizations to improve post-load responsiveness. The document provides an overview of jQuery internals and techniques for optimizing jQuery code.
Front-end optimisation & jQuery Internals (Pycon)
This document discusses optimizing jQuery and front-end performance. It covers minimizing HTTP requests, file size, and blocking behavior to improve dependency loading. It discusses optimizing initial page rendering through asset ordering, lazy loading, and avoiding reflows and repaints. The document also covers post-load responsiveness techniques like JavaScript optimizations. It provides an overview of jQuery internals and optimizations like chaining selections and avoiding empty sets. Tools mentioned include Google Closure Compiler, dynaTrace AJAX Edition, and Cuzillion.
More Related Content
What's hot
web optimizations
This document provides tips for optimizing website performance, including optimizing the loading sequence, HTML, CSS, images, JavaScript, headers, fonts, and other resources. It emphasizes measuring performance before and after optimizations to identify bottlenecks and areas for further improvement. Key recommendations include minifying files, reducing file sizes, caching resources, optimizing the critical rendering path, and using a content delivery network.
Client Side Optimization
Client Side Optimization can give websites a snappier interface and by reducing bandwidth save money. Presentation given at RailsWayCon 2010
Scalability vs. Performance
Creating scalable web sites that can handle many simultaneous requests and still provide fast experience for each user is hard. Historically, the industry was not differentiating Scalability and Performance, but with emergence of front-end engineering, new field of Web Performance Optimization was born and it became critical to approach them separately. Sergey Chernyshev will compare these two directions of web engineering and describe the differences between them, he will also cover current performance trends and describe different approaches to take in order to measure and analyze Web Performance in comparison to traditional methods that are successfully used to test scalability of web systems.
Metarefresh
This document summarizes challenges faced by the Flipkart frontend team. It discusses how they handle over 4 million pageviews per day across browsers using an in-house CDN. Key challenges include secure cross-domain calls, scalable CSS, and cleaning up old code. Techniques used include iframes, window.postMessage(), and window.name for cross-domain transport. The document also covers their approach to webfonts, CSS architecture using OCSS, and an experimental tool to clean up redundant CSS declarations.
AtlasCamp 2014: Static Connect Add-ons
Building Atlassian Connect add-ons with client-server frameworks like Express.JS and Play produces powerful add-ons, but requires hosting and database consideration. In contrast, "static" Connect add-ons are easier to write and far simpler to deploy. A static Connect add-on is simply a set of files (including an atlassian-connect.json descriptor) that are web accessible, either through a web server or via deployment to a CDN. Static add-ons have several advantages. First, infinite scalability. Why pay for CPU when you can let the user agent do the work? Second, simple persistence. Why pay for disk when you have local storage and JIRA & Confluence's persistence REST APIs? Third, extreme performance. Let a worldwide CDN serve your files from the nearest edge - it's literally impossible to compete with a static add-on when it comes to performance! Finally, easy caching. Why bother serving requests when your unchanged static files can be cached indefinitely with simple HTTP caching? In this talk I'll highlight the benefits and restrictions of static add-on architecture, and discuss the nuts and bolts of implementing a static add-on. I'll also show off the static add-on skeleton that will get your static add-on development off to a flying start.
Meta Refresh 2014
This document discusses techniques for improving perceived performance of websites. It explains that perceived performance is how quickly a site seems to load from a user's perspective, rather than actual technical performance metrics. Some key techniques discussed include using skeleton screens, progressive enhancement, and showing loading progress to trick users into thinking a site is loading faster than it actually is. The document also advocates for measuring real user performance data through APIs to identify actual bottlenecks and prioritize improvements.
Challenges of angular in production (Tasos Bekos) - GreeceJS #17
Modern web applications have constantly growing requirements and their API and complexity grows exponentially. In this session we'll look at a practical example of how to optimize solutions, like bundling, tree shaking, ahead of time compilation, lazy loading, etc. Also, we will get a glimpse of what it takes to switch a complex product to a modern stack, with Angular in its heart, and how the company's commitment is making it possible.
Altitude San Francisco 2018: HTTP Invalidation Workshop
One of the most powerful tools that Fastly offers is worldwide, instant purge. Come learn the ins and outs of how HTTP invalidation works in general and how purge and surrogate keys can be used to improve your site's delivery and get even more value from Fastly.
This talk will also cover the purge blast radius
Surrogate Keys are an amazing way to purge your content from cache, but they can be a bit scary when you aren't sure how many URLs this surrogate key is tied to or what kind of affect this will have on origin. Join the USA Today Network as we explain how we leverage big data tools, Go APIs, New Relic, and Sumo Logic to provide our users a suite of tools for purging content from Fastly. Developers love knowing the blast radius of their surrogate keys, while our engineers love the real-time metrics and notifications we get when developers are hard-purging content.
Gatsby intro
This document introduces Gatsby.js, a static site generator built with React, Webpack, and GraphQL. It discusses static site generators and their benefits like fast load times, simplicity, and reliability. Gatsby allows building lightning fast websites, especially for content that doesn't change frequently, like blogs, business sites, and ecommerce sites. The document explains key concepts behind Gatsby like React, Webpack, and GraphQL and demonstrates Gatsby by reviewing the author's blog built with it. While Gatsby is still early, its benefits include optimized loading, best practices out of the box, and flexibility of a React application.
A faster web
Service workers can improve network resilience by caching content to reduce trips to the server. Workbox is a set of libraries and tools that help generate service workers using best practices. It can integrate with build tools like Webpack. Caching layers like Redis can also be used in front of databases to provide redundancy and faster requests while protecting databases. Redis is an open source in-memory data store that can be used as a cache. The demos showed how to implement these caching strategies to improve performance.
Consuming Web Services in Android
This document discusses consuming web services from mobile applications. It covers common mobile development challenges like limited screen space, CPU power, and bandwidth. It then provides an overview of technologies used to access web services like XML, JSON, REST, and SOAP. Examples are given of using AsyncTask and Services in Android to make asynchronous web service calls. Code demonstrations and additional resources are also referenced.
Client side performance analysis
This document discusses re-using WebDriver-based tests for client-side performance analysis (CSPA). It covers the basics of CSPA, when to initiate CSPA, how CSPA relates to WebDriver tests, tools that can be used for CSPA including BrowserMob Proxy and dynaTrace, and examples of online services and desktop tools. References are provided for further information on CSPA and tools like YSlow, PageSpeed, GTmetrix and webpagetest.
Concepts on Mean Stack Development
Explanation of the file structure and concepts behind a full stack web development project utilizing the MEAN stack on Amazon AWS.
About Caching
Caching is used to optimize performance by taking advantage of different access speeds of storage mediums. It stores frequently accessed data in faster storage like memory or disk cache. There are different types of caches like browser cache, server cache using memcached, and cache within a request. Memcached is mainly used for read-through caching but has issues like requiring separate deployment and CAS operations. GroupCache is an alternative that avoids duplicated calls to the backend and has better performance without network IO or CAS. Write-through caching aims to have zero reads from the backend but is challenging to implement transactionally at scale.
Jayway Web Tech Radar 2015
Are you having trouble with all the things happening in web technology lately? Frustrated with the rate of change? Hard to keep up? Then we have good news for you: a little while ago, we at Jayway did a tech radar on web technology and we would like to share it with you.
Some of the technologies we will cover are: ECMAScript 6, React, Angular, Ember, Isomorphic/Universal web applications, Unidirectional client data flow, Backend-as-a-Service, Meteor, and Static site generators.
We will also do a small comparison of the web tech radar we did 18 months ago, and draw conclusions from the differences and the current rate of change.
Finally, we'll give some advices for navigating in the ever changing landscape of new web technology.
Modern Static Site with GatsbyJS
GatsbyJS is a site generator that allows you to build modern, fast and secure apps and websites using React, GraphQL, and other tools. It focuses on developer experience with batteries included and features like hot reloading. Popular sites using Gatsby include reactjs.org, airbnb.io, and figma.com. Gatsby gets data from various sources and delivers sites via services like S3, Netlify, and GitHub Pages. Developers can install Gatsby globally, generate a new Gatsby site, and develop locally while previewing changes in real time.
The State of Rust Web Frameworks
Talk given at Rust Seoul on 2019-04-16 on the state of Rust web frameworks.
Video: https://www.youtube.com/watch?v=bSj6R-05dIk
How to Start Performance Testing?
Short presentation on how to start performance testing. Going from phase of requirement gathering to the writing your first test scripts and using performance test tool. Glance over JMeter - open source performance testing tool.
Intro to Front End Development with Angular + Firebase
Intro to front end development and tooling with Angular + Firebase. Originally presented at FullStack Academy in NYC on 2/19/14.
Back to the future with static site generators
If you remember when web sites were all created with plain HTML pages, then you'll know that CMSs and dynamic web frameworks saved us and solved all our problems. Or did they? In fact, we instead spend a lot of time customising existing code to meet our requirements, grappling with deployments and then whacking caching on top of over-powered servers to get an ounce of speed.
Static Site Generators aim to sit somewhere in the middle and are perfect for semi-dynamic sites and with a little learning, better for content creators.
In this session, Chris will look at an overview of the principles and options for static site generators and deep dive into one or two to explain further how the work and can fit into your projects.
What's hot (20)
Challenges of angular in production (Tasos Bekos) - GreeceJS #17
Challenges of angular in production (Tasos Bekos) - GreeceJS #17
Altitude San Francisco 2018: HTTP Invalidation Workshop
Altitude San Francisco 2018: HTTP Invalidation Workshop
Intro to Front End Development with Angular + Firebase
Intro to Front End Development with Angular + Firebase
Similar to Go With The Reflow
Front-end optimisation & jQuery Internals
This document discusses optimizing jQuery and front-end performance. It covers minimizing HTTP requests, file size, and blocking behavior to improve dependency loading. It discusses optimizing initial page rendering through proper asset ordering, lazy loading, and reducing flash of unstyled content. It also discusses minimizing reflows and repaints as well as JavaScript optimizations to improve post-load responsiveness. The document provides an overview of jQuery internals and techniques for optimizing jQuery code.
Front-end optimisation & jQuery Internals (Pycon)
This document discusses optimizing jQuery and front-end performance. It covers minimizing HTTP requests, file size, and blocking behavior to improve dependency loading. It discusses optimizing initial page rendering through asset ordering, lazy loading, and avoiding reflows and repaints. The document also covers post-load responsiveness techniques like JavaScript optimizations. It provides an overview of jQuery internals and optimizations like chaining selections and avoiding empty sets. Tools mentioned include Google Closure Compiler, dynaTrace AJAX Edition, and Cuzillion.
JavaScript front end performance optimizations
No one wants a slow loading, slow reacting application. As page weight has increased so has the dependency on JavaScript to drive rich user experiences. Today many pages load over 2MBs of JavaScript, but is this healthy? Do your scripts and dependencies perform well? In this session we will review common JavaScript performance bottlenecks, how to detect them and how to eliminate them.
This session will review common bad coding syntax, architecture and how to replace them with better alternatives. You will also be exposed to caching, code organization, build and deployment best practices that produce the best user experiences. Finally, you will see how to use the navigation timing and performance timing APIs to fine tune your applications to produce a fast, lean application your customers will love.
Rencore Webinar: Developing Secure and Performant JavaScript for SharePoint
In software, there are two categories that don’t receive enough attention no matter the language you write.
Hugh Wood, Lead Developer at Rencore, will focus on how this affects any JavaScript you write.
One is understandably performance: you might not care about performance until the 11th hour and this sometimes is a valid point. However, performance can sometimes be attributed to a factor in a Risk Assessment for Usability, Stability or Security.
Security isn’t often factored into code that is written, and the current structure of how people work opens up new avenues of attack.
With SharePoint ask yourself one question before signing up for this webinar: should you sacrifice Security for Performance?
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5
事例とサンプルコードから学ぶ
身近で普通に使わているHTML5
HTML5 Conference Miyazaki 2013 2013/02/10
ひらい さだあき @sada_h
Sexy React Stack
High tech, high code quality, high performance, and high scalability were discussed. The presentation covered React, Redux, ES6+, Flow, unit testing, and Webpack. Pros include full control, reusability, testability, and performance. Cons include learning curve and needing to manage conventions and dependencies carefully.
Web Performance 101 - Gil Givati
The document discusses improving web performance and optimization. It provides an overview of key performance metrics such as time to first byte, time to first impression, onLoad time and fully loaded time. It also discusses tools for measuring performance like Yahoo! YSlow and Google PageSpeed which provide guidelines and scores on items that impact performance. Overall page speed, number of requests, YSlow and PageSpeed scores are important metrics to consider.
Technology Trends
The document discusses emerging technology trends including Web 2.0, Rich Internet Applications (RIA), AJAX, REST, SOA, and programming languages and frameworks like Ruby, Python, Groovy, Grails, Rails, Flex, Silverlight, and more. It also covers concepts like agile methodologies, design driven development, and potential software architectures using these technologies. The document suggests this represents just the beginning and new technologies like Web 3.0 and Enterprise 3.0 will continue to emerge and change how software is developed.
ZZ BC#7.5 asp.net mvc practice and guideline refresh!
15/01/2012
ZZ BC#7.5 : Slide Presentation
Code Sample : ZZBC#7.5_ASPNETMVC
http://tinyurl.com/834chox
Coding the UI
When Orbitz Worldwide released a new generation of its global technology platform there were some lofty goals for the UI. They wanted to build a presentation tier (HTML, CSS, JavaScript) that would meet the goals of internationalization, accessibility, have rich Ajax interactions, and be faster and easier to develop in. This session will explore the key challenges in achieving these goals, including what worked, what didn\'t, and what\'s next.
Coding Ui
This document summarizes Mark Meeker's presentation on lessons learned from coding user interfaces at ebookers and Orbitz. Some key lessons included following web standards, promoting code reuse, maintaining high quality code, and providing a consistent user experience. Internationalization was also a major challenge given the large number of translations and cultural differences to consider. The presentation emphasized strategies like progressive enhancement, separation of layers, and graded browser support.
Web Development for UX Designers
An overview of web development essentials that will help you as a user experience designer to not only understand how to integrate designs with development components, but also to learn some tips on interacting effectively with developers.
Practicing at the Cutting Edge: Learning and Unlearning about Java Performance
Video and slides synchronized, mp3 and slide download available at URL http://bit.ly/1dImvww.
Martin Thompson overviews Java's evolution, comparing it with C++'s, discussing the challenges of pushing the performance limits. Filmed at qconsf.com.
Martin Thompson is a high-performance and low-latency specialist, with experience gained over two decades working on large scale transactional and big-data systems.
Web Apps and more
This document discusses various topics related to developing web apps, including HTML5, responsive design, touch events, offline capabilities, and debugging tools. It provides links to resources on HTML5 features like media queries, SVG, web workers, and the page visibility API. It also covers techniques for adapting content like responsive web design, progressive enhancement, and server-side adaptation. Mobile browser stats and popular devices on Douban are mentioned. Frameworks like Bootstrap and tools like Weinre for debugging mobile apps are referenced.
Web app and more
This document discusses various techniques for making web applications work offline and with unreliable network connections, including:
- The application cache manifest which allows specifying cached resources to work offline
- Issues with the current manifest specification and potential enhancements
- The window.applicationCache API for caching resources and monitoring cache status
- Detecting online/offline status using the navigator.onLine property
In 3 sentences or less, it summarizes approaches for offline web applications using the application cache manifest, applicationCache API, and navigator.onLine property.
SXSW 2012 JavaScript MythBusters
This document summarizes a presentation on JavaScript performance myths. It debunks several common myths, including that for loops are always slower than while loops, avoiding the arguments object improves performance, and concatenating and deferring scripts is enough for good performance. It provides evidence from sites like jsPerf to show that many presumed optimizations do not actually improve performance or sometimes make it worse.
Get Ahead with HTML5 on Moible
This document discusses how HTML5 can be used to build engaging mobile applications. Key features covered include offline storage using the Application Cache API, storing data locally using Web Storage, using a SQL database with Web SQL, advanced graphics capabilities with Canvas and SVG, real-time communications over WebSockets, and tools for developing HTML5 apps like jQuery Mobile, Sencha Touch, and Google Web Toolkit. It emphasizes testing on multiple platforms and browsers to ensure compatibility.
Developing a Struts & Tiles application using WebSphere Studio
This document discusses developing a Struts and Tiles application using WebSphere Studio Application Developer. It covers configuring the web.xml and struts-config.xml files, creating a sample directory search application using Struts and Tiles, and advanced topics like internationalization and changing the application's look and feel using Tiles. The presentation includes a demo of creating a Struts-enabled application in WebSphere Studio and an overview of the sample directory application.
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
This document provides an overview of HTML5 technologies including HTML5 markup, microdata/RDFa, WebFonts, Canvas, MediaQueries, performance optimizations like SPDY and HTTP 2.0. It discusses specifications from the W3C and implementations by companies. Tools for testing responsive design, fonts and browser compatibility are also mentioned. The document is written in Japanese and references the author's blog for code samples.
Open-source website performance tools
This document summarizes several open-source website performance tools including Google Page Speed, Google Closure Compiler, Cuzillion, and Dustme Selectors. It notes that these tools can help optimize websites by reducing file sizes, identifying unused code, improving loading performance, and finding other optimization opportunities to improve page speeds. Faster websites can significantly impact key metrics like traffic, sales, and mobile experience.
Similar to Go With The Reflow (20)
Rencore Webinar: Developing Secure and Performant JavaScript for SharePoint
Rencore Webinar: Developing Secure and Performant JavaScript for SharePoint
ZZ BC#7.5 asp.net mvc practice and guideline refresh!
ZZ BC#7.5 asp.net mvc practice and guideline refresh!
Practicing at the Cutting Edge: Learning and Unlearning about Java Performance
Practicing at the Cutting Edge: Learning and Unlearning about Java Performance
Developing a Struts & Tiles application using WebSphere Studio
Developing a Struts & Tiles application using WebSphere Studio
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
Recently uploaded
A Deep Dive into ScyllaDB's Architecture
This talk will cover ScyllaDB Architecture from the cluster-level view and zoom in on data distribution and internal node architecture. In the process, we will learn the secret sauce used to get ScyllaDB's high availability and superior performance. We will also touch on the upcoming changes to ScyllaDB architecture, moving to strongly consistent metadata and tablets.
Demystifying Knowledge Management through Storytelling
The Department of Veteran Affairs (VA) invited Taylor Paschal, Knowledge & Information Management Consultant at Enterprise Knowledge, to speak at a Knowledge Management Lunch and Learn hosted on June 12, 2024. All Office of Administration staff were invited to attend and received professional development credit for participating in the voluntary event.
The objectives of the Lunch and Learn presentation were to:
- Review what KM ‘is’ and ‘isn’t’
- Understand the value of KM and the benefits of engaging
- Define and reflect on your “what’s in it for me?”
- Share actionable ways you can participate in Knowledge - - Capture & Transfer
Fueling AI with Great Data with Airbyte Webinar
This talk will focus on how to collect data from a variety of sources, leveraging this data for RAG and other GenAI use cases, and finally charting your course to productionalization.
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Dmitrii Kamaev, PhD
Senior Product Owner - QIAGEN
AppSec PNW: Android and iOS Application Security with MobSF
Mobile Security Framework - MobSF is a free and open source automated mobile application security testing environment designed to help security engineers, researchers, developers, and penetration testers to identify security vulnerabilities, malicious behaviours and privacy concerns in mobile applications using static and dynamic analysis. It supports all the popular mobile application binaries and source code formats built for Android and iOS devices. In addition to automated security assessment, it also offers an interactive testing environment to build and execute scenario based test/fuzz cases against the application.
This talk covers:
Using MobSF for static analysis of mobile applications.
Interactive dynamic security assessment of Android and iOS applications.
Solving Mobile app CTF challenges.
Reverse engineering and runtime analysis of Mobile malware.
How to shift left and integrate MobSF/mobsfscan SAST and DAST in your build pipeline.
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
This LF Energy webinar took place June 20, 2024. It featured:
-Alex Thornton, LF Energy
-Hallie Cramer, Google
-Daniel Roesler, UtilityAPI
-Henry Richardson, WattTime
In response to the urgency and scale required to effectively address climate change, open source solutions offer significant potential for driving innovation and progress. Currently, there is a growing demand for standardization and interoperability in energy data and modeling. Open source standards and specifications within the energy sector can also alleviate challenges associated with data fragmentation, transparency, and accessibility. At the same time, it is crucial to consider privacy and security concerns throughout the development of open source platforms.
This webinar will delve into the motivations behind establishing LF Energy’s Carbon Data Specification Consortium. It will provide an overview of the draft specifications and the ongoing progress made by the respective working groups.
Three primary specifications will be discussed:
-Discovery and client registration, emphasizing transparent processes and secure and private access
-Customer data, centering around customer tariffs, bills, energy usage, and full consumption disclosure
-Power systems data, focusing on grid data, inclusive of transmission and distribution networks, generation, intergrid power flows, and market settlement data
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
Tomaz Bratanic
Graph ML and GenAI Expert - Neo4j
GNSS spoofing via SDR (Criptored Talks 2024)
In the realm of cybersecurity, offensive security practices act as a critical shield. By simulating real-world attacks in a controlled environment, these techniques expose vulnerabilities before malicious actors can exploit them. This proactive approach allows manufacturers to identify and fix weaknesses, significantly enhancing system security.
This presentation delves into the development of a system designed to mimic Galileo's Open Service signal using software-defined radio (SDR) technology. We'll begin with a foundational overview of both Global Navigation Satellite Systems (GNSS) and the intricacies of digital signal processing.
The presentation culminates in a live demonstration. We'll showcase the manipulation of Galileo's Open Service pilot signal, simulating an attack on various software and hardware systems. This practical demonstration serves to highlight the potential consequences of unaddressed vulnerabilities, emphasizing the importance of offensive security practices in safeguarding critical infrastructure.
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
Folding is a recent technique for building efficient recursive SNARKs. Several elegant folding protocols have been proposed, such as Nova, Supernova, Hypernova, Protostar, and others. However, all of them rely on an additively homomorphic commitment scheme based on discrete log, and are therefore not post-quantum secure. In this work we present LatticeFold, the first lattice-based folding protocol based on the Module SIS problem. This folding protocol naturally leads to an efficient recursive lattice-based SNARK and an efficient PCD scheme. LatticeFold supports folding low-degree relations, such as R1CS, as well as high-degree relations, such as CCS. The key challenge is to construct a secure folding protocol that works with the Ajtai commitment scheme. The difficulty, is ensuring that extracted witnesses are low norm through many rounds of folding. We present a novel technique using the sumcheck protocol to ensure that extracted witnesses are always low norm no matter how many rounds of folding are used. Our evaluation of the final proof system suggests that it is as performant as Hypernova, while providing post-quantum security.
Paper Link: https://eprint.iacr.org/2024/257
High performance Serverless Java on AWS- GoTo Amsterdam 2024
Java is for many years one of the most popular programming languages, but it used to have hard times in the Serverless community. Java is known for its high cold start times and high memory footprint, comparing to other programming languages like Node.js and Python. In this talk I'll look at the general best practices and techniques we can use to decrease memory consumption, cold start times for Java Serverless development on AWS including GraalVM (Native Image) and AWS own offering SnapStart based on Firecracker microVM snapshot and restore and CRaC (Coordinated Restore at Checkpoint) runtime hooks. I'll also provide a lot of benchmarking on Lambda functions trying out various deployment package sizes, Lambda memory settings, Java compilation options and HTTP (a)synchronous clients and measure their impact on cold and warm start times.
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift
Overview
Dive into the world of anomaly detection on edge devices with our comprehensive hands-on tutorial. This SlideShare presentation will guide you through the entire process, from data collection and model training to edge deployment and real-time monitoring. Perfect for those looking to implement robust anomaly detection systems on resource-constrained IoT/edge devices.
Key Topics Covered
1. Introduction to Anomaly Detection
- Understand the fundamentals of anomaly detection and its importance in identifying unusual behavior or failures in systems.
2. Understanding Edge (IoT)
- Learn about edge computing and IoT, and how they enable real-time data processing and decision-making at the source.
3. What is ArgoCD?
- Discover ArgoCD, a declarative, GitOps continuous delivery tool for Kubernetes, and its role in deploying applications on edge devices.
4. Deployment Using ArgoCD for Edge Devices
- Step-by-step guide on deploying anomaly detection models on edge devices using ArgoCD.
5. Introduction to Apache Kafka and S3
- Explore Apache Kafka for real-time data streaming and Amazon S3 for scalable storage solutions.
6. Viewing Kafka Messages in the Data Lake
- Learn how to view and analyze Kafka messages stored in a data lake for better insights.
7. What is Prometheus?
- Get to know Prometheus, an open-source monitoring and alerting toolkit, and its application in monitoring edge devices.
8. Monitoring Application Metrics with Prometheus
- Detailed instructions on setting up Prometheus to monitor the performance and health of your anomaly detection system.
9. What is Camel K?
- Introduction to Camel K, a lightweight integration framework built on Apache Camel, designed for Kubernetes.
10. Configuring Camel K Integrations for Data Pipelines
- Learn how to configure Camel K for seamless data pipeline integrations in your anomaly detection workflow.
11. What is a Jupyter Notebook?
- Overview of Jupyter Notebooks, an open-source web application for creating and sharing documents with live code, equations, visualizations, and narrative text.
12. Jupyter Notebooks with Code Examples
- Hands-on examples and code snippets in Jupyter Notebooks to help you implement and test anomaly detection models.
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
What began over 115 years ago as a supplier of precision gauges to the automotive industry has evolved into being an industry leader in the manufacture of product branding, automotive cockpit trim and decorative appliance trim. Value-added services include in-house Design, Engineering, Program Management, Test Lab and Tool Shops.
Astute Business Solutions | Oracle Cloud Partner |
Your goto partner for Oracle Cloud, PeopleSoft, E-Business Suite, and Ellucian Banner. We are a firm specialized in managed services and consulting.
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...Edge AI and Vision Alliance
For the full video of this presentation, please visit: https://www.edge-ai-vision.com/2024/06/temporal-event-neural-networks-a-more-efficient-alternative-to-the-transformer-a-presentation-from-brainchip/
Chris Jones, Director of Product Management at BrainChip , presents the “Temporal Event Neural Networks: A More Efficient Alternative to the Transformer” tutorial at the May 2024 Embedded Vision Summit.
The expansion of AI services necessitates enhanced computational capabilities on edge devices. Temporal Event Neural Networks (TENNs), developed by BrainChip, represent a novel and highly efficient state-space network. TENNs demonstrate exceptional proficiency in handling multi-dimensional streaming data, facilitating advancements in object detection, action recognition, speech enhancement and language model/sequence generation. Through the utilization of polynomial-based continuous convolutions, TENNs streamline models, expedite training processes and significantly diminish memory requirements, achieving notable reductions of up to 50x in parameters and 5,000x in energy consumption compared to prevailing methodologies like transformers.
Integration with BrainChip’s Akida neuromorphic hardware IP further enhances TENNs’ capabilities, enabling the realization of highly capable, portable and passively cooled edge devices. This presentation delves into the technical innovations underlying TENNs, presents real-world benchmarks, and elucidates how this cutting-edge approach is positioned to revolutionize edge AI across diverse applications.JavaLand 2024: Application Development Green Masterplan
My presentation slides I used at JavaLand 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
Manufacturing custom quality metal nameplates and badges involves several standard operations. Processes include sheet prep, lithography, screening, coating, punch press and inspection. All decoration is completed in the flat sheet with adhesive and tooling operations following. The possibilities for creating unique durable nameplates are endless. How will you create your brand identity? We can help!
Recently uploaded (20)
Demystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through Storytelling
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
AppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSF
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
High performance Serverless Java on AWS- GoTo Amsterdam 2024
High performance Serverless Java on AWS- GoTo Amsterdam 2024
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
Go With The Reflow
- 11. Reflow Testing 400 Elements, 1000 CSS Rules (#contents *)
- 12. Reflow Testing #contents div #contents html #contents a #contents * CSS Specificity Matters!
- 13. Reflow Testing 2X Difference in Triton prior to IE8 Webkit is very flat = good
- 14. Reflow Testing Is the 4X time for the four sides of the box model in IE6,7?
- 15. Reflow Testing More To Come! Divs vs Tables Overflow vs. Inline Block Grids “ CSS is Awesome” Gotchas Having fun yet?!