Shubham Aneja

A repaint occurs when changes are made to an elements skin that changes visibly, but do not affect its layout. Examples of this include outline, visibility, background, or color. According to Opera, repaint is expensive because the browser must verify the visibility of all other nodes in the DOM tree. A reflow is even more critical to performance because it involves changes that affect the layout of a portion of the page (or the whole page). A reflow computes the layout of the page. A reflow on an element recomputes the dimensions and position of the element, and it also triggers further reflows on that element’s children, ancestors and elements that appear after it in the DOM. Then it calls a final repaint. Reflowing is very expensive. Examples that cause reflows include: adding or removing content, explicitly or implicitly changing width, height, font-family, font-size and more. Other examples: Resizing the window Changing the font Adding or removing a stylesheet ...

Timing breakdown phases explained Here's more information about each of the phases you may see in the Timing tab: Queueing (no-color, transparent, white ) . The browser queues requests when: The request was postponed by the rendering engine because it's considered lower priority than critical resources (such as scripts/styles). This often happens with images. The request was put on hold to wait for an unavailable TCP socket that's about to free up. The request was put on hold because the browser only allows  six TCP connections  per origin on HTTP 1. Time spent making disk cache entries (typically very quick.) Stalled/Blocking (grey) . Time the request spent waiting before it could be sent. It can be waiting for any of the reasons described for Queueing. Additionally, this time is inclusive of any time spent in proxy negotiation. Proxy Negotiation (grey): Time spent negotiating with a  proxy server  connection. DNS Lookup (Dark green) . Time spent p...

If you have ever browsed an HTTPS URL through a browser, you have experienced the SSL handshake. Even though might not notice it, the browser and the website is creating an HTTPS connection using one-way SSL handshake. The main purpose of an SSL handshake is to provide privacy and data integrity for communication between a server and a client. During the Handshake, server and client will exchange important information required to establish a secure connection. There are two types of SSL handshakes described as one-way SSL and two-way SSL (Mutual SSL). Difference between those two is that in one -way SSL only the server authenticates to the client whereas, in two-way SSL, both server and client authenticate to each other. Usually, when we browse an HTTPS website, one-way SSL is being used where only our browser (client) validates the identity of the website (server). Two-way SSL is mostly used in server to server communication where both parties need to validate the identity of e...

Three way handshake: 1. A ------SYN------> B 2. B ---SYN + ACK---> A 3. A ------ACK------>  B Detailed version: 1. A ------(SEQ = 100, CTL = SYN)------> B 2. B ---(SEQ=300, ACK=101, CTL=(SYN, ACK)---> A 3. A ------(ACK=301, SEQ=101, CTL=ACK)------>  B The sequence number is the byte number of the first byte of data in the TCP packet sent (also called a TCP segment). The acknowledgement number is the sequence number of the next byte the receiver expects to receive. The receiver ack'ing sequence number x acknowledges receipt of all data bytes less than (but not including) byte number x. Note: There is no such machanism in UDP, this is all based on TCP Thus the TCP handshaking is required for handshaking and flow control. src: https://www.youtube.com/watch?v=LyDqA-dAPW4 https://networkengineering.stackexchange.com/questions/24068/why-do-we-need-a-3-way- handshake-why-not-just-2-way http://www.cs.miami.edu/home/burt/learning/Cs...

Browsers support storage mechanisms such as localStorage, IndexedDB, WebSQL and FileSystem. It is a small database created on the local drive of the computer where the browser is installed. It manages user data such as cache, cookies, bookmarks and preferences.

These are all the points which can boost up your website performance. Below are just bullet points. I'll be touching each of these point every week. Stay tuned for more info. Http2 multiplexing, header compression and other features like server push Rather than showing a loader, show a rendered page(did not mean interactive). Something like server side rendering. Adding more to point 2. Push interactive state away and try to render as early as possible. Code chunks, lazy loading. Css splitting, should be route and component based. DNS resolution ?  Omitting option call. To load only useful code, rest can be loaded later when resources are free. Minify css Dns preconnect Code splitting, js and css Preloading and prefetching Image sprite using grunt Prepond API call Reduce the number of bundle JS code which can delayed, should be delayed MJS Compression: Gzip vs Brotli CDN Critical rendering CSS Service worker: Caching, prefetching Web ...

Accelerated Mobile Page (or AMP, for short) is a project from Google and Twitter designed to make really fast mobile pages. At its essence, it's basically a stripped-down form of HTML, a diet HTML Absolutely. So as Will said, it's like a diet HTML. So certain tags of HTML you just can't use. Things like forms, that are out. You also need to use a streamlined version of CSS. You can use most of CSS, but some parts are falling under best practice and they're just not allowed to be used. Then JavaScript is basically not allowed at all. You have to use an off-the-shelf JavaScript library that they provide you with, and that provides things like lazy loading And then all of this is designed to be really heavily cached so that Google can host these pages, host your actual content right there, and so they don't even need to fetch it from you anymore. Why AMPs are so pupular 1. Never stop the content In regular html parsing, an external script can halt the p...