`
zhxp791008
  • 浏览: 31909 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

利用压缩js和css提高响应速度

阅读更多
js和css通常浏览器都有缓存,但是第一次加载时,几百K的js下载还是比较慢的,我的网速就有感觉,那怎样提高客户的体验。当然只下载必须的js和css,或者是将多个js和css放在一个文件中,减少浏览器的http请求都是一些方法,具体可以参看高性能网站建设一书。我这里要说的是必须的文件就这样大,那怎么办?

方法一,按需加载,就是先加载必须的,在页面渲染完成后再开启http请求下载其它文件。这不是今天要做的事。

方法二:压缩。这是一个很好的方法,效果可以说是惊人的。如ext-all.js有400多K,我的网速下载时间近10S,而开启压缩只有不到3S,下载流量下降到100多点K。那怎样做到压缩也?有两种方法:

1、静态压缩,可以利用gzip等程序压缩,效果非常好。

2、动态压缩,可以自己写个filter搞定,也可以利用tomcat等提供的功能。如tomcat修改server.xml文件配置就可以达到。具体可以看tomcat的server.xml中被注解的部分。

动态这种简单,两分钟搞定,但静态压缩效果更好,而不会占用服务器的cpu。

0
0
分享到:
评论

相关推荐

    压缩js和css,优化前端资源占用案例

    总的来说,压缩js和css是前端优化的重要组成部分,它有助于减少页面加载时间,提高用户体验。开发者应当熟练掌握这一技能,并结合其他优化策略,以实现更高效的前端开发。通过合理运用这些方法,我们可以打造出响应...

    js css eclipse压缩插件

    安装该插件后,您只需选中包含需压缩文件的上级目录,然后执行 "compress javascript" 命令,插件就会自动处理所有相关的 JavaScript 和 CSS 文件,将其压缩成更小的尺寸,同时保持原有的功能不受影响。 压缩的主要...

    php gzip 压缩js或css

    在Web开发中,提高页面加载速度是提升用户体验的关键因素之一。`PHP Gzip`压缩是一种常见的优化技术,它能够有效地减小CSS和JS文件的大小,从而缩短客户端的响应时间。`Gzip`是一种广泛使用的数据压缩算法,通过在...

    JS CSS压缩工具

    然而,未优化的JS和CSS文件可能会导致页面加载速度变慢,影响用户体验。为了提高Web应用的性能,开发者通常会使用压缩工具来减小文件大小,"JS CSS压缩工具"就是这样一个解决方案。 JavaScript压缩的主要目标是移除...

    js、css压缩工具

    在IT行业中,优化网站性能是至关重要的,其中一项关键技术就是对JavaScript(js)和CSS(css)文件进行压缩。本文将详细介绍这两种常见的压缩工具及其作用。 JavaScript和CSS压缩工具的主要目的是减少文件大小,...

    关于Gzip压缩js文件提高网站运行速度

    1. **性能平衡**:虽然Gzip能提高加载速度,但压缩和解压缩也需要消耗CPU资源,因此在高并发场景下需要权衡压缩带来的性能提升和服务器压力。 2. **缓存利用**:确保浏览器能够正确缓存Gzip压缩的文件,以避免不必要...

    bootstrap、bootstrapValidator和jquery相关的部分js和css

    为了提高页面加载速度,通常会将这些文件进行合并和压缩,如`bootstrap.min.css`和`bootstrap.min.js`。 在使用这些资源时,开发者需要在HTML文件中引入对应的CSS和JS链接,确保它们在正确的位置加载。例如: ```...

    插件需要的js和css脚本

    在网页开发中,JavaScript(js)和Cascading Style Sheets(CSS)是两个至关重要的技术。它们共同构建了我们日常浏览的动态、交互式的网页。本文将深入探讨这两种脚本语言在网页开发中的作用,以及如何在插件开发中...

    unigui_调用外部js与css.rar

    7. **性能优化**:合理组织和压缩JS及CSS文件,减少HTTP请求,可以提升应用的加载速度。还可以利用CDN(内容分发网络)来加速静态资源的获取。 8. **错误处理**:在调用外部JS和CSS时,务必考虑到可能出现的错误,...

    bootstrap.min.js和bootstrap.min.css

    "bootstrap.min.js"是Bootstrap的压缩版JavaScript库,它包含了一系列用于交互和动态效果的插件。这些插件包括导航条、模态框、下拉菜单、轮播图、表单验证等。"min"表示这是一个最小化版本,即通过删除不必要的空格...

    在asp.net中使用javascript与css的合理用法

    在ASP.NET项目中,JavaScript和CSS通常会通过打包工具(如Gulp、Webpack或ASP.NET Core的Blazor默认构建过程)进行预处理、压缩和合并,以便在部署时提供更好的性能。同时,也可以利用CDN(内容分发网络)来托管这些...

    js+css3彩色气泡浮动上升动画特效

    【标题】"js+css3彩色气泡浮动上升动画特效"是通过JavaScript和CSS3技术实现的一种视觉效果,主要用于创建动态、美观的网页背景。这种特效通常会让网页看起来更具活力和趣味性,吸引用户注意力。 【描述】"基于js+...

    vant.min.js/css

    "vant.min.js" 是 Vant 库的压缩版本 JavaScript 文件,包含了所有 Vant 组件的代码。这个文件经过了压缩处理,减小了文件大小,有利于加快页面加载速度。在 HTML 项目中,你需要在 `<head>` 标签内通过 `<script>` ...

    Gzip工具打包JS、CSS文件,后台解压缩

    在现代Web开发中,为了提高页面加载速度,减少网络传输的数据量,开发者通常会使用Gzip工具对JavaScript和CSS文件进行压缩。Gzip是一种广泛使用的数据压缩格式,它能够有效地减小文件大小,从而加快了文件在网络上的...

    wow.min.js和animate.css

    "min.js"表示这是一个经过压缩和优化的版本,以减少文件大小,提高页面加载速度。 "animate.css"则是一个预定义的CSS3动画库,包含了大量的动画效果,如淡入淡出、滑动、旋转等。开发者可以通过简单地添加类名到...

    mui的js和css包

    6. **性能优化**:MUI提供的.min.js和.min.css文件是经过压缩和混淆处理的,减少了文件大小,加快了页面加载速度。在生产环境中,应该优先使用.min版本以提高性能。 7. **国际化支持**:`mui-rtl.css`表明MUI框架...

    用CSS和JS实现网页的多种风格

    同时,为了确保网页性能,需要注意优化CSS和JavaScript的加载速度,如使用CSS Sprites合并图像,压缩和最小化CSS和JavaScript文件,以及利用CDN(内容分发网络)来加速资源的加载。 总之,CSS和JavaScript是构建...

    163邮箱JS,CSS大集合

    本资料集合主要涵盖了163邮箱使用的JavaScript(JS)和CSS(层叠样式表)技术,为开发者提供了一个深入学习和研究的宝贵资源。下面,我们将对这些技术进行详尽的剖析。 1. **JavaScript(JS)技术**:JS是Web开发中...

    Minify Javascript or CSS

    "Minify Javascript or CSS" 是一种常见的前端优化技术,旨在提升网页加载速度,减少服务器带宽消耗,提高用户体验。这一技术主要包括两个核心步骤:合并(Combine)和压缩(Minify)。 **合并(Combine)** 合并...

    easyUi js+css

    `jquery.easyui.min.js` 是 EasyUI 的核心 JavaScript 文件,已经过压缩处理,以减小文件大小并提高页面加载速度。这个文件包含了 EasyUI 的所有组件和插件的实现,包括数据网格、表单、窗口、菜单、下拉框等。通过...

Global site tag (gtag.js) - Google Analytics