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 views in MySQL
view: Views in MySQL have many similarities with ...
Summary of how to use the MySQL authorization command grant
How to use the MySQL authorization command grant:...
In-depth analysis of the Tomcat server of Centos 7 system
Table of contents 1. The origin of tomcat 1. Tomc...
Implementation of Docker deployment of web projects
The previous article has installed the docker ser...
Detailed explanation of ES6 Promise usage
Table of contents What is a Promise? Usage of rej...
Example of how to modify styles via CSS variables
question How to modify CSS pseudo-class style wit...
Tutorial on installing Microsoft TrueType fonts on Ubuntu-based distributions
If you open some Microsoft documents with LibreOf...
Docker image import, export, backup and migration operations
Export: docker save -o centos.tar centos:latest #...
Install MySQL (including utf8) using Docker on Windows/Mac
Table of contents 1. Docker installation on Mac 2...
HTML Basics Must-Read - Comprehensive Understanding of CSS Style Sheets
CSS (Cascading Style Sheet) is used to beautify H...
Instructions for using the --rm option of docker run
When the Docker container exits, the file system ...
Analysis of HTTP interface testing process based on postman
I accidentally discovered a great artificial inte...
Detailed explanation of mysql record time-consuming sql example
mysql records time-consuming sql MySQL can record...
Install CentOS7 in VMware (set static IP address) and install mySql database through docker container (super detailed tutorial)
A sophomore asked me how to install and configure...
A brief discussion on the execution details of Mysql multi-table join query
First, build the case demonstration table for thi...