Page Refactoring Skills - Javascript, CSS
About JS, CSSCSS:
JS:
1. Why is the style sheet pinned to the top?The browser renders the page from top to bottom. When encountering <link> or <style> in <body>, it will block the rendering of the page and may also cause the page to be redrawn . It is like a grid shop where everything is laid out in order, but the boss says that this thing needs to be arranged this way or that way, so they have to be rearranged one by one. In addition, it is added to the <head> so that the required styles can be loaded sequentially . 2. Avoid CSS expressions. Why?Many people, including me, when learning about CSS expressions, say to avoid or not use it, so we are lazy and don’t read it, including eval in JS... Later, I happened to use it once in a project, and the result was. . . It became the last bug found. . . (IE6 affects the page style) In fact, the main disadvantage of CSS expressions is that they affect performance. You should know that CSS is time-sensitive, that is, when you modify the style, it will take effect immediately. Changing the window size, scrolling the page, or even moving the mouse will trigger frequent evaluation of the expression, which will have a serious impact, so try to avoid it. 3. Use external JS and CSS, Why?We all know that using external files will increase HTTP requests, but due to caching, when users visit again, or access the same files in other pages, the page will significantly improve the response speed. In addition, another benefit is that external JSS and CSS can reduce the document size within the page. 4. Reduce JS and CSS. Why?This goes without saying...why do you think so? 5. Use <link>, @import, Why?Let’s first look at the difference between the two: Difference 1: The difference between ancestors. @import is a method completely provided by CSS. Link is an XHTML tag. In addition to loading CSS, it can also define other things such as RSS. @import belongs to the CSS category and can only load CSS. Difference 2: Difference in loading order. When link references CSS, it is loaded at the same time as the page is loaded; @import requires the page to be fully loaded before loading. Difference 3: Difference in compatibility. Link is an XHTML tag and has no compatibility issues; @import was proposed in CSS2.1 and is not supported by lower version browsers. Difference 4: Difference when using DOM to control styles. link supports using Javascript to control DOM to change styles; while @import does not support it. Compared with the two, @import is obviously weaker... 6. Avoid using filters. Why? The IE-specific property AlphaImageLoader is used to correct the semi-transparent effect of PNG images displayed in versions below 7.0. The problem with this filter is that it stops rendering the content and freezes the browser while it loads the image. It is calculated once for each element (not just images), which increases memory usage, so its problems are multifaceted. 7. The script is placed at the bottom. Why?The problem with the script is that when the browser encounters <script> during rendering, it will go to download and then execute the JS inside. During this period, the page will be blocked and wait until it is finished before continuing to execute. Therefore, in order to present the page to the user as quickly as possible, JS should be placed above </body>. 8. Reduce access and operation of DOM, Why?Visit: In "High Performance JavaScript", there is such a metaphor: "Think of DOM as an island and JS as another island, connected by a toll bridge." Operation: Modifying and accessing DOM elements will cause the page to be repainted and reflowed, that is, redrawn and refluxed. So the problem is obvious. Solution : Cache the elements that have been visited After updating the nodes, add them to the document tree at once 9. Event delegation, why?Event delegation, that is, using the event bubbling mechanism, binds the event to the parent element of the element object. For example: a multi-row table with a row prompt effect, and the table will change with the page break. Analysis: Given item 7 above, we cannot sacrifice performance to bind events for each changed row element. Solution: Bind the event to the parent element of the table and perform the operation based on the node type of e.target (e.secElement) |
<<: Detailed process of building mongodb and mysql with docker-compose
>>: HTML vertical column display text to make the text display in vertical columns
Recommend
Specific use of Linux which command
We often want to find a file in Linux, but we don...
Solution to slow response of Tomcat server
1. Analytical thinking 1. Eliminate the machine&#...
HTML fixed title column, title header table specific implementation code
Copy code The code is as follows: <!DOCTYPE ht...
Getting Started with Front-End Vue Unit Testing
Table of contents 1. Why do we need unit testing?...
Five practical tips for web form design
1. Mobile selection of form text input: In the te...
Detailed explanation of Vue slot
1. Function : Allows the parent component to inse...
A troubleshooting experience of centos Docker bridge mode unable to access the host Redis service
background: I have done a project before, which r...
CSS makes the footer automatically stick to the bottom when the content height is not enough
In the UI cutting process, the page is often comp...
Solution to 1045 error when navicat connects to mysql
When connecting to the local database, navicat fo...
Apply provide and inject to refresh Vue page method
Table of contents Method 1: Call the function dir...
Solution to index failure in MySQL due to different field character sets
What is an index? Why create an index? Indexes ar...
How to change the root password in a container using Docker
1. Use the following command to set the ssh passw...
Detailed explanation of HTML's <input> tag and how to disable it
Definition and Usage The <input> tag is use...
Understanding of web design layout
<br />A contradiction arises. In small works...
Two ways to connect WeChat mini program to Tencent Maps
I've been writing a WeChat applet recently an...