Browse Prior Art Database

Automatic Shortening CSS Selectors for Web Application Performance Enhancement

IP.com Disclosure Number: IPCOM000236639D
Publication Date: 2014-May-07

Publishing Venue

The IP.com Prior Art Database

Abstract

The key idea is that shortened CSS selector matches the same nodes as the original version does. CSS selector may have various short versions based on HTML DOM tree in different Web application, manually refinement for each web application is very time cost and unrealistic. So an automotive method to do CSS selector refinement can be really helpful.

This text was extracted from a PDF file.
This is the abbreviated version, containing approximately 39% of the total text.

Page 01 of 10

Automatic Shortening CSS Selectors for Web Application Performance Enhancement

Web application has became larger and more complex, there are thousand of HTML nodes ,and thousands Cascade Style S heet(CSS) rules applied on them. CSS and HTML nodes constructed a web page, and defined how the web page look and feel.

For CSS, the one factor that causes the most performance lags are selectors . Selectors are the statements that specify to which HTML nodes a given set of CSS styles will apply. Inefficient CSS selectors will increase page rendering time, especially on some old browsers.

Manually refine CSS selector can take a lot of efforts, and the refinement has to be updated once page updated . In most case, the gained performance enhancement doesn't worth the effort. So CSS selector refinement usually be ignored in Web application optimization, it's due to lacking an automotive method for the refinement.

Browser read CSS selector from right-to-left, the following steps show how does CSS selector match nodes:

div.nav ul li a[title]


1. Scan all HTML nodes, get node group "A" with "title" attribute

2. Filter group "A", get node group "B"

3. Scan for

  • in ascendant of nodes in group "B", till the root node, get group "C"

    4. Scan for

      in ascendant of nodes in group "C", till the root node, get group "D"

      5. Scan for

      with "nav" class in ascendant of nodes in group "D", till the root node, get group "E"


      6. Nodes in group "E" is the style will be applied on.

      And factors below will make CSS selector take more time for the matching:


      1. Deep HTML DOM tree

      2. Large size of HTML nodes
      3. Unused CSS selector

      1


      Page 02 of 10


      4. Long CSS selector

      And there are existed tools to remove unused CSS selector(Resolved #3). Here in the disclosure, we propose a automotive method to shorten CSS selector by removing its unnecessary parts(to Resolve #4).

      The key idea is that shortened CSS selector matches the same nodes as the original version does . CSS selector may have various short versions based on HTML DOM tree in different Web application , manually refinement for each web application is very time cost and unrealistic. So an automotive method to do CSS selector refinement can be really helpful .

      1 Demonstrations of CSS selector shortening

      Following CSS selector have short versions based on different HTML DOM tree. The shortened selector matches the same node as the original selector does, and because it's short, it take less time to match the nodes.

      Graph1: DOM tree with 1 node applied "classC"

      2


      Page 03 of 10

      .classA .classB .classC >>>>>> .classC

      Graph2: DOM tree with 1 node applied class B, in the ascendants of nodes with classC applied

      3


      Page 04 of 10

      .classA .classB .classC >>>>>> .classB .classC

      Graph3: DOM tree, same quantity of nodes applied classC and node applied with classB in the ascendants

      4


      Page 05 of 10

      .classA .classB .classC >>>>>> .classA .classC


      2 Process of CSS selector shortening, without priority order changing

      5


      Page 06 of 10

      Here's...