前台开发与优化手册.pdfVIP

1 web 网站前台优化一些小经验技巧 Web 网站前台开发优技巧和注意事项手册 目录 WEB 网站前台优化一些小经验技巧 2 1. 合并脚本文件 2 4. 移除重复的JS 2 CSS 匹配原理 5S CSS+DIV 与TABLE+CSS 的比较7 CSS 中点与井号的含义和ID 与CLASS 的区别 10 CSS 关于SEO 的细节 10 CSS 背景属性设置 11 CSS 细线表格的浏览器兼容写法 14 优良的CSS 清除浮动的方法 15 CSS 透明度的设置 （兼容所有浏览器） 15 CSS 里定位慎用PADDING 属性 16 CSS 定位技巧 16 3 种修复IE6 PNG 图片透明度问题的方法 18 1..HTC 文件的修复方法 19 2.JAVASCRIPT 修复方法 19 3.CSS 修复方法 19 CSS 的垃圾行为 20 DIV+CSS 页面布局中BUG 解决方法 21 兼容IE6/IE7/IE8/FF 的CSS HACK 写法 21 减小CSS 体积的方法 22 上海坦思计算机信息系统有限公司 张骥 2 web 网站前台优化一些小经验技巧 web 网站前台优化一些小经验技巧 1. 合并脚本文件 包括脚本,样式和图片,可以有选择的把一些Js 和css 可以合并成一个文件,一些图片可以使 用css sprites 技术.这，js 和css 基本是不变的,是静态文件,图片亦然.那么不变的文件如果 适当的合并在一起请求的次数从多次变成了一次.这样http 请求的次数就减少了.当时合并之 后,文件体积变大了,会影响速度，,不过这里是需要权衡的,比如我100 份静态文件,合并成10 份还是合并成1 份这就得看你得具体情况了. 2. 指定Expires 或者Cache-Control, 对于静态内容：设置文件头过期时间Expires 的值为“Never expire” （永不过期） 动态页面,在代码中添加cache-control,表示多少时间之后过期,如: response.setHeader(Cache-Control, max-age=3600); 如果使用了Expires 文件头，当页面内容改变时就必须改变内容的文件名。通常是在文件内 容后加版本号 这一点在企业应用的系统中也时有发生.比如我们使用extjs 作为前端的技术,400 多k,每打开 一个页面都导入,下载这个js, .不设expire 或者max-age 不是一样要下载,最好的方法是写一 个filter,再filter 中判断,如果url 满足一定的条件(比如符合配置文件中的正则表达式),那么就 设置一个max-age,这样就可以了. 3. 缓存Ajax 请求 缓存的方法同动态页面,ajax 请求需要使用get 方式,url 长度为2k(ie)限制(post 请求有两个 过程,1 发送请求headers,2 发送请求数据,根据http 规范,get 请求只会发送一个tcp 包). 4. 移除重复的js 重复的js 导入也有可能导致ie 重新加载该脚本. 上海坦思计算机信息系统有限公司 张骥 3 web 网站前台优化一些小经验技巧 5. 避免重定向 有一种经常被网页开发者忽略却往往十分浪费响应时间的跳转现象。这种现象发生在当 URL 本该有斜杠（/ ）却被忽略掉时。这时候会返回一个301 的状态码, 然后浏览器重新发 起一次请求.在企业应用里,重定向是我们在企业应用中常用的技术,不过用在网站项目上,您 可要小心了,因为普通的重定向其实是 server 在