Why do you need to do browser compatibility? –The role of the rendering engine in the browser
- Web browser architecture
User Interface: user interface. It enables end users to interact with all visual elements on the interface.
Browser Engine: Browser engine. It is the core component of the browser engine and acts as an intermediary between the user interface and the rendering engine. It queries and processes the rendering engine according to the input commands received from the user interface.
Rendering Engine: Rendering Engine. Responsible for presenting specific web pages requested by users on their screens. Each browser has its own unique rendering engine. For different browser versions, the rendering engine may be different.
Networking: Network. This component is responsible for managing network calls using standard protocols (Http or FTP), and is responsible for handling security issues related to Internet communications.
JavaScript Interpreter: JS interpreter. It is responsible for parsing and executing the JS code embedded in the website, generating the result, forwarding it to the rendering engine, and displaying it in the user interface.
UI Backend: UI backend. The user draws basic widgets (windows and combo boxes).
Data Storage / Persistence: Data storage / persistence. The web browser needs to store various types of data locally, such as cookies, so the browser must be compatible with data storage mechanisms such as WebSQL, IndexedDB, and FileSystem. - What is the role of the rendering engine?
When the user requests a specific document, the rendering engine starts to obtain the content of the requested document, which is done through the network layer. The rendering engine starts to receive the content of a specific document in units of 8kb from the network layer. The following is the basic flow of the rendering engine:
(1) The rendering engine parses the HTML page (including CSS files and style elements) in the form of blocks, and then converts the HTML elements into DOM nodes to form a "content tree" or "DOM tree".
(2) Build a Render tree. The tree includes style information and visual instructions that define the display order of elements to ensure that the content is displayed in the desired order.
(3) Layout process The process of calculating the coordinate values of nodes. In this process, each node is assigned with exact coordinates, which can ensure that each node appears in a precise position on the screen.
(4) Draw the screen. Using the paint () method in the renderer, use the UI backend layer to draw each node on the screen.
As mentioned earlier, each browser has its own unique rendering engine. So relatively, each browser has its own way to interpret the web page on the user's screen. For web developers, there is a challenge regarding the cross-browser compatibility of their websites.
Cross browser testing Cross browser testing
is a quality assurance method used to verify the consistency of web applications in terms of functionality and design across multiple browsers. These tests enable the QA team to explore any issues through responsive design tests, which may occur when their website passesDifferent browsersorBrowser versionWhen visiting.
Browser kernel classification
- Trident [IE core]: IE
- Webkit：Safari
- Gecko：Firefox
- Blink: chrome (formerly Webkit, now Blink, becoming the chrome kernel), Opera
fork on Webkit - Trident + Webkit: Sogo, 360, qq, Baidu, Aoyou, etc.
Browser types: single-core browser, dual-core browser – reproduced at https://blog.csdn.net/zhiyuan411/article/details/89098539 - Dual-core browser speed mode (Webkit core) + compatibility mode (Trident core)
Webkit core is lightweight, efficient and fast; Trident core has very good compatibility performance in various situations such as online banking
(1) The default speed is faster The Webkit core has compatibility issues and allows users to manually switch to the Trident core.
(2) For special websites such as online banking and Alipay, dual-core browsers generally adopt intelligent switching technology, that is, when these sites are detected, they will automatically switch to compatibility mode
(3) When implementing the WebKit core, for example: after the chrome kernel is upgraded, The dual-core browser must obtain the chrome kernel source code, recompile and test its browser, and then upgrade the dual-core browser itself to upgrade the chrome kernel. Due to the excessive time and labor cost of synchronous update, there is a large time difference between the general dual-core browser and the latest version of chrome. The WebKit core version of the dual-core browser is much older
(realizing Trident At the core, the dual-core browser uses the webcontrol control of the Microsoft operating system as the core (the IE browser itself also uses the webcontrol control as the core), so when the system's IE is upgraded or an update patch is applied, the dual-core browser will automatically have In addition to these security protections or performance optimizations, the compatibility mode and IE of the dual-core browser have a greater degree of consistency. In
summary, for domestic browsers, priority and focus should be given to ensuring the test regression in the speed mode.
Mobile browser
How to test browser compatibility?
- Specify the user group targeted by the product, their behaviors, etc.
- Feedback question statistics
- other
