Fatal编程技术网
  • javascript/
  • Javascript 我们如何提高性能并卸载不必要的选择器？

Javascript 我们如何提高性能并卸载不必要的选择器？

javascript css html

Javascript 我们如何提高性能并卸载不必要的选择器？,javascript,css,html,Javascript,Css,Html,不知何故，我们需要从css文件中提取特定的选择器，以获得更好的性能！例如，#javascript和#idea来自带有540个选择器的css文件。我们只需要从#html和#page调用的选择器。 有聪明的js代码吗 范例 <!DOCTYPE html> <html lang="whatever"> <head> <meta charset="utf-8"> <title>Another Page&l

不知何故，我们需要从
css
文件中提取特定的选择器，以获得更好的性能！例如，
#javascript
和
#idea
来自带有540个选择器的css文件。我们只需要从
#html
和
#page
调用的选择器。 有聪明的js代码吗

范例

<!DOCTYPE html>
<html lang="whatever">
<head>
<meta charset="utf-8">
<title>Another Page</title>
<link rel="stylesheet" href="core.css" required> <!-- Required Core Style -->
<link rel="stylesheet" href="interface-elements.css" partial> <!-- The interface -->
</head>
<body>
<!-- From interface-elements.css we need to load in browser only next elements. Even file contain 540 selectors ! -->

<!-- Let's extract just 3 selectors :
 .btn
 .title 
 .dropcap -->
<button class="btn">Do something</button>
<h1 class="title">Huh</h1>
<p><span class="dropcap">L</span>orem ipsum Bla bla bla</p>
</body>
</html>


另一页
做点什么
嗯？
同侧唇瓣唇瓣唇瓣唇瓣唇瓣唇瓣唇瓣唇瓣唇瓣唇瓣唇瓣唇瓣唇瓣唇瓣唇瓣唇瓣唇瓣唇瓣唇瓣唇瓣唇瓣唇瓣唇瓣唇瓣唇瓣唇瓣唇瓣唇瓣唇瓣
我们如何才能以更好的方式做到这一点

您有两个css文件
button.css
，其中包含核心按钮样式和
colors.css
，其中包含一组颜色。您调用html页面
，浏览器将加载所有颜色类别
danger
、
primary
、
success
等。你明白我的意思吗？

一个不必要的选择器是一个从未使用过的选择器，但是网站是动态的，所以没有程序化的方法来发现

使用chrome的插件“unusedCSS”来找出可能从未使用过的选择器。

为什么不使用IDE搜索（例如Notepadd++）检查这些，事实是一些css选择器需要更长的时间来搜索，例如具有属性和属性模式匹配的选择器，或一般同级选择器，最有效的将是id选择器和类选择器，请检查此项是的，我知道！但例如：您有两个css文件
按钮。css
包含核心按钮样式和
颜色。css
包含一组颜色。您调用html页面
，浏览器将加载所有颜色类别
danger
、
primary
、
success
等。你明白我的意思吗？@RobertAdrianBogdan，是的，我明白了，但这取决于是否可以在页面中动态添加包含新（未使用）类的新元素，否则，如果所有内容都是静态和硬编码的，则只需加载使用的样式即可，例如，通过定制的css样式表，我记得Canoo Webtests提供了有关未使用选择器的信息。我需要一个javascript脚本，用于分析css文件、分析html代码以及从现有css文件生成临时css文件，仅使用“调用的选择器”。。。并且该文件将加载到浏览器中（只是一个想法）为什么使用javascript？是否要向服务器发送有关已使用选择器的统计信息？