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
Detailed explanation of non-primary key column overflow monitoring in MySQL tables
Today, I fell into the trap again. I have encount...
How to connect a Linux virtual machine to WiFi
In life, the Internet is everywhere. We can play ...
HTML elements (tags) and their usage
a : Indicates the starting or destination positio...
Detailed explanation of CocosCreator MVC architecture
Overview This article will introduce the MVC arch...
Detailed tutorial on installing harbor private warehouse using docker compose
Overview What is harbor? The English word means: ...
Detailed explanation of the solution to docker-compose being too slow
There is only one solution, that is to change the...
Several skills you must know when making web pages
1. z-index is invalid in IE6. In CSS, the z-index...
Detailed explanation of how to use JS to achieve the effect of PS eraser scratch card in canvas
Table of contents Effect demonstration:Main JS co...
Website background music implementation method
For individual webmasters, how to make their websi...
js precise calculation
var numA = 0.1; var numB = 0.2; alert( numA + num...
Vue+webrtc (Tencent Cloud) practice of implementing live broadcast function
Table of contents 1. Live broadcast effect 2. Ste...
Summary of considerations for writing web front-end code
1. It is best to add a sentence like this before t...
Difference between varchar and char types in MySQL
Table of contents aforementioned VARCHAR Type VAR...
Nginx uses Lua+Redis to dynamically block IP
1. Background In our daily website maintenance, w...
33 ice and snow fonts recommended for download (personal and commercial)
01 Winter Flakes (Individual only) 02 Snowtop Cap...