Shulou(Shulou.com)06/03 Report--

This article mainly introduces Javascript, CSS implementation page restructuring needs to pay attention to what, the article is very detailed, has a certain reference value, interested friends must read!

About JS、CSS

CSS：

Style sheet at top

Avoid CSS expressions

Use external JS, CSS

Cut JS, CSS

，@import

Avoid filters

JS：

Script at bottom

Use external JS, CSS

Cut JS, CSS

No need to repeat scripts

Reduce access and manipulation of DOM

event delegate

1. Style sheet at the top, Why?

Browser rendering pages are top-down rendering, when encountered or when the rendering page will block, but also may cause the page to redraw, just like the grid shop, things are arranged in order, but the boss said, this thing has to be placed this way, that way, and have to be re-placed one by one. In addition to this, it is added so that the desired styles can be loaded sequentially.

Avoid CSS expressions, Why?

Many people, including me, when learning CSS expressions, say avoid or don't use it, so lazy don't look at it, including eval in JS.

Later, there was a project I used just once, and as a result... It became the last BUG to be detected... (IE6 affects page style)

In fact, the main drawback 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 seriously affect it, so try to avoid it.

3. Use external JS, CSS, Why?

We all know that using external files will increase HTTP requests, but due to caching, when users visit again, or visit the same file in other pages, the page will obviously improve the response speed, and there is also a benefit that external JSS and CSS can reduce the document size within the page.

Cut JS, CSS, Why?

Needless to say…why?

5,@import, Why?

Let's look at the difference between the two:

Difference 1: The difference of ancestors.@ import is entirely a way provided by CSS, link is an XHTML tag, in addition to loading CSS, you can also define RSS and other transactions;@import belongs to the CSS category, can only load CSS.

Difference 2: The difference in loading order. link CSS references are loaded when the page is loaded;@import requires the page to be loaded after it is fully loaded.

Difference 3: Difference in compatibility. link is an XHTML tag with no compatibility issues;@import is introduced in CSS 2.1 and is not supported by older browsers.

Difference 4: Differences when using dom to control styles. link supports using Javascript to control DOM to change styles;@import does not.

Comparing the two,@import is obviously weak…

Avoid filters, Why?

The IE unique property AlphaImageLoader fixes the translucency effect of PNG images displayed in versions below 7.0. The problem with this filter is that it stops rendering content and freezes the browser when it loads images. It does this once for every element (not just images), increasing memory overhead, so its problems are manifold.

The best way to avoid AlphaImageLoader altogether is to use the PNG8 format instead, which works well in IE. If you do need to use AlphaImageLoader, use underscore_filter to disable it for users of IE 7 and above.

7. The script is at the bottom, Why?

The problem with scripts is that when the browser is rendering, it will run to download and then execute JS inside, during which the page will block and wait until it is finished before continuing down. Therefore, in order to render the page to the user as quickly as possible, JS should be placed on top of.

8. Reduce visits, manipulate DOM, Why?

Visit: In High Performance JavaScript, this analogy is used: "Think of DOM as an island and JS as another island, connected by a toll bridge."

Action: Modifying and accessing DOM elements causes page Repaint and Reflow, i.e., redraw and reflow.

So the problem is obvious.

Solution: Cache related elements that have already been accessed

After updating nodes, add them to the document tree at once

9. Event delegation, Why?

Event delegation, that is, the use of event bubbling mechanism, binding events to the parent element of the element object.

For example: a multi-row table with a row cue effect, and the table will change as the page breaks through the rows.

Analysis: Given item 7 above, we cannot sacrifice performance to bind events for each changing row element.

Solution: bind the event to the parent element of table, and perform the operation according to the node type judgment of e.target(e.secElement)

The above is "Javascript, CSS page refactoring needs to pay attention to what" all the content of this article, thank you for reading! Hope to share the content to help everyone, more relevant knowledge, welcome to pay attention to the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.