• The Web Almanac Mega Study Reveals That Popular Front End Frameworks Are Still a Small Part of the Web
  • Bruno Couriol
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: felixliao
  • Proofread by: Hoarfroster, Chor

The web Almanac’s big study shows that popular front-end frameworks are still a small part of the Web

HTTP Archive has recently completed the web Yearbook 2020, an annual report on the state of the web. From 22 chapters and 600 pages in four sections (page content, user experience, content publishing and distribution), the report concludes that jQuery usage is still up to 80%; CSS Houdini is rarely used; The median size of JavaScript sent by websites in 2020 was 400 KB, 14% more than in 2019. And there are more.

The CSS section highlights that the adoption of new features or proposals to enrich the CSS standard may be delayed:

Overall, we observe that the adoption of CSS on the Internet is at two different levels. We tend to talk about the latest and brightest things in our blogs and tweets, but there are still thousands of sites that use code that is ten years old. … While we observe high adoption rates for many new features — even those that only gained widespread support this year, such as min() and Max ()… But overall, there’s an inverse relationship between how cool something is and how widely it’s used; Advanced Houdini features, for example, almost don’t exist. … In practice, most CSS is simple to use.

The CSS section also points out that the median size of CSS files is around 60 KB and basically contains more than 400 rules and 5,000 declarations. Most websites now use Flexbox layouts (around 60% in 2020 compared to 40% in 2019). CSS display: Grid usage has improved (doubling from 2019), but remains extremely niche (only 5% of websites use it). Transitions and animations are used extensively, with over 80% of pages containing transition properties and over 70% containing animation properties. Visual effects (blend mode, image filters, clipping paths) are very popular CSS features: 80% of pages use CSS filters; The percentage of pages using hybrid mode doubled from last year, with 13 percent using it.

In contrast, only 2% of websites use csS-in-JS methods, despite widespread discussion in the developer community. CSS Houdini is used in only a tiny percentage of web pages. The report says:

The CSS Painting API is a widely implemented Houdini specification that allows developers to create custom CSS functions that return values, such as implementing custom gradiens or patterns. However, we found only 12 pages using paint() and each working set name (Hexagon, ruler, Lozenge, image-cross, Grid, dashed-Line, Ripple) appears only once on each page. From this point of view, the only practical examples are likely to be demos. As another Houdini specification, Typed OM allows structured numeric values to be accessed instead of strings in traditional CSS OM. It has a significantly higher adoption rate than other Houdini specifications, although it is still low compared to the overall Houdini specification. It was adopted by 9,846 desktop sites (0.18%) and 6,391 mobile sites (0.1%).

The JavaScript section of the report reports that the volume of JavaScript loaded on pages increased by about 14%, with a median of around 400 KB of JavaScript loaded. The report notes that pages for desktop and mobile have similar JavaScript volumes, but the network and performance handling is very different. Meanwhile, the median percentage of unused JavaScript code on the site is 37%. The report reads:

Depending on your point of view, you can probably shrug off the subtle difference in the size of code sent to desktop and mobile — after all, what’s a difference of 30 kilobytes between the median, right? The median data for the desktop site shows that it took 891 milliseconds to process JavaScript on the browser’s main process. However, the median amount of data from mobile sites was 1,987 milliseconds — more than double the time spent on the desktop. This is even worse on the underlying pages. At the 90th percentile of the data, the mobile site takes 8,921 milliseconds to process the main process’s JavaScript, compared to 3,838 milliseconds for the desktop site.

On the plus side, Resource Hints can offset some of the web costs of loading JavaScript, with nearly 17% of pages using the technology, mostly from Preload.

The section on third parties in the report analyzes the existence, distribution, and impact of third party scripts and highlights the importance of managing them:

Ad-related requests seem to have a negative impact on CPU time. In terms of median data comparison, pages with AD scripts took three times as much CPU time as pages without scripts.

Developers can read the full report online in four languages. HTTP Archive took more than five months to compile the Web yearbook, with hundreds of contributors collecting data from millions of web pages. HTTP Archive evaluates the composition of millions of web pages each month and exposes terabytes of metadata for analysis on BigQuery.

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.