前段性能优化之js,css调用优化

规则1:减少HTTP请求
     把多个JS请求合并为一个JS请求,把多个CSS请求合并为一个CSS请求。从而减少从客户端向服务器端的请求数。
     规则3:添加Expires头
     用http请求的查看工具,我这里用的是firebug查看http请求,可以看到响应头中有Expires头,unicorn的设置的默认过期时间是30分钟。即是如果当前网页未过期,浏览器不会发请求,直接查找本地页面缓存。加速前端响应速度,减少服务器端压力。
     规则4:压缩组件
     查看http请求头参数中,有一项Accept-Encoding:gzip,deflate,响应头中有一项Content-Encoding:gzip ,这里表示请求的内容采用gzip方式进行压缩传输。减少传输文件的大小,加快页面响应。
     规则5:将样式表放在顶部
     规则6:将脚本放在底部
     浏览器的加载顺序基本是按源码从上到下加载的,把样式表放在顶部,可以加快页面样式的显示,给客户更好的体验。同理,把脚本放在底部,会避免因脚本阻塞页面内容的呈现。
     因此,最理想的情况是,整个页面只保留一个JS且放置在

标签之前,只保留一个CSS且放置在之前。
目前的unicorn设计也是尽力按这个目标来做。CSS已经精简到1个,位置也基本符合。但是结合网站的实际情况,JS的处理中涉及到一些函数依赖,必须有部分JS放在前端,供后面的JS调用。另外,ae.js这个库必须提前调用,因此,就会看到当前的searchweb页标签内,依然存在2个JS。其他的JS都遵循此规则,合并成一个,且放置在前。
     规则10:精简JavaScript
     如果你把页面源码中的js的URL输入地址栏中(用FF浏览器,IE会弹出下载框),会列出JS的内容,会发现这里的JS文件作了很大的精简。删除了多余的空格、空行、注释等。减少了JS的体积,压缩原理主要参考开源工具JSMIN。
另外,其实unicorn也做了CSS的压缩功能,但是因为目前国际站的应用中,CSS的注释因为涉及到一些兼容性处理的内容,暂时无法做压缩。这个功能虽然做了,但是默认不开启。可以在antx.properties中配置是否开启,对应配置项:alibaba.intl.compressCSS,为true时开启压缩,默认此项值为false。
     规则12:移除重复脚本
     unicorn还有一个功能是,对于一次请求中重复引入的JS或CSS,unicorn有去重功能,也就是只会调用一次。
     规则13:配置ETag
     项目设计之初,有在http请求中加入ETag标记,这个标记可以在请求时检验服务器端资源是否与客户端资源相同。如果相同,只返回带304响应码的响应头,不用重新从服务器端发送页面数据,而直接使用本地缓存。后来在测试过程中,出现页面偶尔丢失样式的情况发生,经架构、开发等判断可能是Etag标记与mod_jk冲突,因此取消了这项功能

时间: 2024-08-30 10:24:48

前段性能优化之js,css调用优化的相关文章

前端用户体验优化: JS & CSS 各类效果代码段

前言 不定时更新 在线预览 https://zzyper.github.io/opti... 在线预览的源码 https://github.com/zzyper/opt... 部分内容仅兼容webkit内核,其他内核自行查询 可控密度的虚线分隔线 css .line { height: 1px; width: 100%; transform: scaleY(0.4); -webkit-transform: scaleY(0.4); background-image: linear-gradien

Web性能优化之动态合并JS/CSS文件并缓存客户端

在Web开发过程中,会产生很多的js/css文件,传统的引用外部文件的方式会产生多次的http请求,从而加重服务器负担且网页加载缓慢,如何在一次请求中将多个文件一次加载出来?接下来给大家介绍在ASP.NET中动态合并加载多个js或css文件.原理:减少请求服务器的次数达到优化效果先给大家看一下传统引用方式和优化后的比较:1.传统引用方式(下图): 这样的引用方式将会请求5个js文件也就是5次http请求(下图): 2.我们来看看优化后(下图): 大家可以看到修改后只有一次请求,花费的时间节省了很

网站前段性能优化总结

网站前端性能优化总结 作者: wireless_tech  发布时间: 2011-09-16 20:07  阅读: 2496 次  推荐: 0   原文链接   [收藏] 一.服务器侧优化 1. 添加 Expires 或 Cache-Control 信息头  某些经常使用到.并且不会经常做改动的图片(banner.logo等等).静态文件(登录首页.说明文档等)可以设置较长的有效期(expiration date),这些HTTP头向客户端表明了文档的有效性和持久性.如果有缓存,文档就可以从缓存(

Google Pagespeed,自动压缩优化JS/CSS/Image

Google Pagespeed,自动压缩优化JS/CSS/Image 浏览:257 发布日期:2015/07/05 分类:技术分享 关键字: Nginx Appache Pagespeed 自动压缩优化JS/CSS/Image 这个周末,把服务器的Nginx升级了下,并加入了Google Pagespeed模块 效果很明显: 页面加载的多个JS.CSS会自动合并压缩处理 发现新版本的Pagespeed能很好的发现处理用户加载的第三方JS库,如jQuery 发现新版本的lazyload_imag

CSS规范 - 优化方案

值缩写 缩写值可以减少CSS文件大小,并增加可读性和可维护性. 但并非所有的值都必须缩写,因为当一个属性的值缩写时,总是会将所有项都设置一遍,而有时候我们不希望设置值里的某些项. /* 比如我们用下面这个样式来让某个定宽的容器水平居中,我们要的只是left和right, * 而top和bottom不是这个样式要关心的(如果设置了反倒会影响其他样式在这个容器上的使用), * 所以这时我们就不需要缩写 */ .f-mgha{margin-left:auto;margin-right:auto;} /

10个CSS简写/优化技巧

CSS简写就是指将多行的CSS属性简写成一行,又称为CSS代码优化或CSS缩写. CSS简写的最大好处就是能够显著减少CSS文件的大小,优化网站整体性能,更加容易阅读. 下面介绍常见的CSS简写规则: 一.盒子大小 这里主要用于两个属性:margin和padding,我们以margin为例,padding与之相同. 盒子有上下左右四个方向,每个方向都有个外边距: margin-top:1px; margin-right:2px; margin-bottom:3px; margin-left:4p

Android 性能优化——之控件的优化

Android 性能优化——之控件的优化 前面讲了图像的优化,接下来分享一下控件的性能优化,这里主要是面向自定义View的优化. 1.首先先说一下我们在自定义View中可能会犯的3个错误: 1)Useless calls to onDraw():我们知道调用View.invalidate()会触发View的重绘,有两个原则需要遵守,第1个是仅仅在View的内容发生改变的时候才去触发invalidate方法, 第2个是尽量使用ClipRect等方法来提高绘制的性能. 2)Useless pixel

MonoBehavior的调用优化

本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/70921049 作者:cartzhang 本文同步与游戏蛮牛. MonoBehavior的调用优化 如果告诉你,Unity由于调用你的MonoBehaviour函数而造成CPU性能大量浪费?真的与你的脚本无关么?若你有成千上百个呢,你应该了解一个新的优化领域. 魔术技巧 MonoBehaviour函数调用缓慢.我们谈论的是像U

数据库性能优化一:数据库自身优化(大数据量)

数据库优化包含以下三部分,数据库自身的优化,数据库表优化,程序操作优化.此文为第一部分 数据库性能优化一:数据库自身优化 优化①:增加次数据文件,设置文件自动增长(粗略数据分区) 1.1:增加次数据文件 从SQL SERVER 2005开始,数据库不默认生成NDF数据文件,一般情况下有一个主数据文件(MDF)就够了,但是有些大型的数据库,由于信息很多,而且查询频繁,所以为了提高查询速度,可以把一些表或者一些表中的部分记录分开存储在不同的数据文件里由于CPU和内存的速度远大于硬盘的读写速度,所以可