有缘网(youyuan.com)网站优化项目(总结报告)
开始时间:2014-11-05 结束时间:2014-12-05
根据网站优化方案,主要实现、解决及项目作用有哪种?
1、使用多域名解析到“文件服务器”(http://f1.youyuan.com http://f2.youyuan.com)并分别对域名配置分发负载.
2、顶层Nginx对“xfile/”子目录进行分发负载,有效解决了JS全部抽离后,异步Ajax跨域请求的问题.
3、文件服务器加载Nginx-http-concat模块,并开启Gzip压缩(实现合并多http请求及最小化数据源传输).
4、配置Shell脚本对JS/CSS合并多行代码成单行(使JS/CSS代码文件体积最小化)
5、使用JPGmini/ PNGmini对前端组使用到的图片进行批量压缩(使JPG/PNG图片文件体积最小化)
6、使用Rundeck实现自动化发版工具,缩短发版本耗用时间. (提高发布版本效率)
7、集成Windows本地Nginx开发测试环境(与线上配置相同便于本地开发调试)
8、优化前端组后期开发流程,无需频繁重启本地Maven服务,便于及时修改JS/CSS文件(提升团队工作效率)
9、前端组对JS/CSS的直接控制,发现问题能及时响应并快速解决.
########################################################################
PPT项目总结如下:
########################################################################
【原创文章】BackToTop_scroll 和顶部快便捷导航菜单JQuery实现
最近由腾讯网(www.QQ.com)首页更新改版一个偶然的机会,本人发现了一个严重IE6下BUG。网站首页顶部导航条以及backToTop返回顶部的按钮,在IE6下拉动滚动条的瞬间会有很明显的“振动”感,导致用户体检及其不佳~~ 作为国内互联网的“领军者”这样的用户体验实在让人感觉到“糟糕”,IE6目前在国内还是占有一定份额的市场,虽然IE6很不具有“规范性”,但是抛下IE6就等于抛下潜在的很多用户……
接下来本人就基于JQuery实现出兼容性相对良好的backtotop及topnav应用~~~
望:大家借鉴优点、或者批评指正~~~~~
解决了IE6下的诸多问题【包括】:
1. IE6下拉动滚动条时的“振动问题”
2. IE6下PNG不透明的问题
3. IE6下position:fixed; 无法正确定位的问题
4. IE6下a:hover 或者是JQ定于更改或者add新样式PNG无法透明的问题(以一种新思路应对over对象PNG透明的解决方案—很有效!)
解决了IE7下的部分问题【包括】:
1. font-size:0px; 在IE7下失效的问题
=======================================================================
当前已经升级到:1.1版本!更新时间:2012-09-01
=======================================================================
腾讯网的顶部快速导航菜单和backtotop按钮在IE6下“振动”问题严重:
在IE6下实现之后BLOG截图:
经过上时间多次测试,分别兼容一下浏览器【其中还包括IE6内核的360浏览器=世界之窗-遨游等……】:
代码与网友分享:
=============================================================================
CSS样式代码分享:
===========================================================================
- /*******************************
- * Jquery时间插件
- * The author's blog:liuxinxiu.com
- * The author LiuXinXiu
- * Writing time:2012-08-30
- * UpdateTime:2012-08-31
- * version:backtotop_scroll.1.0.css
- *******************************/
- *{padding:0; margin:0}
- .bodybg{height:2000px;background:#2B2B2B}
- .hide{display:none;}
- *html,*html body /* 修正IE6振动bug */{background-image:url(about:blank);background-attachment:fixed;}
- #liuxinxiu-top-nav{position:fixed;top:0px;z-index:9991;height:30px;width:100%;}
- #liuxinxiu-top-nav .box{height:25px;width:100%;background:url(../images/nav-box-bg.png) repeat-x #218A9C;top:0;filter:alpha(opacity=40);-moz-opacity:0.5;opacity:0.5;}
- #liuxinxiu-top-nav .menutop .content{position:absolute;z-index:9993;width:563px;height:46px;left:50%;margin-left:-281px;background:url(../images/top-menu-bg.png) no-
- repeat scroll 0 -51px transparent;}
- #liuxinxiu-top-nav .menutop .content a{background:url(../images/top-menu-bg.png) no-repeat scroll 0 0
- transparent;width:111px;height:46px;overflow:hidden;display:block;text-align:center;text-decoration:none;font-size:0;text-indent/*ie6 not*/:-900px;float:left;}
- /*IE6*/
- /*************************************
- *html #liuxinxiu-top-nav .menutop .content a{width:105px;height:25px;line-height:25px;_font-size:12px;_text-indent:0px;background-image:none;background-
- color:#f5f5f5;color:#0A6575;border:1px solid #005868;_margin-left:-1px;}
- *************************************/
- /*IE6*/
- *html #liuxinxiu-top-nav .menutop .content a:hover{background-color:#087082;color:#fff}
- #liuxinxiu-top-nav .menutop .content #A{background-position: 0 0;}
- #liuxinxiu-top-nav .menutop .content #B{background-position: -111px 0;}
- #liuxinxiu-top-nav .menutop .content #C{background-position:-222px 0;}
- #liuxinxiu-top-nav .menutop .content #D{background-position:-333px 0;}
- #liuxinxiu-top-nav .menutop .content #E{background-position:-444px 0;}
- #liuxinxiu-top-nav .menutop .content .overlink{background:none !important;}
- #liuxinxiu-top-nav .bor{height:0px;overflow:hidden;}
- /*IE6*/
- *html #liuxinxiu-top-nav{position:absolute;height:46px;z-index:9991;bottombottom:auto;top:expression(eval(document.documentElement.scrollTop));}
- /*************************************
- back-To-Top Style
- *************************************/
- #liuxinxiu-to-top{position:fixed;bottombottom:0px;rightright:10px;z-index:999;width:71px; cursor:pointer; display:none;}
- *html #liuxinxiu-to-top{position:absolute;bottombottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-
- (parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
- .liuxinxiu-to-top-img {display:block;width:71px;height:24px;padding-top:48px;text-align:center;color:#888;background: url("../images/top.png") no-repeat scroll -88px 0
- transparent;cursor: pointer;position: fixed;}
- .liuxinxiu-to-top-over{background-position: 0 0 !important;text-decoration:none;color:#3a9}
JQ代码分享:
===========================================================================
- /*******************************
- * Jquery时间插件
- * The author's blog:liuxinxiu.com
- * The author LiuXinXiu
- * Writing time:2012-08-30
- * UpdateTime:2012-08-31
- * version:backtotop_scroll.1.0.js
- *******************************/
- $(function() {
- $.fn.manhuatoTop = function(options) {
- var defaults = {
- showHeight : 150,
- speed : 1000
- };
- var options = $.extend(defaults,options);
- $("body").prepend("<div id='liuxinxiu-to-top' class='liuxinxiu-to-top-img'></div>");
- var $toTop = $(this);
- var $gtop = $("#liuxinxiu-to-top");
- var $tnav = $("#liuxinxiu-top-nav");
- var $over = $("#liuxinxiu-to-top-over");
- $toTop.scroll(function(){
- var scrolltop=$(this).scrollTop();
- if(scrolltop>=options.showHeight){
- $gtop.slideDown(500);
- $("#liuxinxiu-top-nav").slideDown(500);
- }
- else{
- $gtop.slideUp(500);
- $("#liuxinxiu-top-nav").slideUp(500);
- }
- });
- $gtop.hover(function(){
- $(this).addClass("liuxinxiu-to-top-over");
- },function(){
- $(this).removeClass("liuxinxiu-to-top-over");
- });
- $gtop.click(function(){
- $("html,body").animate({scrollTop: 0}, options.speed);
- });
- }
- });
- $(function() {
- var $nava = $("#liuxinxiu-top-nav .menutop .content a");
- $nava.hover(function(){
- $(this).addClass("overlink");
- },function(){
- $(this).removeClass("overlink");
- });
- });
========================================================================
1.1版本已经更新截图如下:
电信天翼3G无线上网卡---局域网--使用代理服务器上网设置局域网使用代理服务器【实现多机同时上网】
不建议使用物理机器作为代理服务器,在物理机器中VM内新建XP机器。并接入无线上网卡,同时使用CCProxy软件进行相关代理;
插入无线网卡后,虚拟机会自动识别出天翼安装程序;
打开:CCProxy 软件进行代理设置;
勾选自动检测本地的内外IP;
二级代理选项卡,选择ALL 选择(启用二级代理)勾选去掉;
网络选项卡,服务器绑定IP(添加无线上网卡外网IP);
=======================================================
以下是第三方机器连接到外网网络相关设置(HTTP QQ)
=======================================================
设置Internet 属性----链接----局域网(使用代理上网);
设置QQ使用代理上网方式;
Liuxinxiu.com 及其二级域名访问故障已经恢复正常@
博客及相关二级域名最近访问不畅,起初怀疑VPS故障导致,PING 图初步可确定DNS解析问题:
添加更改首选DNS服务器(中国): NS1.DNS.COM.CN NS2.DNS.COM.CN
更改备选DNS服务器(美国):NS33.DOMAINCONTROL.COM NS34.DOMAINCONTROL.COM
更换个人PC硬盘由1.5TB至2TB【全程】
首先参老硬盘分区,对新硬盘进行分区操作(划分预留系统第一主分区):
打开机箱双面侧盖,卸下硬盘螺丝取下原硬盘!
使用IDE转STAT接口接上新硬盘,迁移各分区(C:\)除外的全部数据到对应的新硬盘分区内:
放上新硬盘,安上螺丝、连接上STAT数据线,以及电源线:
重启电脑(放入系统盘)安装系统到新硬盘第一主分区:
2010年12月17日(凌晨1:30)VPS由CentOS-5.5更换为:【debian5】成功部署升级nginx+php+mysql相关环境
本人VPS已与2010年12月17日,成功部署升级nginx+php+mysql 最新版WEB环境,系统有CentOS更换为debian.
原VPS环境: CentOS-5.5 + Nginx-0.8.50 + mysql-5.1.48 + php-5.2.14
目前更换至:
debian-5 + Nginx-0.9.3 + mysql-5.1.53 + php-5.2.16
中间debian出错,初次无法使用apt-get install 安装GCC 相关,已解决特此记录下来。
==================================================================
此问题为debian apt源配置问题,打开:vi /etc/apt/sources.list
可以看到原来文件内源地址:
deb http://ftp.de.debian.org/debian lenny main contrib non-free
deb http://ftp.de.debian.org/debian-volatile lenny/volatile main contrib non-free
deb http://ftp.de.debian.org/debian-security lenny/updates main contrib non-free
在文档顶部添加apt源新地址,如下:
deb http://security.debian.org/ lenny/updates main contrib
deb-src http://security.debian.org/ lenny/updates main contrib
deb http://volatile.debian.org/debian-volatile lenny/volatile main contrib
deb-src http://volatile.debian.org/debian-volatile lenny/volatile main contrib
deb http://ftp.de.debian.org/debian lenny main contrib non-free
deb http://ftp.de.debian.org/debian-volatile lenny/volatile main contrib non-free
deb http://ftp.de.debian.org/debian-security lenny/updates main contrib non-free
==================================================================
使用更新命令: apt-get update 完成
==================================================================
本站服务器环境已经更换为:CentOS 5.5 + Nginx + PHP +MYSQL
本站已经转移美国宾州VPS,LIUXINXIU.COM 在美国Godaddy.com的域名重解析也于14日:0点-2点时间内完成!
2010-09-13日——2010-09-14直至凌晨2:16本站数据迁移工作全部完成,新空间为美国宾州机房VPS,本站:LIUXINXIU.COM 在美国Godaddy.com的域名重解析也于14日:0点-2点时间内完成!
本站服务器运行环境:CentOS5.5 + Nginx(0.8.32) + PHP(5.2.10) + MYSQL (5.0.77)
http://liuxinxiu.com/CentOS5_5__Nginx__PHP__MYSQL/
Godaddy.com 域名重解析,2小时内完成,正好凌晨,访客不受影响!