Exam 2 Part 3 PDF
Document Details
Uploaded by AttentivePink
Tags
Related
- dokumenpub_c-high-performance-2nbsped-9781839216541-352-410.pdf
- dokumenpub_c-high-performance-2nbsped-9781839216541-218-263.pdf
- Developing High Performance HR Business Partner and Consulting Skills PDF
- Lecture 05-High Performance TLC-23 Sep 2024 PDF
- HPC Lecture Notes PDF
- CS571 Summer 2021: Web Technologies Exam 2 PDF
Summary
These notes cover best practices for building high-performance websites. They discuss strategies to optimize website performance by minimizing HTTP requests, using content delivery networks, and improving caching mechanisms. The summary includes specific tips and optimization strategies.
Full Transcript
Lecture 20: High Performance Websites Notes ● A study of popular web pages and the time to download them showed that the vast majority of time is spent on the client side; this is true even if the page is cached! ● 80-90% of the end user response time is spent on the front-end ■ Greater potential fo...
Lecture 20: High Performance Websites Notes ● A study of popular web pages and the time to download them showed that the vast majority of time is spent on the client side; this is true even if the page is cached! ● 80-90% of the end user response time is spent on the front-end ■ Greater potential for improvement ■ Simpler to optimize ● 80/20 performance rule: 20% that affects 80% of the user experience is what you need to optimize……Focus on the 20% that affects 80% of the end-user response time..start at the front end ● An “empty cache” means the browser bypasses the disk cache and has to request all the components to load the page ■ Empty cache: go into your browser and clear cache ○ A “full cache” means all (or at least most) of the components are found in the disk cache and the corresponding HTTP requests are avoided ■ Full cache: refresh the page ○ Expires: Tue, 1 Mar 2022 20:00:00 GMT (an earlier date than today) Last-Modified: Tue, 22 Mar 2022 12:30:00 GMT (today’s date ■ The Expires makes sure the page is not cached; the Last-Modified makes sure the server will have to check if blank.gif has changed ● set Expires date appropriately an earlier date or none removes the cookie sooner ○ Requests from a browser will produce one of these response status codes: ■ – 200 – the server is sending back the image implying the browser does not have the image in its cache ■ – 304 – the browser has the image in its cache, and the server responds saying it has not been modified ● ● ■ Akamai is the largest cdn providers The Initial 14 Rules - to optimize site ■ 1. Make fewer HTTP requests ● To reduce the number of HTTP requests: Combine scripts, Combine style sheets, Combine images into an image map, Combine images using “sprites” ○ An image sprite is a collection of images put into a single image • Using images sprites reduces the number of server requests and saves bandwidth ■ ■ ■ ■ ■ ■ ■ ■ 2. Use a CDN (content distribution network) ● Content Distribution Networks have servers around the world • They distribute your content so downloads can come from a nearby location 3. Add an Expires header ● All caches use a set of rules to determine whether to deliver an object from the cache or request a new version – If the object’s headers tell the cache not to keep the object, it won’t ○ set Expires date appropriately an earlier date or none removes the cookie sooner ○ As part of HTTP protocol there is a Cache-Control header – Cache-Control is an alternative to Expires – When cache-control: max-age is present, the response is stale if its current age is greater than the age value given (in seconds) at the time of a new request for the resource 4. Gzip components…number 1 way to optimize site ● Compress everything ● Img and pdf should not be compressed bc jpeg and png are compression algorithms…compressing something already compressed would result in something bigger…you also will lose some of the quality. ● Use server that supports compression ● Apache doesnt support compression..have to install module ● Scripts are huge! Gotta compress 5. Put stylesheets at the top ● Stylesheets block rendering in IE; IE will examine all stylesheets before starting to render, so its best to – Put stylesheets in the <head> ● Rule 5 doesnt matter bc IE is dead 6. Move scripts to the bottom ● • As the loading of JavaScript can cause the browser to stop rendering the page until the JavaScript is fully loaded, one can avoid the delay by moving scripts to the bottom 7. Avoid CSS expressions - skip 8. Make JS and CSS external ● Making JavaScript and CSS external implies more HTTP requests, but ○ – As HTML documents are not typically cached, so inlining JavaScript code will cause the same bytes to be downloaded on every page view ○ – External JS and CSS can be cached 9. Reduce DNS lookups ● Rule 9: every domain referred on a page..is dns lookup…so limit that ● ● As a general rule it is best to reduce the number of unique hostnames used in a web page ■ 10. Minify JS - 2nd best way to optimize ● shorten variable and function names…2nd best way to optimize…write ur program in non minify version, then put in a minifier, then deploy it in minify version…also make it difficult to reverse engineer your code… JSMin is a minifier u can use ● Minification, or minify, is the process of removing all unnecessary characters from source code, without changing its functionality ■ 11. Avoid redirects ● redirects are bad idea bc u get seconds of delay….search 301 and 302 in logs find them redirects then remove them ■ 12. Remove duplicate scripts ● remove duplicate scripts…if named differently, browser wont search into the file, ● – Extra executions ■ 13. Configure Etags ● Etags are used by clients and servers to verify that a cached resource is valid ● – To check that the resource (image, script, stylesheet, etc.) in the browser’s cache matches the one on the server ● – If there is a match, the server returns a 304 ■ 14. Make AJAX cacheable and small ● The URL of an AJAX request is included inside the HTML; as it is not bookmarked or linked to, the requesting page can be cached by the browser Updated yahoo Best Prax (2011) ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ 1.Flush the buffer early 2.Use GET for AJAX requests 3.Post-load components 4.Preload Components 5.Reduce the number of DOM Elements 6.Split Components Across Domains 7.Minimize the number of iframes 8.No 404s 9.Reduce cookie size 10.Use cookie-free domains for components ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ 11.Minimize DOM access 12.Develop smart event handlers 13.Avoid filters 14.Optimize images 15.Optimize CSS sprites 16.Don’t scale images in html 17.Make favicon.ico small and cacheable 18.Keep components under 25K 19.Pack components into a multipart document 20.Avoid Empty image src New Rules(2011) ● • Avoid empty src or href ● • Use GET for AJAX requests ● • Reduce the number of DOM elements ● • Avoid HTTP 404 (Not Found) error ● • Reduce cookie size ○ set Expires date appropriately an earlier date or none removes the cookie sooner ● • Use cookie-free domains ● • Do not scale images in HTML ● • Make favicon small and cacheable Lecture 21: React Notes ● No code in exam for react and angular ● React developed in the first place…Why was it developed ○ Existing ones are heavy-weight Frameworks • ○ Need for a light-weight library • ○ Complexity of 2-way data binding • ○ Update to Real DOM is performance intensive • ○ Bad UX from using “cascading updates” of DOM tree ● What is ReactJs ○ Developed by Facebook. And still keeping control of react ○ ReactJS is an open-source JavaScript library which is used for building user interfaces specifically for single page applications. ○ React is a view layer library, not a framework like Backbone, Angular, etc. ○ You can’t use React to build a fully-functional web app. ● Who uses React? ○ Netflix, facebook, instagram, aws, uber, airbnb, ny times, dropbox, etc ○ React is more popular than Angular ● How does react tackle challenges? ○ Uses 1-way data binding (not 2-way like Angular) ○ Virtual DOM ( Efficient for frequent updates ) ○ Easy to understand what a component will render ○ JSX - Easy to mix HTML and JS ○ React dev tools and excellent community ○ Server-side rendering (useful for SEO) ● Core tenets of React ○ Introducing JSX ○ Components ■ Components are building blocks of React Application ■ Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. ■ A component is a function/class that produces HTML to render and handles user events ■ Functional/Stateless Components ● ○ These are simple components that do not maintain their own state. ● Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen ■ Class/Stateful Components ● Class components are ECMAScript 6 (ES6) classes that can maintain a state, independent existence and a lifecycle of its own. States and Props ■ State ● State is a JavaScript Object containing the component data. ● • It represents internal state of the component ● • Accessed via this.state ● • State must be initialized when component is created ● • State can only be updated using setState() method ● • setState() can only add or change the properties and never remove a property. ● • When a component’s state data changes, the rendered markup will be updated by re-invoking render() method of the class. ■ State vs Props ● State is referred to the local state of the component which cannot be accessed and modified outside of the component and can only be used & modified inside the component. ● • Props, on the other hand, make components reusable by giving components the ability to receive data from the parent component in the form of props. ● ○ Lifecycle ● ● ■ React-Bootstrap ○ React doesn't have responsive capabilities so use bootstrap ○ Replaces the Bootstrap JavaScript. ○ Each component has been built from scratch as a true React Component ○ Doesn’t need jquery..use npm install React Native ○ A framework for building native apps with React. ○ Build native apps that can be run on mobile apps using JS and React ○ 5 levels of calls ○ An embedded instance of JavaScriptCore. • React components with bindings to Native UI components. • Manipulating calls into Objective C & java for behavior. • And polyfills for some web APIs. ○ ■ There is no such thing as js engine inside android and inside ios ■ Every app needs to have a full js engine ■ There is no real sharing of js engine….each app has their js engine ○ React vs React Native ■ React (a.k.a. ReactJS or React.js) is is a JavaScript library you use for building dynamic, high performing, responsive UI for your web interfaces. ■ React Native is an entire platform allowing you to build native, cross-platform mobile apps. ■ React.js is the heart of React Native, and it embodies all React’s principles and syntax, so the learning curve is easy. ○ React Native - stylesheet ■ • React Native implements a strict subset of CSS. ● Startups use react native…just know javascript…html, css, ● Cheaper developer!! quicker…react is used by most startups…builds ios, android and web code React vs Angular React Library vs. Framework: React is a JavaScript library developed by Facebook. It's mainly concerned with the view layer of the application. Component-Based Architecture: React is based on components, small, reusable pieces of code that control a part of the user interface. JSX: React uses JSX, a syntax extension for JavaScript, allowing developers to write HTML in React. Virtual DOM: React employs a virtual DOM to improve app performance. It updates the real DOM based on changes in the virtual DOM. State Management: React’s state management is handled through components' state and context API. For more complex scenarios, external libraries like Redux are often used. Unidirectional Data Flow: React follows a unidirectional data flow, making it easier to track and debug. Ecosystem Flexibility: React provides more flexibility in choosing additional libraries or tools for tasks like routing or state management. Angular Framework: Angular is a full-fledged MVC (Model-View-Controller) framework developed by Google. It's more opinionated than React. TypeScript: Angular is built on TypeScript, offering more robust typing and object-oriented programming features. Two-Way Data Binding: Angular supports two-way data binding, synchronizing the model and the view. RxJS: Angular makes use of RxJS for handling asynchronous tasks and event handling. Dependency Injection: Angular has a built-in dependency injection mechanism, making it easier to manage services and components. Integrated Tooling: Angular provides a comprehensive set of tools and features like Angular CLI, routing solutions, forms handling, etc. Structured Framework: Angular is more structured and provides a lot of built-in functionality, which might reduce the need for additional libraries. Similarities ● ● ● ● Popularity: Both are popular in the industry with large communities and extensive resources. Component-Based: Both use a component-based architecture. SPA (Single Page Applications): Ideal for building SPAs. Performance: Focus on high performance for web applications. Differences ● ● ● ● Flexibility vs. Convention: React offers more flexibility but requires more decisions from the developer. Angular is more opinionated with a defined way of doing things. Language: React uses JavaScript (or TypeScript), while Angular is based on TypeScript. Learning Curve: Angular has a steeper learning curve due to its comprehensive nature, whereas React is simpler to pick up due to its focus on UI. Tooling and Ecosystem: Angular comes with more out-of-the-box solutions, whereas React relies more on the community for additional tools. In summary, the choice between React and Angular often depends on the specific needs of the project, the team's familiarity with either technology, and the project's scale and complexity. React offers more flexibility and is often favored for smaller, more lightweight applications, whereas Angular is more suited for large-scale applications requiring a more structured approach.
