First, know the browser

At present, browsers are indispensable to most people. When we use computers or mobile phones, we may use browsers to search for information or check a website. Of course, it has also become the manifestation of most of our business, such as the system we develop for customers, users will open the browser on the computer/mobile phone to enter the WEBSITE for relevant business operations… . Feel familiar with the browser, but do you know it?

So, let me take you through the familiar and unfamiliar browser.

1.1 development history

  • The origin of

In 1994, Netscape Communications released Netscape 1.0, codenamed Netscape Navigator, and iterations quickly took over the browser market.

The company saw that the browser business was doing so well that it might as well try to build an operating system. Microsoft realized that Netscape was a threat to its operating system and applications market, so it immediately acquired another browser company and built Internet Explorer on top of it. Microsoft’s operating system bundled with Internet Explorer. If you think about it, if you had a Microsoft operating system and you didn’t have a browser, you had to buy a netscape browser and install it on your computer, and while Netscape was great, it was a hassle. Microsoft operating system directly with a browser, ask who is willing to spend money to buy a browser software? So Internet Explorer immediately took over the browser market. In January 1998, Netscape failed to compete with Microsoft Internet Explorer. In order to regain the market, Netscape Communications announced that all its software versions would be free, and opened the source code of Netscape browser. Mozilla was formed as an informal organization. Unfortunately, while Mozilla and Opera are good browsers, Microsoft’s operating system is so dominant that other browsers’ market share has remained unchanged. Internet Explorer sits in the first share of the first place, but has not been trying to make progress, to create a set of Web standards, and does not support HTML,javascript, CSS, the new version of the web technology features, Microsoft from IE6 to IE8 almost did nothing to the browser innovation, everyone adapted to IE. I don’t care if it’s patched, insecure, or crashes, just like browsers should be. But reality is so unpredictable that chrome came out of nowhere in 2008. Features such as a clean interface, fast loading, and data security have helped Chrome’s market share climb. When Microsoft realized that Chrome was beginning to eat into its market, it updated IE frequently, releasing IE9 in 2011, IE10 in 2012, and IE11 in 2013. Finally, the CODE of IE was too weak to adapt to the new requirements of Web technology, and a new browser called “Edge” was developed to replace IT. But chrome is still no. 1 in market share. In IE of that period of time in order to adapt to China’s IE most common sites are not accord with standard of the Internet, that is to say, if use up to the standard of the Internet browser to parse these sites, it will not display properly, IE took the top of the first visible in recent years, has been misled and obstruct the development of the Internet, sad indeed. It’s a tribute to the browser companies that continue to innovate, improve, and embrace new Web technologies, but continue to push forward despite their low market share in IE.”

“Since the emergence of Chrome browser, there have been a lot of domestic browsers, this is a later story, in fact, domestic browsers originated from Internet Explorer, a programmer named Changyou published a browser called” MyIE” on the forum in 1999, based on Internet Explorer, but using multi-window browsing, Occupying much less system resources than IE6, and there are mouse gestures, visual bookmarks and other functions, the Chinese browser MyIE2 (renamed Maxthon), the Internet (renamed GreenBrowser) and TheWorld(window of TheWorld) are completed with MyIE source code rewrite. None of these browsers are maintained by the developer of MyIE, which hasn’t been updated since version 3.2, and Changyou has disappeared. Later, Monde set up a company to run it by itself, and TheWorld was acquired by 360 and turned into 360 Security Browser.”

The above content from www.jianshu.com/p/c1c2737f1…

  • Major browser market share

Chrome is a browser launched by Google in September 2008 and has been the number one browser in just a few years with its “fast, simple and secure” features. In addition to Chrome, the current mainstream browser and IE, Firefox, Safari, Opera, domestic browsers have Roam, Window of the World, Sogou browser, 360 security browser, QQ browser, cheetah browser and so on. The following data screenshot is from gs.statcounter.com/

1.2. Working principle

  • The client interacts with the server

A three-way handshake establishes a connection, the client sends a response header, message, etc., and the server responds with a message, and four times waves the connection down

  • Process/thread

Windows, MacOS and Linux, as we know them today, are ‘multitasking’ operating systems. What is multitasking? Simply put, the operating system can run multiple tasks/programs at the same time. For example: open the code editor and browser at the same time, we can write code, while seeing the effect in the browser. Or some people like to write code while listening to music (emotional, atmospheric).

The multiple tasks and programs mentioned here are processes. In theory, an application is a process, such as opening a browser to start a browser main process

Process

Is a computer program about a data set on a running activity, is the system for resource allocation and scheduling of the basic unit, is the basis of the operating system structure. In the early process-oriented computer architecture, the process is the basic execution entity of the program. In modern thread-oriented computer architectures, processes are containers for threads. A program is a description of instructions, data and their organizational form, while a process is an entity of the program.

Threads

Is the smallest unit in which an operating system can schedule operations. In most cases, it is contained within a process and is the actual operational unit of the process. A thread is a single sequential flow of control in a process, and multiple threads can be concurrent in a process, each performing a different task in parallel. In Unix System V and SunOS, they are also referred to as Lightweight processes, but more commonly referred to as kernel threads, while user threads are referred to as threads.

Threads are the basic unit of independent scheduling and dispatch. Threads Kernel threads that can be scheduled for the operating system kernel, such as Win32 threads; User threads scheduled by user processes, such as POSIX threads on Linux. Or it can be mixed by the kernel and user processes, such as Windows 7 threads.

  • Chrome

The Chrome Browser we commonly use includes one main Browser process, one GPU process, one NetWork process, multiple rendering processes and multiple plug-in processes.

  • Use the same browser process

We define the same site as the root domain (for example: xx.che300.com) plus the protocol (for example: https:// or http://), plus all the subdomains and different ports under the root domain, as shown below:

https://xx.che300.com
https://xx.che300.com/bi
Copy the code

They all belong to the same site because their protocol is HTTPS and the root domain name is xx.che300.com. Chrome’s default strategy is one render process per TAB. However, if a new page is opened from one page and belongs to the same site as the current page, the new page will reuse the parent page’s rendering process. Officially, this default policy is called process-per-site-instance. If you use the right button to open links in a new TAB, the same process will not be used even on the same site.

1.3. Rendering process

FAQ: What happens when you enter an address in the browser’s address bar and render the entire page?

You need to understand that the browser renders a page before it loads: HTML, CSS, JavaScript files

When users enter content in the address bar of the browser, the browser engine will first identify whether the content is a URL. If not, the browser search engine will be called for information search. Otherwise, the following process will be performed:

  • DNS domain name resolution: If the entered IP address is a domain name, the DNS is resolved to the real IP address of the server

Check the local cache. -> If the cache does not exist, the search is performed iterated. DNS The root server is responsible The IP address is written to the local cache at the same time

  • Establish A TCP connection: Establish a TCP connection with the three-way handshake. If the packet with ACK is returned, the connection is successful

First handshake: The client sends a SYN packet (seq= X) to the server and enters the SYN_SEND state for confirmation. Second handshake: After receiving a SYN packet, the server must acknowledge the client’s SYN(ACK = X +1) and send a SYN packet (SEq = Y). In this case, the server enters the SYN_RECV state. Third handshake: After receiving the SYN+ACK packet from the server, the client sends an ACK packet (ACK = Y +1) to the server. After the packet is sent, the client and the server enter the ESTABLISHED state to complete the three-way handshake

  • Sending an HTTP request: Sends a request to the server after completing a TCP connection

  • Server processing request: After receiving the request, the server side processes it

  • Return response result: Returns response information to the client

  • Closing the TCP connection: Close the TCP connection four times to avoid wasting resources on the server and client

First wave: The active closing party sends a FIN to shut down the data transmission from the active to the passive closing party, that is, the active closing party tells the passive closing party: I will not send you any more data (of course, the active closing party will resend the data sent before the FIN packet if it does not receive the corresponding ACK message), but the active closing party can still accept the data at this time. Second wave: After receiving a FIN packet, the passive closing party sends an ACK with the received sequence number +1(the same as SYN, one FIN occupies one sequence number). Third wave: The passive closing party sends a FIN to close the data transfer from the passive closing party to the active closing party, which tells the active closing party that MY data has also been sent and I will not send you any more data. Fourth wave: After the active closing party receives the FIN, it sends an ACK to the passive closing party and confirms that the serial number is +1. Thus, the four waves are completed.

  • Parsing HTML generates DOM

  • Parsing CSS generates CSSOM

  • Combine DOM and CSSOM into a render tree

  • Layout: Calculate their exact position and size in the device viewport according to the render tree (Reflow)

  • Painting: Get the pixels of nodes based on the geometry of the rendered tree and layout (Repaint)

  • The synthesized information is displayed on the interface

1.4. Rendering mechanism

  • A complete process of TCP connection, data transfer, and then closure:

  • GUI rendering process

Graphical User Interface (GUI) is a Graphical User Interface that displays the web page provided by the browser.

The page is rendered at least once during generation, and backflow (rearrangement) and redraw are constantly triggered as the user visits it. Either trigger affects browser performance. But in general, backflow (rearrangement) will have a bigger impact.

Backflow (rearrangement) : When the size, position, etc. of the elements change, the geometry information needs to be recalculated. The page is rearranged and the elements are reordered according to the geometry information

Redraw: Elements are redrawn when changing their appearance styles, such as font colors, background colors, and other styles that do not require recalculation of geometric information

Note: Redrawing does not necessarily cause backflow, but backflow does cause redrawing.

Second, browser security

2.1. Same-origin Policy: Why can’t XMLHttpRequest request resources across domains?

Two urls are said to be homologous if they share the same protocol, domain name, and port.

Modify the DOM of another page by running scripts on one page (the second page must be opened from the first)

let pdom = opener.document;
pdom.body.style.display = 'none';
Copy the code

Note: Opener is the window object pointing to the first page. We can control the DOM in the first page by manipulating opener.

The Web world is open and can access any resources. The same origin policy requires that all resources on a page come from the same source, that is, all HTML files, JavaScript files, CSS files, images and other resources on the page are deployed on the same server, which undoubtedly violates the original intention of the Web. It also brings limitations.

Developers found in normal request interface console reminds us that http://127.0.0.1:7071/api/admin/userLogin interface was blocked by the CORS strategy:

Browsers allow access to resources of the same origin, but do not allow access to resources of different sources by default, that is, cross-domain.

If different resources are deployed on the server to access different domain names, you need to break the security policy set by the browser. You need to open the same origin policy to reference resources on the page, and let them arbitrarily reference external files. To solve similar problems, cross-domain resource sharing and cross-document messaging mechanisms are introduced.

2.2. XSS: Why is there an HttpOnly attribute in cookies?

The Cross Site Scripting (XSS) attack, also called cross-site Scripting attack, refers to a method by which hackers inject malicious scripts into HTML files or DOM to attack users when they browse.

There are three main defense strategies against these XSS attacks:

  • Filtering the input content through the server or transcoding The server transcodes some key characters, and the transcoding script cannot be executed.

  • Implementing a strict CSP can effectively defend against XSS attacks

    Restrict the loading of resource files in other domains, so that even if a hacker inserts a JavaScript file, the JavaScript file cannot be loaded. Prohibit the submission of data to a third-party domain, so that user data is not leaked. Prohibit the execution of inline scripts and unauthorized scripts. This will help us identify XSS attacks as quickly as possible so that we can fix the problem as quickly as possible

  • HttpOnly protects important Cookies information

XSS is generally used to attack the data in cookies, so we can protect the security of our cookies by using the HttpOnly attribute. Using HttpOnly indicates that cookies can only be used during HTTP requests. So you can’t read this Cookie in JavaScript.

2.3 CSRF: Do not click on strange links

Cross-site Request Forgery (CSRF) attack, also called cross-site request forgery, means that a hacker induces a user to open a hacker’s website and initiates a cross-site request based on the user’s login status. Simply put, a CSRF attack is when a hacker takes advantage of a user’s login status and uses a third party’s site to do something bad.

Often do network security students remind: do not click on strange website links, be careful of viruses. But why is it possible to get a virus after clicking the link

2.4 security sandbox: The wall between the page and the system

Because of the rendering process need to perform parsing, DOM parsing, CSS image decoding operations such as network, if system level loopholes exist in the rendering process, the user’s operation could allow malicious sites to obtain control permissions to render the process, in turn get control of the operating system permissions, hackers can use these actions to contain loopholes browser attack. This creates a wall between the renderer process and the operating system. Even if the renderer process is hacked due to a bug, the hacker cannot gain access to anything outside the renderer process because of this wall. The wall that separates the rendering process from the operating system is called the security sandbox.

  • The Browsing is Safe

  • Your connection is not private

2.5. HTTPS: Make data transfer more secure

Browser security is mainly divided into three parts: page security, system security and network security.

HTTP was originally designed simply to transmit hypertext files. At that time, there was no strong need to encrypt data, so HTTP has always maintained the characteristics of plaintext data transmission. But at every point in the process, data could be stolen or tampered with, which means there could be a middleman between you and the server who controls everything you communicate with.

HTTPS is not a new protocol. It introduces a security layer (SSL/TLS) into the HTTP protocol stack. All data is encrypted and decrypted. Usually HTTP communicates directly with TCP, whereas HTTPS communicates first with the security layer, and then the security layer communicates with TCP. That is, all of HTTPS’s security core is in the security layer, which does not affect HTTP or TCP/IP, so to understand how HTTPS works, you need to understand how the security layer works.

In general, the security layer has two main responsibilities: encrypting the data that initiates HTTP requests and decrypting the content that receives HTTP.

The corresponding encryption schemes are as follows:

Symmetric encryption Asymmetric encryption Symmetric encryption works with asymmetric encryption Add a digital certificate… .

There’s still a lot to learn about HTTPS security, but I’m not going to teach you anything here, because I know a lot about it.

3. Understand performance optimization

3.1. What is front-end performance optimization

In the process from the user’s beginning to visit the website to the complete display of the whole page, through a variety of optimization strategies and optimization methods, so that the page load faster, so that the user’s operation is more timely, to give the user a better use experience.

3.2 Significance (user perspective)

  • There is one important skill you need to have in order to qualify as a developerBe able to think about page performance from a user experience perspective

The page load time, the user interaction feedback time, the number of frames in the Web animation all determine the smoothness of the user experience, and ultimately the user experience.

When a user requests a website, if the key content is not seen within a second, the user will feel that the task has been interrupted.

When the user clicks certain buttons, if there is no response within 100ms, the user will experience latency.

If the animation on the Web does not reach 60fps, the user will experience animation lag.

3.3 Importance (development perspective)

  • Why is it so slow to access this page

  • Improve user experience

Front-end engineering, including compilation, packaging, release process and componentization, focuses on improving efficiency, while performance optimization focuses on user experience.

Front-end framework: Plugin (jQuery) -> RequireJS -> React

Build tools: Task (Grunt /gulp) -> Systematization (Webpack)

CI/CD: Instrumented (Jenkins) -> Automated (Web Hook)

Performance optimization: As a front-end development, it may be necessary to develop features for interaction and optimize page rendering from the user’s perspective

Online monitoring: capture the abnormal situation in the user access process, repair and optimize accordingly

  • Self-development -> What are your core competencies?

When asked what your core competence is when you are promoted, the answer is that in addition to technical depth, front-end engineering, and comprehensive quality, you can also add a performance optimization, after all, it may run through the whole process of development and maintenance.

Fourth, the process of performance optimization

4.1 analysis tools

4.4.1, Chrome DevTools

You can use the built-in browser tool or access the Performance monitoring SDK (that is, configuring Performance) to analyze the page Performance indicators, extract the required indicator values, generate a page report, analyze the report page, and find out the Performance bottlenecks.

The front-end group developed the SDK and system management monitoring platform related to front-end monitoring

4.1.2, LightHouse

You need to install the Lighthouse extension, which you can see in your browser’s developer tools, analyzing the page and generating reports, metrics scores, and recommendations for improvements

4.1.3, PageSpeed

You need to install the PageSpeed Insights extension to analyze pages and generate reports that provide time spent, recommendations, and related breakdown for individual metrics.

4.1.4, webpack – bundle – analyzer

Analyze the resource size and internal modules and plug-ins of front-end project after package.

4.1.5、WebPageTest …

There are more tools, such as WebPageTest, etc.

4.2 Performance indicators

  • hang

    This is the time between the user entering the url and the browser starting to display the content

  • The first screen

    It is the time from the time the browser responds to the user’s input to the time the first screen content is rendered

  • Fully loaded

    Also known as page load, refers to the time when the page load is complete

  • interactive

    It is the time from the time when the browser starts to request the user to the time when the user can normally enter events

  • Resource to load

    The time when resources on the page have finished loading

4.3 optimization scheme

Analysis tools and metrics mentioned above can get some optimization click suggestions, you think performance optimization is so? In actual projects, there are far more optimizable points, so what can be wrong with the so-called performance optimization?

4.3.1 File compression

  • Code compression

Officially online code, no special circumstances need to be compressed, to ensure proper file size.

  • Tree-shaking

In order to improve the efficiency of the front-end implementation of engineering packaging deployment, so if there are some unused code or modules in the project can be removed directly? The answer is yes:

The new version of WebPack extends the detection capability by configuring properties to remove unused code at packaging time

  • Code-splitting

Code split (code split), usually (single page application) the front end of the packaged code will generate an HTML, CSS, JS file. To join the project components, modules, is more, so js, certainly will will be packaged, the longer the single load time, waiting time is longer, the user experience is the worse, then introduced the concept of code separation, which is in accordance with the module (routing) packaged into a file, at the same time go out repeated introduction part of the module, Dynamic import (route loading on demand) is implemented during page loading, so that the waiting time for page initialization is not too long.

4.3.2 Image optimization

  • Small picture optimization, picture format selection

Using CSS Sprite, IconFONT, dataURI, SVG, etc

  • The compressed image

Compress the image size (try to reduce the image size under the premise of ensuring the quality), you can use code compression, online tools (Tinypng), etc.

  • Responsive picture

By setting the srcset attributes of the img tags, details refer to www.ruanyifeng.com/blog/2019/0… :

4.3.3 loading policy

  • Lazy loading

Lazy loading (lazy loading) is a strategy for identifying resources as non-blocking (non-critical) and loading them only when needed. This is a way to shorten the length of critical render paths, which can shorten page load times.

  • DNS preresolution, preloading, and prerendering

  • Offline (ServiceWorker, AppCache, offline package, etc.)

  • HTTP cache

  • Data cache (localStorage, sessionStorage)

  • Resource loading (sequence, location, asynchrony, etc.)

  • Request to merge

  • HTTP2

  • CDN

  • Server side rendering

4.3.4 Perform rendering

  • CSS code optimization (selectors, enabling Gpus, avoiding expressions, etc.)
  • JS code optimization and evaluation

4.3.5 Optimization of sensory experience

  • Skeleton screen (Skeleton)

  • Loading

The first two are used to avoid page blank before the page is fully loaded. Skeleton screen /Loading can be used instead of display to provide visual experience.

  • SPA(Single page application)

With the development of front-end engineering, many projects adopt SPA mode, which adopts the method of code segmentation and timely loading on demand according to the size of bundles.

  • Snapshot(backup)

Pay attention to the data at the same time to ensure the user’s sense of body, such as interface cache, HTML cache and so on

The above is just some small understanding and opinion in my study and work. This article is only for browser related knowledge to do a brief, in fact, there are a lot of detailed knowledge points waiting for everyone to learn summary, welcome to give advice, thank you.

Nanjing 300 Cloud Information Technology Co., LTD. (CHE 300) was founded on March 27, 2014. It is a mobile Internet enterprise rooted in Nanjing and currently located in Nanjing and Beijing. After 7 years of accumulation, the cumulative number of valuation has reached 5.2 billion times, and won the favor of many high-quality investment institutions at home and abroad, such as Sequoia Capital, SAIC Industry Fund. 300 Cloud is an outstanding domestic auto transaction and financial SaaS service provider with independent third party relying on artificial intelligence and standardization of auto transaction pricing and auto financial risk control as its core products.

Welcome to join 300 cloud, witness the booming development of the automobile industry together, look forward to walking with you hand in hand! Java development, Java internship, PHP internship, testing, testing, product manager, big data, algorithm internship, hot recruitment… Official website: www.sanbaiyun.com/ Resume: [email protected], please note from nuggets 😁