分类： 前端开发

HTML5CSS、JavaScript、php、JAVA、ActionScript、WindowPhone

js复制内容到剪贴板功能

由Goofy发布在Html、JavaScript、前端开发在 js复制内容到剪贴板功能上留下评论
$(document).ready(function(){
$(“#btn_copy”).click(function(){
$(“#TextArea1”).select();
copyValue(“TextArea1”);
})
})
//复制功能
function copyValue(txtid) {
if (isIE()) {
clipboardData.setData(“Text”, document.getElementById(txtid).value);
alert(“您已成功复制了CDKEY！”);
}
else {
prompt(“您的浏览器不支持自动复制，请您手动复制对话框中的内容:”,document.getElementById(txtid).value);
}
}
function isIE(number) {
if (typeof (number) != number) {
return !!document.all;
}
}

Speed Up Your Website

由Goofy发布在交互效率、前端开发、建站相关在 Speed Up Your Website上留下评论

原文地址：http://www.codeproject.com/Articles/26376/Speed-Up-Your-Website-By-Example

说在前面的：这个文章是08年的，比较老了，带着批判和找不同的心态去研究一下，会有收益的。

 

部分翻译：（翻译来自CSDN）

为什么减少请求数量
请求执行顺序：
e.g.: index.htm and then global.css, spring.css, logo.jpg, menu1.jpg, menu2.jpg, menu3.jpg, 1×1.gif, corner1.gif, common.js, validation.js etc…)
在加载页面时，浏览器从URL中（src)中提取头链接href={url},css文件链接和发送每个请求的资源。
大体上，浏览器在每台客户机提出页面请求时只并发下载2-4个资源请求，（取决于http和浏览器版本），一般来说，Firefox要比IE略好一些.
结论：请求与连接越少，则响应越快.
怎样减少请求数量？
减少文件数目（css,js,image)
合并文件（尽可能的）所有的CSS文件尽量合并归一，所有的JS文件尽量合并归一，

使用浏览器缓存
当第一次请求时，减少资源，之后将依靠cache机制，不必再请求资源。
使用”expires”头。

优化html
为什么优化它？
大体来说html只耗20%的时间而其它（CSS，Javascript,images)要消耗80%的时间
html包裹所有的对象（标签控件）和styles，这些都提供与浏览器进行解析,解包和render(生成）.
由于浏览器之争（竞争）和x/html/css的兼容问题.浏览器被设计为两种模式：普通（快模式，信任模式），quirk模式（必须要验证HTML/CSS,找到和”原谅错误”)
怎么优化它？
1.减少下载时间
将冗长的一页尽量载减为多页
2.快速生成render
使用非常简单的设计
standard vs quirk mode两种模式的选择.
建立信任的standard模式（前提，设计者达到专业水平遵循标准)以使得浏览器使用最优化的解析
切换模式为标准模式

移除inline CSS改为外部CSS引用（减少内部脚本书写，如document.write())
如果遵循以上原则：浏览器会在生成内容与应用CSS和脚本改变布局之间踌躇，这种情况下会暂停内容的生成，所以要引用外部CSS，JS。
如果不遵循这条原则：外部文件意味着多了一个外部资源请求，如果主页CSS，JS很少，则用内联，减少请求数，加快响应速度。

减裁内容

少用table,转用div.为什么呢？浏览器不能生成实体控件对象（标签对应）直到捕捉到标签尾ie.</table>

若布局用bigger outer，（超多标签）

 

优化image
为什么要优化？
image消耗大量下载时间及带宽，在这方面节省时间会得到卓著的功效。
怎样优化？
1.减少图片的使用频率
2.使用css rollovers代替图片链接。
3.设置恰当的宽度与高度（尽量小）
4.仔细地选择图片的颜色与格式;
GIF: works best for solid colors and sharp-edged transitions from one color to other, Maximum colors: 256.
JPEG: works best for continuous gradations of many colors or grey tones.

 

5.避免动画与flash
6.背景尽量用颜色而不用图片
7.不要把图片放在服务器的多个目录上，（避免在两个请求中，得不到最优从第一次缓存图片）
8.在下载大图片时用进度条掩饰，这是个小把戏，但不会引起用户的反感.
9.尽量使用小于10kb的一张图片，尽量不要把大图裁成小图，因为这样会增加request的次数。
使用CSS Sprites或image maps代替
可以把零碎的一些小图拼成一张大图，然后使用css sprites或image maps。

 

注意细节 提高CSS的网页渲染效率

由Goofy发布在交互效率、前端开发在 注意细节 提高CSS的网页渲染效率上留下评论

CSS学习越深入，我们需要关注的细节之处就越多，今天我们通过11个注意点来提高CSS的网页渲染效率。

1、十六进制的颜色值对位数与大小写

编写十六进制颜色值时你可能会用小写字母或省略成3位数，关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响，但十六进制的颜色值默认标准是大写及6位数标注。在未知情况下不希望冒险而降低了渲染的效率。
* 不赞成 – color:#f3a;
* 建议用 – color:#FF33AA;

2、display与visibility的差异

他们用于设置或检索是否显示对象。display隐藏对象不保留物理空间，visibility为隐藏对象保留占据的物理空间。当浏览器渲染被占据的物理空间时，会有所消耗资源。
* 不赞成 – visibility:hidden;
* 建议用 – display:none;

3、border:none;与border:0;的区别

和display与visibility的关系类似，分别不保留与保留空间。更多的是border:0;尽管可以隐藏掉边框，但它会为你保留border-color/border-style的使用权。
* 不赞成 – border:0;
* 建议用 – border:none;

4、不宜用过小的背景图片平铺

一张宽高1px的背景图片，虽然文件体积非常之小，但渲染宽高500px的板块需要重复平铺2500次。提高背景图片渲染效率跟图片尺寸及体积有关，最大的图片文件体积保持约70KB。
* 不赞成 – 宽高8px以下的平铺背景图片
* 建议用 – 衡量适中体积及尺寸的背景图片

5、慎用IE滤镜

IE的滤镜除了比较消耗资源外也有兼容性问题。当中有让PNG透明的滤镜，可采用GIF或JPG似透非透的办法来避免使用此滤镜。建议只在IE6应用GIF透明，因为IE7以上已经支持了PNG透明。
* 不赞成，滥用IE滤镜因为消耗资源外也有兼容性问题。
* 建议用，最好选择其它方法能避免使用滤镜。

6、*{ margin:0; padding:0;}避免浏览器样式差异

*号通配符把所有标签都初始化一遍，浏览器的渲染消耗一定的资源。有部分在标签在不同浏览器上几乎无差异，或是某些已经不推荐使用的标签(因为你不会去用它)，它们不需通配符要重新初始化一遍这样做能节省一点资源。
* 不赞成，使用*号通配符
* 不赞成，div span button b table等标签纳入通配符控制内外填充样式
* 建议用，有选择性地使用通配符控制内外填充样式。

7、不要添加额外的标签来描述class或id

如果你有一个选择器是以id作为关键选择符，请不要添加多余标签名上去。因为ID是唯一的，你不要为了一个不存在的理由而降低了匹配的效率。
* 不赞成 – button#backButton { }
* 不赞成 – .menu-left #newMenuIcon { }
* 建议用 – #backButton { }
* 建议用 – #newMenuIcon { }

8、尽量选择最特殊的类来存放选择器

降低系统效率的一个最大原因是我们在标签类中用了过多的选择符。通过添加 class 到元素，我们可以将类别进行再细分为class 类，这样就不用为了一个标签浪费时间去匹配过多的选择符了。
* 不赞成 – treeitem[mailfolder=”true”] > treerow> treecell { }
* 建议用 – .treecell-mailfolder { }

　9、避免子孙选择符

子孙选择符是CSS中最耗资源的选择

 

唠唠IE6中PNG透明滤镜AlphaImageLoader

由Goofy发布在CSS、前端开发在 唠唠IE6中PNG透明滤镜AlphaImageLoader上留下评论

AlphaImageLoader

说明：

在对象容器边界内，在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。

语法：

filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

enabled：可选项。布尔值(Boolean)。设置或检索滤镜是否激活。
true：默认值。滤镜激活。
false：滤镜被禁止。

sizingMethod：可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
crop：剪切图片以适应对象尺寸。
image：默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale：缩放图片以适应对象的尺寸边界。

src：必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。

具体操作：

  1. 为预览区域（比如要在某个 div 中预览）添加样式：filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);。
  2. 为 AlphaImageLoader 设置 src 属性。

—————————————大名叫分割线————————————————

ie6的这个滤镜解决png的问题还是很不错的，我最近都不怎么用iepng.js了。

说说缺点，首先是不能作为循环背景，不能做定位(background-position)。

昨天做项目发现了另一个问题，就是sizingMethod对图片和容器间的影响，你可以仔细看一下上面的参数说明。

这个很有意思，如果是scale这个参数，你就可以把这个容器当作图片来使用了(我的意思是类似img标签)。

另外就是我的png背景透明的父级DOM下的内容不能操作，这个我还没搞清楚，不过我的解决办法是单拿出来一个层写背景，放在我需要背景的元素下面，这样总算是解决了png的大部分问题。

 

女神异闻录之《恶魔幸存者-超频》攻略心得

由Goofy发布在Nintendo、前端开发在 女神异闻录之《恶魔幸存者-超频》攻略心得上留下评论

写在前面：最近查询该游戏包括原版的资料都是各种大坑，NDS上的汉化是大坑，游戏攻略是大坑，就连游戏里面的大BOSS（路西法）也是大坑。但是需要的资料又是那么多，无奈只能自己填坑，填点是点。

 

首先发一个日文攻略网站http://alphawiki.net/dsoc/index.php?FrontPage，语言障碍可以通过chrom浏览器自带的翻译，看个大概，应该是够用的。

 

但是这个攻略只给了前7天的说明，没有结局分支解说，就算是第七天也是通用时间表。

下面是日文站上得简要说明（人名是美版的，表格是人肉缩进的，如果错位了自行纠错）

  • 第七天不同路线需要打的boss

角色名             NaoyaA    翔門会    Bel    四天王    蝿様    天使’s    Berit(多脸怪)    NaoyaB    Bel

Gin                       －           －         Ｏ        Ｏ         Ｏ        －                Ｏ                －          Ａ

Atsurou                Ｏ           －         －        Ｏ         Ｏ        －                Ｏ                －          Ｂ

Naoya&Kiddo      －           Ｏ         Ｏ        Ｏ         Ｏ        Ｏ                Ｏ                －          Ｃ

Amane                 －           －         Ｏ         Ｏ         Ｏ        －               Ｏ                 Ｏ          Ｃ

 

从上表看出实质区别并不大，所以网上流传的NDS版的难度说根本就是逗新手玩。

 

我现在除了Atsurou和Naoya结局(实际上第六天选择结局的时候我只看到Yuzu，没看到Atsurou，不知道是不是我打的有问题)，其他都已经打掉，但是因为我前两次都没有成功救到Mari(英文苦手的悲剧)，所以Kiddo的结局貌似打出了死循环，每次打完都让我创建第八天，这个我之后攻略了再补。

 

我一周目选择的是Amane打的救世主结局，这个应该是所有周目boss最多的，而且最后的须佐之男是鬼神(攻击两次)，打起来绝对过瘾。但是srpg苦手建议2周目以后打，简单的多。

 

二周目选择的是Kiddo看日文网站攻略感觉Naoya和Kiddo的结局可能都是一样，King of Bel。这个结局的第八天我现在是打出了两个路线。

当上King of Bel让天使滚蛋，主角去恶魔世界管理恶魔。

干掉天使，主宰世界。

选择路线的分水岭在于是否要杀人类，英文苦手也看得懂。

 

三周目选的是Gin的，也就是Haru唱歌送天使恶魔都滚蛋的结局。仲魔都没了，第八天没戏唱了，所以这个结局没有第八天…

但是值得一提的是，网上流传的仲魔送走后只剩下人对战，他们没有说这个对战不是人对人，是人对最后Boss(第七天的boss，那个柱子的最后形态)，还好我坚持到了第二次转属性，弱无力暴力推倒，不然我真的要尿了…

 

第四周目打的Yuzu的，逃跑这条线心灵上受到了摧残，不过这个周目没什么好说的，亲Yuzu对话就好，但是第八天有个要注意的是如果让Gin幸存，并在第八天倾向与跟他有关的事情会得到另一个结局，而且这个结局会解开一个成就。

 

其他的结局正在打，回头补…

 

说一下奖励兑换系统（P点兑换）

虽然我打的结局比较难，但是一周目得分并不是很高（貌似给了不到500P）

继承1只已有恶魔 10pts

继承4只已有恶魔 60pts

继承8只已有恶魔 180pts

继承所有恶魔 300pts

继承技能 10pts

继承Macco 110pts

这个貌似是恶魔书列表的继承 40pts

经验无限制解除  60pts （这个就是假如一个20级的怪有1000EXP，那么不管你是多少级都是得到1000EXP，不会因为你等级高了经验会打折）

恶魔书召唤恶魔打9折 40pts

恶魔书召唤恶魔打7折 120pts

恶魔书召唤恶魔打5折 200pts

恶魔合成不受等级限制 70pts

开放路西法对战 100pts

 

先写这些，有问题问，我会解答我知道的，并补充在里面，填坑辛苦，有砖轻拍。

 

————————吐槽——————–

打完救世主结局，整个故事就清晰了，这根本就是亚伯-该隐-神的三角恋故事！

官方壁纸女性部分竟然还有个路人甲充数，坑爹呀。

 恶魔幸存者1

恶魔幸存者2

【转】网站默认图标shortcut icon和icon的区别

由Goofy发布在Html、交互效率、前端开发在 【转】网站默认图标shortcut icon和icon的区别上留下评论
<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon"><
link rel="icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon">

建议包含上面两行HTML代码，可以支持ico格式的图标

然而，只有第一行是必须的，因为“shortcut icon”字符串将被多数遵守标准的浏览器识别为列出可能的关键词（“shortcut”将被忽略，而仅适用“icon”）；而Internet Explorer将会把它作为一个单独的名称（“shortcut icon”）。这样做的结果是所有浏览器都可以理解此代码。只有当希望为新浏览器提供另一种备用图像（例如动画GIF）时，才有必要添加第二行。

在HTML中，link元件必须在head元件里（在<head>和</head>之间)。

对于XHTML，link必须使用“ />”结束（或“></link>”），而不可以使用“>”结束。

href可以，但不必，指向/favicon.ico的位置。它可以指向任何URL。

图像通常可以使用任何被浏览器支持的图像格式。

.ico文件格式通常可以被所有可以显示favicon的浏览器读取。

设置服务器，以发送正确的MIME标识：
ICO 文件 image/vnd.microsoft.icon（或者亦可出于兼容性原因使用image/x-icon。然而最好使用IANA注册的MIME类型，因为多数主流浏览器现在支持它）
GIF 文件 image/gif
PNG 文件 image/png

使用适当的分辨率和色深。
ICO：包括多种分辨率（最常使用的是16×16和32×32，Mac OS X有时使用64×64和128×128）以及位深（比特每像素）（多数使用4、8、24 bpp，即16、256和1600万色）。
GIF: 使用16×16，256色。
PNG: 使用16×16，256色或24位。

注意：当favicon.ico被置于文档根目录时，将会被一些不处理link元件的浏览器找到，即使没有您的站点上没有指向它的链接。

标准化

Favicon 功能最早由微软创设，而微软公司的Internet Explorer网页浏览器会对每一个网站都请求favicon。微软支持的link标签不遵从World Wide Web Consortium（W3C，万维网联盟）的HTML建议[1]，因为：

rel属性必须包含一个用空格作分隔符的link类型的列表，所以一个包含两词的link类型不能被遵守标准的浏览器理解。
“.ico”文件类型（一种用于Microsoft Windows上图标的光栅格式）没有一个注册的MIME类型，而且似乎在当时也不能被多数浏览器理解。然而2003年，这一格式在IANA获得注册，其 MIME类型是image/vnd.microsoft.icon，进而消除了此问题的第一部分。
在网站上使用保留地址（reserved location）与Architecture of the World Wide Web（互联网的结构）矛盾，同时被认为是link squatting（链接劫持）或URI squatting（URI劫持）。

Mozilla 浏览器通过一种遵从Web标准的方法添加了对favicon的支持。它采用rel=”icon”并允许网络设计人员添加任何支持的图像格式的 favicon。例如<link rel=”icon” type=”image/png” href=”/path/image.png”>。后来鉴于此功能将被用于所有新内容，多数浏览器都对此功能增加了支持。