js压缩CSS样式代码的方法
2023-06-13 09:17:08 时间
在前端网页的优化中,压缩CSS文件可以减小CSS文件的体积,用来加快前端网页的加载速度,减少用户的等待时间,也是SEO中必不可少的。虽然说压缩CSS文件是在服务器端完成的,但利用js代码也可以在web前端进行CSS代码的压缩!
js压缩CSS样式代码的方法
js代码
复制
<script>
var css = 'CSS代码'; //格压缩的CSS代码
css = css.replace(/\/\*(.|\n)*?\*\//g, ""); //删除注释
css = css.replace(/\s*([\{\}\:\;\,])\s*/g, "$1");
css = css.replace(/\,[\s\.\#\d]*\{/g, "{"); //容错处理
css = css.replace(/;\s*;/g, ";"); //清除连续分号
css = css.match(/^\s*(\S+(\s+\S+)*)\s*$/); //去掉首尾空白
ycss = css == null ? "" : css[1];
console.log(ycss); //压缩后的CSS代码
</script>
js简单压缩CSS样式代码的小工具
下面是一个简单的压缩CSS代码的web页面小工具,将代码复制到本地保存成html网页运行即可!
复制
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<textarea id="css" style="width:500px;height: 200px;"></textarea>
<button id="yasuo">压缩</button>
<script>
$('#yasuo').on('click',function(){
$('#css').val(compress_Css($('#css').val()));
});
function compress_Css(s) {
//压缩代码
s = s.replace(/\/\*(.|\n)*?\*\//g, ""); //删除注释
s = s.replace(/\s*([\{\}\:\;\,])\s*/g, "$1");
s = s.replace(/\,[\s\.\#\d]*\{/g, "{"); //容错处理
s = s.replace(/;\s*;/g, ";"); //清除连续分号
s = s.match(/^\s*(\S+(\s+\S+)*)\s*$/); //去掉首尾空白
return s == null ? "" : s[1];
}
</script>
</body>
</html>
相关文章
- js判断是否包含指定字符串_js分割字符串的方法
- 怎么防止同事用Evil.js的代码投毒
- html如何只刷新页面指定,js控制页面刷新 JS刷新当前页面的几种方法总结
- 用JS获取地址栏url参数的方法_js的url是啥
- 【说站】js中Date()方法如何使用
- 【说站】js数组中find方法的介绍
- JS判断数据类型的方法有哪些_c语言数据类型
- js格式化CSS样式代码的方法
- js检测浏览器版本方法详解编程语言
- JS exec()方法:执行正则表达式匹配
- JS map()方法:对数组的每个元素调用指定的回调函数
- JS currentStyle属性和getComputedStyle()方法:读取CSS显示样式
- JS控制CSS样式的方法
- 我见过最全的个人js加解密功能页面
- js弹出模式对话框,并接收回传值的方法
- js判断计算字符串长度/判断空的简单方法
- js遍历json返回的map内容示例代码
- MyEclipse取消验证Js的两种方法
- Asp.net后台添加CSS、JS、Meta标签的方法
- js字符串转换成数字与数字转换成字符串的实现方法
- js与jquery获取父级元素,子级元素,兄弟元素的实现方法
- Thinkphp搭建包括JS多语言的多语言项目实现方法
- js与css实现弹出层覆盖整个页面的方法
- node.js中的fs.fsyncSync方法使用说明
- node.js中的fs.lchmod方法使用说明
- phpci框架中加载css和js文件失败的原因及解决方法
- asp.net后台动态添加JS文件和css文件的引用实现方法