iLeichun

Firefox的目标之一就是尽可能地使web开发者的生活更简单高效，并通过提供工具和具有很强扩展性的浏览器使人们创造出神奇的东西。使web开发者使用Firefox的时候,浏览器可以提供大量开发工具和选项。本文将这些工具做了简单整理。

Firebug

迄今为止，最知名的web浏览器的web开发工具就是Firebug扩充套件。毫无疑问，在很长的一段时间，它把怎么进行开发和调试作为自己的门槛。Firebug是一个有很多强大的功能的重要工具，包括很多扩展。

Firefox为web开发提供的扩展

多年来，Firefox开发了许多扩展来帮助web开发者最大化利用Firefox。用得最多最有名的是下面列出来的这些。如果我们漏掉了对你有帮助的扩充套件，请一定告知我们。

Accessibility Evaluation Tool

web开发者提供测试web资源的辅助功能。

All in one Sidebar

AiOS允许你打开多个窗口作为侧栏面板，并能够在他们之间快速切换。AIOS结束了窗口混乱的时代，除了书签和历史记录外，它还在侧边栏增加了下载，加载项和其他的一些对话框。

Cache Status

使用它来对缓存进行监督和管理。

CacheToogle

通过点击开关，禁用浏览器的缓存。

Colorzilla

高级取色器，颜色选择器，渐变颜色生成器，和其他的一些进行颜色处理的工具。

Console²

Console²可能会成为下一代的错误控制台，用来取代JavaScript控制台。

从火狐v0.5开始就有控制台过滤扩展套件，之前该套件只在Console²网站上可用。

CSS Reloader

CSS Reloader使你能够重新加载网站的CSS，而需要重新加载网页。

DOM Inspector

DOM Inspector用来观察，编辑web文件或XUL应用正在使用的DOM。可以通过一个显示文件和节点的不同视图的两个小窗口拼起来的大窗口来查看DOM。

Firefogg

该插件用来编码Firefox中的视频和音频。用Firefogg吧大部分的媒体文件编码成Ogg和WebM。Firefox提供接口用来整合编码上传的程序。

FireFTP

FireFTP是一个免费，安全，跨平台的一个Mozilla FirefoxFTP/SFTP客户端，该客户端为访问FTP/SFTP提供简单直观的途径。

FireUnit

JavaScript Unit测试扩充套件。

FoxGuide

显示水平和竖直的不定浮动指南，与你在Photoshop使用到它的方式一样。有助于改进布局，将元素放在恰当的网格中，系统地放置元素，使设计更结构化。

FoxyProxy Standard

FoxyProxy是一个高级代理管理工具，它完全替代了Firefox的有限的代理性能。跟SwitchProxy相比，它提供更多的功能。

Geolocater

地理定位您需要的位置。

GreaseMonkey

通过Javascript自定义网页的显示方式和行为。

HTML Validator

HTMLValidator是个Mozilla扩充套件，它在Firefox和Mozilla中添加了HTML验证。HTML页面中的错误数量通过窗口上的按钮来显示。

HttpFox

一个用于Firefox的HTTP分析器插件

iMacros for Firefox

自动化火狐浏览器。记录和重现重复的工作。如果你喜欢Firefoxweb浏览器，但是厌倦了重复的工作，比如说每天访问同样的站点，填写重复的表格，还要记住密码，那么Firefox的iMacros就是你梦想的解决方式。

Jenkins Build Monitor

Monitor Jenkins（http://jenkins-ci.org）创建和显示Firefox状态栏中的状态。

jQuery extension

嵌入在浏览器中的jQuery and jQuery UI

JSONovich

使浏览器中的JSON的内容更容易阅读。

JSONView

在浏览器中查看JSON文档。

JSView

如果你浏览的网站包含外部的js/css文件，会出现一个有“SS”，“JS”或者两者都有的按钮，每个单独的文件都可以通过点击文件名进行查看。文件将会在一个新的窗口打开。

Link Widgets

通过给第一页，前一页，下一页，最后一页提供工具栏按钮来简化了页面序列的导航（比如，Web漫画，论坛，或者技术规范如HTML4建议）。

Live HTTP Headers

在浏览网页时查看HTTP标头。

LiveReload

当文件变化时，LiveReload就会更新网页。

Measure It

在网页上画一个尺子来查看宽度和高度或者以像素为单位对齐网页元素。

Modify Headers

添加、修改、过滤发送到web服务器上的请求头。这个加载项尤其适用于移动web的开发，HTTP测试和隐私保护。

NoScript

通过这个套件你可以获得web浏览器中最好的安全性能，它只允许你信任的网站播放动态内容，而且保护你免受XSS和Clickjacking的攻击。

PageSpeed

PageSpeed 是开源的，最早出现在Google上通过分析网页性能最佳实例来帮助开发者优化他们的网页。

PixelZoomer

PixelZoomer可以获取当前网站的截屏，并提供多个工具进行像素分析。利用这个工具你可以放大网页（最大可以放大32倍），测量距离，和获取颜色。

Pixlr Grabber

使用Pixlr Grabber使抓屏和从网页上抓取图片变得更容易。使用PixlrGrabber加载项，你只需要点击一下右键就可以复制，保存，分享，甚至可以编辑你抓取的图片或背景

Poster

这是一个开发者工具栏，用来跟web服务和其他web资源进行交互，允许你发出HTTP请求，设置实体主体和内容类型。Poster允许你与web服务进行交互并检视结果。

QuickJava

在状态栏和（或）工具栏中快速启用和禁用Java,Javascript,Flash,Sliverlight,Images,Stylesheets,he Proxy，而不需要打开任何对话！

Rainbow Color Tools

Web开发的颜色工具。选色，取色+保存颜色，并拖放这些颜色来尝试调配颜色。

Regular Expressions Tester

正则表达式的测试工具（用高亮色显示（包括子匹配））和新建表达式的助手。

Remove Cookie(s) for Site

这是一个非常简单的扩展套件，用来移除所有的正在打开网站。它在你的网页右键菜单中添加了一个选项，和一个清除Cookies按钮来完成操作，并在状态栏显示操作的状态。

Screenshot Pimp

只要点击一下，你就可以捕获，抓取，保存，下载或者复制你在web浏览器上看到的任何东西。Screenshot pimp是迄今为止最具有自主定义性和用户友好的屏幕捕获工具栏，这个工具栏能在Windows和Mac上使用。

SQLite Manager

管理你电脑上的SQLite数据库。

Selenium IDE Buttons

只需要一个简单的工具栏按钮就可以打开SeleniumIDE。你需要先安装SeleniumIDE：http://seleniumhq.org/projects/ide/

SeoQuake SEO extension

Seoquake是Firefox 的一个SEO套件，其主要目的是帮助网管优化搜索引擎，优化社交媒体，和Internet推广。Seoquake允许研究许多重要的SEO参数。

ShowIP

在状态栏中显示当前网页的IP地址。它也允许通过IP查询用户信息服务（右键）和主机姓名（左键）。另外，你可以把IP地址拷贝到粘贴板。

Stylish

用Stylish重设网页的样式，它是一个用户样式管理器。Stylish允许你很容易就可以为Google，Facebook，YouTube,Orkut和许多其他网站安装主题和皮肤。你甚至可以自定义Firefox和其他程序。

Tamper Data

用tempdata访问修改HTTP/HTTPS表头和发送参数。

TAW3

如果你想查看网站的可访问，只要点击这个按钮就可以做到。

Tilt 3D

基于WebGL的网页3D视觉效果。

TotalValidator

该套件对网页执行一系列的验证操作。这种多重验证包括外部，内部，本地网页验证，本地网页验证是通过一个从http://www.totalvalidator.com/downloads/extensiontool.html获得的桌面工具本地的拷贝进行的。

TryAgain

TryAgain一直在尝试着在无法连接服务器的时候加载网页。

User Agent Switcher

UserAgentSwitcher扩充套件添加了一个菜单和工具栏按钮，用来切换用户代理。

Wapplayer

Wapplayer是一个浏览器加载项，该加载项用来显示用在网站上的技术。

WebDevelop

WebDevelop扩充套件给浏览器添加了许多web开发工具。

Firebug extensions

在一些特殊的用例中用到一些Firebug的扩充套件，下面将列出其中的一部分：

Acebug

用Ace突出显示Firebug的命令行。

Code Coverage v2 for Firebug 0.1

这个Firebug扩充套件用来记录Javascript代码的覆盖率。

CSS Usage

Firebug 中能够查看使用了哪些CSS规则的扩充套件。

Firecookie

Firecookie是Firebug的一个扩充套件，该套件能够查看，管理你的浏览器里的cookies。

Firefinder

找到与选中的CSS选择器或者Xpath表达式匹配的HTML元素。

FirePHP

FirePHP允许你调用一个简单PHP方法将日志写入Firefox控制台。

FireQuery

Firebug为jQuery开发提供的插件。

Friendly bug

使Firebug更友好更简单易用。

Inline Code Finder for Firebug

Inline Code Finder 是Firebug的一个加载项，能够发现HTML元素中的一些问题：内联的 Javascript事件，内联的样式，是在链接的href属性中直接编写javascript代码。

FireRainbow

突出显示Firebud的Javascript的语法。

NetExport

NetExport是Firebug的扩展，该扩展允许输出所有NetPanel收集和计算的数据。已创建的文件使用HTTP文档格式（基于JSON）。

PixelPerfect

PixelPerfect是Firefox/Firebug的一个扩展，这个扩展允许web开发者和设计者用web组件轻松覆盖原来的HTML的头部.

YSlow

YSlow分析网页，并根据Yahoo！为高性能网站提供的规则来分析网站为什么运行缓慢。

来源：http://www.webapptrend.com/2011/12/589.html

我们知道select标签在各个浏览器中的属性和各浏览器的支持各有些不同，从而造成select选择框在各浏览器的显示有不同，下面我们通过对主要 外形CSS属性的支持，打造全兼容select。

    我对select的height、padding、line-height分别利用控制变量的方法写了个DEMO在各浏览器上测试三种情况：height.100.padding.0、height.no.padding.100、no.height.no.padding，结果如  链接图片各浏览器DEMO外观

我们可以得出以下研究属性。

    通过上述的研究成果属性汇总，我们知道IE6是无论如何设置都是固定高度为22px不变的，而其他浏览器除safari都是支持height属性的，那么我们设置 height:22px。那么现在我们修正一下safari浏览器，，我们发现仅有safari支持line-height属性那么正好可以利用line-height修正其高度为22px,在font-size为12px的前提下设置 line-height:22px,最后FF和IE9里面的文字不居中，对其设定 padding:2px 0,我们发现FF和IE9都居中了，但是各个浏览器的select的高度也并没有增加，那么这里有点疑问，在高度设定的情况下，小量数字的padding不增加整体高度？

    下面是全兼容代码示例。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style>
*{padding:0; margin:0}
body{font-size:12px}
select{height:22px; line-height:18px; padding:2px 0}
</style>
</head>
<body>
<div style="margin-top:20px; margin-left:20px; background:#000">
<select>
    <option>演示问题一</option>
    <option>演示问题二</option>
    <option>演示问题三</option>
</select>
</div>
</body>
</html>

 来源：http://ued.ctrip.com/blog/?p=3229

初级创业者应该搞清楚保持细致与步入主流的区别。以下是网站设计过程中的几个原则，硅谷的人也常不屑地称其为“常识（Normals）”。

怎样介绍网站

不用告诉用户你网站的“原理（how it works）”或“是什么（what it is）”，当然也无需告诉他们你的公司有多奇妙。你需要抓住重点，完整而明确地告诉用户你提供什么样的服务。新用户需要知道的是，你提供的服务在他们的生活中能起到什么作用。

看一下Twitter主页是怎么向新用户介绍的。很简洁，“欢迎来到 Twitter。与你关心的人们一起，探寻变化的大千世界”。Facebook也类似，“联结你我，分享生活，尽在Facebook”。非常有才！现在初级创业者应该知道，采用明确的方式告诉用户什么时候使用、为什么有用。比如通过前面两句话我们就能知道，Twitter是用来探寻世界的变化，Facebook则是用来沟通和分享。

确定呈现内容

我们知道你可能会这样想：“Facebook与Twitter当然能用时髦语句来介绍自己，因为新用户在去他们的网站前，就已经知道他们的网站是做什么的”。没错，这也是问题的关键。现在的大部分人都是从他人那里听说某个网站，而你的工作就是满足这些人对你网站的期望，服务当然也是越快速、越令人信服越好。

怎样才能让新用户爱上你的网站？ 这就需要给他们带来一段难忘的初始体验。建立一个引导式的过程，让他们感觉像是在进行愉快的散步，这样用户就会很高兴地了解当前服务能为他们做些什么。

太多的网站在新用户注册后便甩手不管，期望他们自己去摸索和发现下一步该做什么。相反，应该把新用户看成正与你的网站约会，接着通过一个优雅、直观、使人愉悦的引导过程，让他们了解网站的操作流程。对初级创业者来说，学会开始、驾驭并让使用体验个性化都是极其重要的。初级创业者应该正确对待错误，不应害怕冒险或固化行动 ，措施应该灵活且可以在必要时撤消。

例如，Twitter在引导用户使用这个服务的同时，也会询问他们的兴趣，然后立即利用这些信息为其创造个性化体验。完成这一过程后，无关的应用将被关闭，这样用户的面板上就只会显示那些自己可能感兴趣的功能选项。

独立而不孤立

许多网站还未赢得用户信任，就在用户登陆时要求获得他们的Facebook授权。这种做法可能会让新、老用户都产生疏远感。很多新用户的朋友也是网络新手，所以他们在网络中的沟通可能还并不多。另一些人则希望在Facebook之外的网站与他人建立沟通关系；或是更希望在没有Facebook的地方获得一丝“喘息”。

另一方面，他们也不想让朋友知道自己正使用Faceboo帐号登陆第三方网站。在越来越多的垃圾信息威胁到自己朋友时，他们也对第三方网站授权变得越来越谨慎。在这种情况下，如果网站强制要求用户创建帐号，或在他们确认自己需要这个服务之前，让其使用Facebook帐户登陆，失去这些用户的风险将比获得的好处更大。

这并不是说不应该给用户提供使用Facebook登陆的选项，只是建议先让他们爱上你的网站。对一个还未注册的用户来说，他即使没有朋友使用你的网站，网站对他也应该是有价值和吸引人的。例如，Pinterest允许未注册用户自由地浏览内容。用户只有在决定加入的时候，才会尝试使用Facebook帐户登陆。新用户加入后，不管有没有朋友在使用这个服务，他们都能立即开始发布内容、表达喜爱、发表评论等。

化繁为简

针对特定用户进行产品设计的关键是满足他们的特别需求。即使你的目标用户不是网络新人，当没有经验的游客来访问你的网站时，也要确保他们能有收获。直观的界面能让每个用户都喜欢，还要能够预测用户的下一步操作。让产品步入主流，它必须要简单，还能满足用户需求。用户往往不关心你的技术能做什么，而只关心你的服务能帮他们完成什么。

还有大量尚开发的机遇等着那些能化繁为简的企业家去开发。如果不知是什么，或许你的爷爷奶奶也能给你带来启发。

文本内容主要包括以下几点：

1. 什么是repaint/reflow?
2. 什么情况下会触发浏览器的repaint/reflow?
3. 浏览器自身所作的优化
4. 如何优化你的脚本来减少repaint/reflow?

一、什么是repaint/reflow?

页面在加载的过程中，需要对文档结构进行解析，同时需要结合各种各样的样式来计算这个页面长什么样子，最后再经过浏览器的渲染页面就出现了。这整个过程细说起来还是比较复杂，其中充满了repaint和reflow。对于DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式（浏览器的、开发人员定义的等）来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow；当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为repaint。

以上提到的只是在页面加载时必然会出现的repaint和reflow，除此之外，在页面加载完成后，用户的一些操作、脚本的一些操作都会导致浏览器发生这种行为，具体在后文阐述。

二、什么情况下会触发浏览器的repaint/reflow?

除了页面在首次加载时必然要经历该过程之外，还有以下行为会触发这个行为：

• DOM元素的添加、修改（内容）、删除( Reflow + Repaint)
• 仅修改DOM元素的字体颜色（只有Repaint，因为不需要调整布局）
• 应用新的样式或者修改任何影响元素外观的属性
• Resize浏览器窗口、滚动页面
• 读取元素的某些属性（offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE))

在继续下面的文章之前，先介绍一款强大的性能分析工具-dynaTrace，借助该功能能够清晰的得到页面中的资源消耗情况，从而对症下药。另外，更细节的方面是它可以跟踪每个函数调用所造成的CPU消耗、Repaint/Reflow。接下来就借助该工具来测试一下以上描述的几点情况。

DOM元素的增删改

先看代码

1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3c.org/TR/html4/strict.dtd">
2. <html>
3. <body>
4. <divid="test1"onclick="addNode()">这里是第1个节点</div>
5. <divid="test2"onclick="modNode()">这里是第2个节点</div>
6. <divid="test3"onclick="delNode()">这里是第3个节点</div>
7. </body>
8. <scripttype="text/javascript">
9. function$(id){
10. returndocument.getElementById(id);
11. }
12. functionaddNode(){
13. varn=document.createElement(¹div¹);
14. n.innerHTML=¹NewNode¹;
15. $(¹test1¹).appendChild(n);
16. }
17. functionmodNode(){
18. $(¹test2¹).innerHTML=¹hello¹;
19. }
20. functiondelNode(){
21. $(¹test3¹).parentNode.removeChild($(¹test3¹));
22. }
23. </script>
24. </html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3c.org/TR/html4/strict.dtd">
<html>
    <body>
        <div id="test1" onclick="addNode()">这里是第1个节点</div>
        <div id="test2" onclick="modNode()">这里是第2个节点</div>
        <div id="test3" onclick="delNode()">这里是第3个节点</div>
    </body>
    <script type="text/javascript">
        function $(id){
            return document.getElementById(id);
        }
        function addNode(){
            var n = document.createElement(¹div¹);
            n.innerHTML = ¹New Node¹;
            $(¹test1¹).appendChild(n);
        }
        function modNode(){
            $(¹test2¹).innerHTML = ¹hello¹;
        }
        function delNode(){
            $(¹test3¹).parentNode.removeChild($(¹test3¹));
        }
    </script>
</html>

在依次点击完每一个按钮后，我们来看看dynaTrace的情况，首先是一目了然的点击事件分布

放大之后来看一下每个事件的repaint/reflow情况：

增加节点：

修改节点：

删除节点：

图中的绿色部分表示的是reflow和repaint过程，其中比较短的绿条标示的reflow过程，后面长条部分表示的是repaint过程。从图中可以看出，对DOM节点的增删改都会造成reflow和repaint，由于改动小所以reflow消耗的时间很短，但是由于repaint是全局的，因此消耗的时间都比较长。

修改DOM元素前景色

1. varn=$(¹colorNode¹);
2. n.style.color=¹red¹;

var n = $(¹colorNode¹);
n.style.color = ¹red¹;

从上图中可以看到修改字体颜色后，浏览器只有repaint而没有reflow。接下来试试修改背景色：

1. varn=$(¹colorNode¹);
2. n.style.backgroundColor=¹red¹;

var n = $(¹colorNode¹);
n.style.backgroundColor = ¹red¹;

由图中可以看出，修改背景色也会造成reflow和repaint。另外，经过测试发现，只要是修改元素的cssText属性，不论它的值是什么，都会导致浏览器reflow和repaint，因此在某些时候选择特定的样式属性赋值会有更好的效果。

Resize浏览器窗口以及拖动滚动条

测试中的操作如下：缩小浏览器窗口->放大浏览器窗口->拖动页面滚动条至页面底部。从图中可以看到Resize浏览器窗口以及拖动滚动条都会造成浏览器的repaint，而且CPU的消耗也比较大，尤其是拖动滚动条的时候。

读取Layout属性

根据各种参考资料中的描述，在用Javascript读取DOM节点的Layout属性（offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE)) 的时候也会触发repaint，不过在以下的测试例子中并没有发现这一点。

1. varn=$(¹colorNode¹);
2. vartemp=document.documentElement.currentStyle;
3. temp=n.offsetTop;
4. temp=n.offsetLeft;
5. temp=n.offsetWidth;
6. temp=n.offsetHeight;
7. temp=n.scrollTop;
8. temp=n.scrollHeight;
9. alert(temp);

var n = $(¹colorNode¹);
var temp = document.documentElement.currentStyle;
temp = n.offsetTop;
temp = n.offsetLeft;
temp = n.offsetWidth;
temp = n.offsetHeight;
temp = n.scrollTop;
temp = n.scrollHeight;
alert(temp);

三、浏览器优化

浏览器对于每一个渲染动作并不是立即执行，而是维护了一个渲染任务队列，浏览器会根据具体的需要分批集中执行其中的任务。除了浏览器自身维护的定期调度之外，脚本中的某些操作会导致浏览器立即执行渲染任务，例如读取元素的Layout属性。

1. varbodystyle=document.body.style;
2. varcomputed;
3. if(document.body.currentStyle){
4. computed=document.body.currentStyle;
5. }else{
6. computed=document.defaultView.getComputedStyle(document.body,¹¹);
7. }
8.  
9. //每次都读取
10.  
11. bodystyle.color=¹red¹;
12. bodystyle.padding=¹1px¹;
13. tmp=computed.backgroundColor;
14. bodystyle.color=¹white¹;
15. bodystyle.padding=¹2px¹;
16. tmp=computed.backgroundImage;
17. bodystyle.color=¹green¹;
18. bodystyle.padding=¹3px¹;
19. tmp=computed.backgroundAttachment;
20.  
21. //最后再读取
22.  
23. bodystyle.color=¹yellow¹;
24. bodystyle.padding=¹4px¹;
25. bodystyle.color=¹pink¹;
26. bodystyle.padding=¹5px¹;
27. bodystyle.color=¹blue¹;
28. bodystyle.padding=¹6px¹;
29. tmp=computed.backgroundColor;
30. tmp=computed.backgroundImage;
31. tmp=computed.backgroundAttachment;

var bodystyle = document.body.style;
var computed;
if (document.body.currentStyle) {
  computed = document.body.currentStyle;
} else {
  computed = document.defaultView.getComputedStyle(document.body, ¹¹);
}

//每次都读取

bodystyle.color = ¹red¹;
bodystyle.padding = ¹1px¹;
tmp = computed.backgroundColor;
bodystyle.color = ¹white¹;
bodystyle.padding = ¹2px¹;
tmp = computed.backgroundImage;
bodystyle.color = ¹green¹;
bodystyle.padding = ¹3px¹;
tmp = computed.backgroundAttachment;

//最后再读取

bodystyle.color = ¹yellow¹;
bodystyle.padding = ¹4px¹;
bodystyle.color = ¹pink¹;
bodystyle.padding = ¹5px¹;
bodystyle.color = ¹blue¹;
bodystyle.padding = ¹6px¹;
tmp = computed.backgroundColor;
tmp = computed.backgroundImage;
tmp = computed.backgroundAttachment;

每次读取的渲染图：

最后读取的渲染图：

四、如何优化你的脚本来减少reflow/repaint?

1. 避免在document上直接进行频繁的DOM操作，如果确实需要可以采用off-document的方式进行，具体的方法包括但不完全包括以下几种：

(1). 先将元素从document中删除，完成修改后再把元素放回原来的位置

(2). 将元素的display设置为”none”，完成修改后再把display修改为原来的值

(3). 如果需要创建多个DOM节点，可以使用DocumentFragment创建完后一次性的加入document

1. functionappendEveryTime(){
2. for(vari=5000;i--;){
3. varn=document.createElement(¹div¹);
4. n.innerHTML=¹node¹+i;
5. document.body.appendChild(n);/*每次创建的新节点都append到文档*/
6. }
7. }
8.  
9. functionappendLast(){
10. varfrag=document.createDocumentFragment();
11. for(vari=5000;i--;){
12. varn=document.createElement(¹div¹);
13. n.innerHTML=¹node¹+i;
14. frag.appendChild(n);/*每次创建的节点先放入DocumentFragment中*/
15. }
16. document.body.appendChild(frag);
17. }

function appendEveryTime(){
    for( var i = 5000; i--; ){
        var n = document.createElement(¹div¹);
        n.innerHTML = ¹node ¹ + i;
        document.body.appendChild(n);/*每次创建的新节点都append到文档*/
    }
}

function appendLast(){
     var frag = document.createDocumentFragment();
     for( var i = 5000; i--; ){
         var n = document.createElement(¹div¹);
         n.innerHTML = ¹node ¹ + i;
         frag.appendChild(n);/*每次创建的节点先放入DocumentFragment中*/
     }
     document.body.appendChild(frag);
}

用dynaTrace观察的结果如下，appendLast的性能无论是在Javascript的执行时间以及浏览器渲染时间方面都优于appendEveryTime。

appendEveryTime:

appendLast:

2. 集中修改样式

(1). 尽可能少的修改元素style上的属性

(2). 尽量通过修改className来修改样式

(3). 通过cssText属性来设置样式值

如下的代码中，每一次赋值都会造成浏览器重新渲染，可以采用cssText或者className的方式

1. el.style.color=¹red;
2. el.style.height=¹100px¹;
3. el.style.fontSize=¹12px¹;
4. el.style.backgroundColor=¹white¹;

el.style.color = ¹red;
el.style.height = ¹100px¹;
el.style.fontSize = ¹12px¹;
el.style.backgroundColor = ¹white¹;

3. 缓存Layout属性值

对于Layout属性中非引用类型的值（数字型），如果需要多次访问则可以在一次访问时先存储到局部变量中，之后都使用局部变量，这样可以避免每次读取属性时造成浏览器的渲染。

1. varwidth=el.offsetWidth;
2. varscrollLeft=el.scrollLeft;

var width = el.offsetWidth;
var scrollLeft = el.scrollLeft;

4. 设置元素的position为absolute或fixed

在元素的position为static和relative时，元素处于DOM树结构当中，当对元素的某个操作需要重新渲染时，浏览器会渲染整个页面。将元素的position设置为absolute和fixed可以使元素从DOM树结构中脱离出来独立的存在，而浏览器在需要渲染时只需要渲染该元素以及位于该元素下方的元素，从而在某种程度上缩短浏览器渲染时间，这在当今越来越多的Javascript动画方面尤其值得考虑。

1. <bodystyle="position:relative">
2. <divid="test"style="background-color:red;width:100px;position:relative;">AnimationHere</div>
3. </body>
4. <scripttype="text/javascript">
5. function$(id){
6. returndocument.getElementById(id);
7. }
8. window.onload=function(){
9. vart=$(¹test¹);
10.  
11. ~function(){
12. tt.style.left=t.offsetLeft+5+¹px¹;
13. tt.style.height=t.offsetHeight+5+¹px¹;
14. setTimeout(arguments.callee,500);
15. }();
16. }
17. </script>

<body style="position:relative">
	<div id="test" style="background-color:red;width:100px;position:relative;">Animation Here</div>
</body>
<script type="text/javascript">
	function $(id){
		return document.getElementById(id);
	}
	window.onload = function(){
		var t = $(¹test¹);

		~function(){
			t.style.left = t.offsetLeft + 5 + ¹px¹;
			t.style.height = t.offsetHeight + 5 + ¹px¹;
			setTimeout(arguments.callee,500);
		}();
	}
</script>

通过修改#test元素的postion为relative和postion分别得到如下两个测试结果

position: relative

position: absolute

在postion:relative的测试当中，浏览器在重新渲染时做的工作比position:absolute多了不少。

HTML5和CSS3热潮正横扫网络，从事互联网行业，特别是前端工作者，大家或多或少都有了解、学习和使用，HTML5和CSS3包含丰富的技术内容，在每周的技术分享交流会中，页面构建工程师@Sunshine珍兒 同学，从三个特别的角度出发，配合丰富的实例，概括了HTML5与CSS3对页面工作带来的息息相关的变化和精彩。

一、我们担心苦恼的那么事儿

1.1 对于页面构建者来说:
表现层会遇到一些难题，欣赏绚丽的UI设计稿的同时，也在苦恼怎样用现用的技术力量去实现圆角，阴影，高光，渐变，透明等各种表现效果。为了精准UI还原度，我们会不惜花费更多字节数切大图或者添加一些多余的空标签。
结构层同样也会遇到麻烦。首先看页面首行代码doctype，包含了，冗长而复杂，从事多年开发的你能记住这段话吗？
接着看满屏几乎都是毫无语义的div标签，为了实现复杂的设计效果，我们不得不使用多个层级嵌套，造成代码冗余。
再看看页面中一些交互动画效果，基本都是JS和flash开发人员所实现，页面构建在现有技术上只能有心而无力。

1.2 对于js开发人员来说:
一个简单的交互效果，一个又一个表单验证，需要使用一大段JS代码去实现，为了兼容各个浏览器，不得不多写数行代码。

1.3 对于flash开发人员来说:
Flash开发人员担心的是用户没有安装必要的插件，担心插件被禁用或者屏蔽，像现在apple的ipad就已经不支持flash插件了。

以上的担心与苦恼你曾有过吗？如果有，别怕，HTML5和CSS3来了，已经来了！

二、我们开心盼来的那么事儿

HTML5和CSS3的到来，让我们网页开发者可以做的更多，更好！
CSS3带来了圆角，半透明，阴影，渐变，多背景图等新的特征，轻松实现了设计稿中常见的图层样式，用简洁的代码替代图片，代替了多余的空标签。CSS3带来的媒体查询可以为不同的显示设备定义相匹配的样式，灵活实现了智能的流体布局，CSS3还为我们带来了强大的选择器以及变形动画。下面让我们一起来看看实际工作中的具体应用吧~

（实例一）

类似实例一的设计稿，我们常见的做法是在无序列表li里为不同小图标识写上不同的class类名，或者单独为每个小图标写上空标签定义样式，这样带来的问题之一是html结构不干净简洁，二是使后续的开发工程师多了一层判断。
而利用CSS3强大的选择器就能轻松解决这个问题，E[foo^=”bar”]表示的是选择匹配E的元素，且该元素定义了foo属性，foo属性值包含前缀为 bar的子字符串.
以下是片段代码。

CSS3包含了很多新的属性特征，动画效果尤为受大家喜爱。实例二是为这次分享做的一个学习转动盘。用JS和CSS3去控制转盘的指针转动效果。

（实例二）

该实例重点在于animation-play-state属性，paused表示的是暂停。
Animation属性包含了动画名称Animation-name, 动画时间Animation-duration, 动画播放方式Animation-timing-function,动画开始播放时间Animation-delay,动画播放次数Animation-iteration-count,动画播放方向Animation-direction等等，实例详细代码请见PPT。

领阅了CSS3带来的价值，那么HTML5给我们带来了哪些盼来的事儿呢？
HTML5的口号是简单至上，尽可能地简化：简化了doctype，如；简化了字符集声明；新增了更多语义化标记header、footer、section、article、aside、nav；新增了很多标识元素如canvas、audio、video，配合简单而又强大的HTML5 API,让浏览器发挥它原生的能力，来替代复杂的javascript代码。

（实例三）

实例三是用canvas画的一个weibo logo图标。这里用到了两个知识重点：
其一，context.lineCap=[value]，线帽风格有三种：对接（butt）默认值，圆形（round）方形（square）；
其二，arc(x, y, radius,startAngle, endAngle, anticlockwise)， x,y指定绘制的圆弧的圆心下xy轴坐标，radius是圆的半径，startAngle和endAngle指定了起始弧和结束弧，anticlockwise指定是否使用逆时针方向绘图，逆时针方向（TRUE），顺时针方向（FALSE）。

（实例四）

实例四是用audio标签做的一个音乐播放器，用HTML5 API提供的属性去控制该控件的播放play()，暂停pause()，进度条，当前时间currentTime，音量volume，歌曲选择且封面和曲名相应变化等效果。
介绍audio标签常用的几个可脚本控制的特性：
Autoplay：控制音频在就绪后自动播放，或者查询是否已设置为autoplay。
Controls：向用户显示或隐藏默认控件界面，比如播放按钮。
loop：用来设置媒体文件是否循环播放。
currenTime：返回从开始播放到现在所用的时间（以S为单位）。
Muted：设置静音或者消除静音。

（实例五）

实例五是演示强大的表单，它的强大不仅体现在更多的type类型tel,email,url,search,range,number,color,datetime等更强的体现在它对应的HTML5 forms API.
讲三个工作中常见的交互效果所用到的特性：
1、autofocus指定某个表单元素自动获得焦点，但需要注意每个页面仅只允许一个autofocus特性。
2、placeholder 表单输入型控件的默认文案，当获得焦点或者输入值时，默认文案自动消失。
3、list特性和datalist元素，使用该组合，可以实现常见的联想输入浮层。

三、我们正满怀期待的那些事儿

理想总是美好的，然而不管是浏览器的历史遗留问题，还是互联网用户的习惯，都或多或少的限制着HTML5和CSS3的推广，我们期待规范制定者们能够尽快推出统一的标准，各个浏览器厂商能够更好更多地支持新特性。
期待我们不再为了兼容各种浏览器，而写上大量的私有特性，不再因为某些浏览器的限制，而采取不必要的冗余措施。
期待更多的互联网使用者尽快和老顽固IE6说拜拜。
期待在实际工作中让我们参与更多，做的更多。
因为HTML5和CSS3，一切不用担心。
Ppt地址: http://momolovei.sinaapp.com

近些年来，用户对视觉体验的要求不断提高，而设计师们也开始在网页设计中加入各种特效元素以满足用户的需求。其中有一种特效的效果很具有吸引力，它就是视差滚动效果。视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，可以带来非常出色的视觉体验。

随着这种炫酷的效果首次在Nike 2011年的 Nike Better World 项目中完美展现，如今这种视差滚动效果被越来越多的国外网站所应用，成为Web设计的热点趋势。因此，本文整理了十种关于此效果的教程和插件和大家分享，希望为你的网站设计提供一些灵感。

不过有两个方面需要读者注意：

1. 以大量图片为特色的网站应该考虑图像的预加载问题，以便为用户提供更好更流畅的视觉体验；
2. 某些网站页面在移动设备上的效果可能较之在PC上有所不同，一些功能也可能无法正常使用。

1、Parallax Slider

一个超级棒的插件，为你的网站提供纵深和滑动效果。

2、Javascript视差效果

一份帮助你增加网页立体层次感的教程。

3、Nike Better World场景的背后

一份为那些急切想重现NIKE网站滚动效果的设计师准备的教程。

4、用jQuery和CSS构建一个具有视差滚动效果的网站界面

一份为那些想在此领域了解的更深的设计师准备的例子和教程。

5、用JQuery创建一个时尚的具有视差背景的效果

一份教程，在背景上帮你添加一些滚动的云彩。

6、动画背景式的网页头部

用一个动画式的网页头部来让你的访问者为你欢呼吧！

7、视差滚动教程

一份视差效果和内容同时出现的有趣的教程。

8、JQuery Image Prallax

一个通过重复和动画运动产生立体错觉的插件。

9、Stellar.js

一个为任何滚动元素提供视差滚动效果的JQuery插件。

10、Curtain.js

允许你嵌入一个类似于幕布升起的效果到你的网页中。

网站建设中彻底和灌水机说再见,我们有哪些常用方法可以阻止灌水机的恶意攻击？

１、两次数据入库间隔时间判断

正常情况下用户两次表单提交的时间间隔一般不会在３秒以内，也就是说３秒以内提交的多个表单数据都有可能出问题，根据墨匪定律的那种说法：只要事情有可能出错，那它一定会出错。所以三秒以内录入的数据它就有问题，在这里只要对两次入库时间进行保护即可，如果两次表单提交时间相隔３秒以内，就禁止再录入即可。

２、验证码判断法

目前整个互联网都在使用的一种方法，缺点就是影响客户体验，严重折磨用户。

３、数据手动审核

如果是内部系统可以考虑，但如果是公开服务的应用，审核的数据量是一个问题。

４、来源判断检查

同一个来源（ip）允许发布的最大数量范围

５、黑名单策略

电话黑名单、（ip）黑名单

来源：http://blog.ja168.net/submit-repeat-216.html

作者:itwoodman     

虽然已经不做设计师快三年了，可是依然会一直留意站酷。看着各位高手的作品，总让我庆幸我没有把这条路走下去——三年前，我就是由于觉得自己在设计上没有什么天分，于是转行去了一家游戏公司，去做官网建设和媒体渠道方面的工作。如今看来，这条路没有错，我的设计和站酷上的高手想比，差距不是用努力学习追的上的。

由于工作的关系，我经常扮演一个网页设计的需求方的角色。3年的时间，我看了无数的设计稿，也亲手枪毙了很多的设计稿。很多时候我觉得很无奈，那些设计都很好——有的精美的让我枪毙的时候心情极度难受——这些设计本身不是不美观，只是由于设计者太注意设计本身，忽略了很多设计之外的东西。联想到在站酷上也经常看到的很多精美华丽的“飞机稿”，这不能不让我这个依然爱好设计的旁观者心疼！所以我想就我这三年作为一个设计需求方，从我所看到的视角来说一下网页设计。希望对大家能有帮助。当然，在设计方面，我只能说是个外行，如果说的有什么不对，还希望大家能见谅。

设计师与需求方：

记得我自己做设计的时候，当时公司一位在中国待了快6年了的老外曾经对我说：“中国没有DESIGNER，中国只有PAGE WORKER！”当时听到这句话很不服气，还试图和他理论，当然，最后结果是老外认错了，而我和那个老外也成了好朋友。但是，如今自己做了3年的需求方，我终于不得不很无力的承认了这个事实——不是中国设计师没有创意，而是客户心理对于项目的需要造就了设计师变成了美工。

我不得不承认，大多数的需求方都是外行，有的甚至审美品位严重扭曲——当然，在很多高端的公司，专业的需求方也不是没有，只是这样的需求方是可遇不可求的。在大多数需求方看来，在整个项目当中，他们是处于一个“主动”的地位，对于整个项目具有主导话语权。或许他们脑海当中，真的有很漂亮的设计概念，只是他无法实现，于是便找到了设计师，希望设计师根据他所“想”的一个模糊的蓝图来设计页面。于是问题出来了，由于需求方非专业的描述使得设计者的设计思路变的跟着模糊起来。或许需求方的想法表达的很清晰，但是由于扭曲的审美观导致设计师无法认同。无论由于前者的原因还是后者的原因，都会使得页面变的不伦不类。这样的经历，我想每位设计师都曾经遇到过。

接下来我们来说说解决方法：

1、制作之前的沟通非常必要。你要假设需求方是“白痴”，什么都不懂。在需求在自己脑海里未明确之前，不要试图去猜测着做，这样“飞机”的概率极高。最好是让需求方找到同类风格的网站至少2-3个，让他说明这些网站他欣赏在什么地方。当深入的沟通之后，了解了需求方的意图和口味之后，你会发现沟通的时间远远会小于你重做的时间。

2、对于用户给予的需求，不要太咬文嚼字，同第一条所说，需要假设需求方为“白痴”，很多专业的细节，他们一般不会关注。在做需求方的过程中，我也犯过类似的错误：记得那时侯提交需求，由于项目要求科技感未来感比较强，我在需求中写了一句：“整个网站的设计基调为科技感未来感比较强的蓝紫色。”结果，页面出来了之后，发现整体的设计风格很符合我事先的要求，页面也做的很漂亮，只是唯一的问题就出在头部的人物，设计师看到需求后，为了追求整个页面的色调“符合需求”把人物的色调也做成了蓝色，远看就像是阿凡达。..对于这个结果，我哭笑不得。没办法，谁叫当时自己需求没有写清晰呢？

3、对于主导意识比较强的需求方，不妨自己做一下用户引导。好设计师的个性都很强，这是我和很多设计师接触下来的感觉。有个性是好的，但是工作归工作，工作的时候还是要讲究工作方法的。不要试图顶撞需求方，这样做并不明智；也不要试图用自己的专业术语说服对方，这会造成沟通的无效，严重的甚至会让需求方觉得你是在“忽悠”他，从而对你产生不信任感。比较合理的方式是：“我觉得，你提的想法很不错，只是，我个人觉得。..。..。..。（尽量用对方听的懂的大白话）这样做的话效果会更好一些。当然，我们可以按照您的思路给您做一稿，但是如果可以，我想按照我的想法也做一稿，两稿比较下或许会更稳妥些。”如此一来，对方有台阶下，不至于伤了自尊，而你，也就是多花了一些时间，至少争取到了按照自己想法做页面的机会。

4、“大！一定要大！”很多时候，需求方会对你这么说。通常这么说的意思，就是这个需要“明显”。虽然可以假设需求方是“白痴”，但是在这点上，他比你懂。不过，客户说“大”，未必一定要“大”，首先，试图分析下，他为什么说要“大”，或许从产品本身的角度，对方是正确的；然后是修改，不过这个修改不是需求方说什么就是什么，依照第三条的做法，一稿按照用户的要求改，一稿可以尝试一些其他方法：比如换字体、换颜色、换样式，找个衬托的东西什么的。..总之是在不破坏设计效果为前提的基础上作出自己觉得正确的修正——需求方大多是了解自己的产品并且知道自己要做什么的（也有不少是什么都不懂不知道的，遇到那种算你倒霉），他们或许不太清楚如果用美术的方法达到自己的效果，但是如果仔细分析，还是能够了解他们的意图的。

5、千万不要随意改动LAYOUT，即使你觉得这个LAYOUT糟糕的让自己崩溃，也不要不和需求方联系就随意去做调整——你需要有这样的意识：很多时候需求方是需要控制结果并对结果负责的，不告知需求方而随意修改需求将为结果带来很大的不可控因素并对结果带来不可知影响，是对需求方很严重的挑衅。即使实在无法接受这样的LAYOUT，至少自己脑子里思考下，为什么对方会这么布局？如果不使用这样的布局，我是否能有更好的解决方案？然后带着“可能效果会更好的解决方案”去说问题。这样至少不会让需求方觉得你“无视”他的需求，而是在“帮助”他解决问题。

6、要学会挑选客户，在我还是设计师的时候，一位老前辈曾经说过：“当你选择接1000￥/p以下的单的时候，就意味着，你的设计已经定位在这个档次了。”事实也的确如此，很多中小企业的领导、国企或者政府的领导，通常会有很强的主导意识，而且觉得设计不值钱，设计就是按照他们的意图制作页面，设计师也就是一工匠。和这样的客户讲设计基本没戏，你的设计也别指望能做的出彩。什么档次的用户决定什么档次的设计，这句话是有道理的。

设计师与程序：

关于这个问题，很多时候是无法调和的矛盾。很多时候设计和程序是天生的“敌人”——设计师对于页面的认识是“漂亮”，而程序对于页面的认识是“简单”。对于页面的根本认识的不同，是两者发生矛盾的关键。我不得不承认，这样的矛盾很多时候是无法完全消失的，不过话说回来，事在人为，通过主观的努力尽可能去避免这些问题还是可行的。

1、多了解一些技术的东西是有必要的，DIV+CSS是必须要学的，别觉得那是程序的事情——如果你不想自己的页面被改的面目全非，所以这个是必须的。JS的代码可以不懂，但是JS的原理还是该了解——至少和程序沟通你要的效果的时候用的到。这些都是最基础的，如果你还想朝着更高的方向发展。

2、有时候简化页面是没有办法的事情，中国的网速就这个情况，现在电脑的配制也是无法改变的客观事实。有些效果比如FLASH、JQuery等等，虽然效果很华丽，有时候太占带宽太占系统资源。去掉也是没有办法的事情，毕竟，如果漂亮的效果让用户看不到或者等不到，结果会比没有效果更糟糕。

3、私底下多和程序沟通。人心都是肉长的，有时候私下沟通比工作沟通有效果的多。没事情的时候多和程序一起抽抽烟、喝喝酒、吃吃饭、唠唠嗑。和好的设计一样，好程序也大多很有个性，但是思维也大多很简单，就和写判断逻辑一样，不是0就是1，所以别被表面的现象所迷惑、事实上程序是很容易接触的一类人。和程序处熟了，工作沟通也会容易不少、甚至可以直接找一个处熟的程序搭档接一些私单，有财一起发，不仅能赚钱，还能增进相互之间的感情，何乐而不为？

设计师和终端体验者：

虽然说设计师很少能和终端体验者发生关系。但是事实上，一个页面到底好不好，终端体验者最有权利说。作为一个设计师，不是说光会设计漂亮页面就OK了，如果用户体验不好，页面再漂亮，也是空的。

1、需要学习理论，但不要迷信理论。很多设计师喜欢看国外的设计理论，这些理念通常都很先进，而且都有很强的逻辑，让人觉得“该这么回事”。不过，实际情况是，这些所谓先进的理念都是外国设计师根据国外用户浏览习惯总结出来的东西，虽然很系统、很完善。但是和中国用户的习惯还是有很大差异的。关于这点，我做过几个大型英文网站的项目，感触很深刻。其实，那些理论也都是外国设计师一点一点总结出来的，我们为什么自己不能总结一些中国用户自己的习惯呢？多看各个成功的网站，多观察身边的人浏览网站的习惯，然后自己思考一下“为什么”。当你有自己成熟的理论了，你就离“大师”不远了。

2、好的页面设计是引导用户去阅读的。设计的最终目的是为了传达信息，如果为了页面美观而失去了传达信息本身的效果，那这种页面设计的效果就是负的。这是很多有平面设计习惯的设计师时常会忽略的问题。尤其在以文字和图片作为传达主体的网站上，这种问题更加明显。建议有这样问题设计师能看一些关于排版方面的书籍——在这方面，网页设计和印刷排版设计是有共通之处的。

3、设计也需要在文字上下功夫。很多时候页面上的引导是通过文字链接实现的，而策划案里面或者LAYOUT里面不会给你明确的文字（有不少策划案里所给的文字链界是仅供参考的），如果不自己琢磨下，有时候真会出现不少尴尬。最简单的例子：很多人喜欢用“MORE”、“CLICK HERE”、“SKIP”这样的英文单词。这个单词什么意思，我们都知道、可是如果这个网站目标用户群体是中年人或者年纪更大的人。那恭喜你，你对牛谈琴了——呈然，现在的年轻人大多有英文基础，但是老一辈可没有我们这么好的教育水平啊！。..很多设计师都不太在意文字本身，这在中国是一个很悲哀的事实——这样的态度会让设计师很难进步，就是从职业规划上来说，将来要朝更高的其他方向发展，这也会成为一个障碍。

4、考虑下动态页面具体使用中会遇到的问题。静态页面我们能够控制最后出来的效果。但是动态页面却会出现我们无法预计的问题，你需要考虑到没有美感的网站编辑用丑陋颜色的标题把你的页面搞的乱七八遭、你需要考虑到有时候用户名是8个字，但是你却只给了7个字的距离。..。..如此等等的问题都会影响到页面的效果和用户的观感。这方面的问题总是会超出你的想像，但是一旦发现了，就必须准备解决的方案，能否发现问题以及是否快速找到解决问题的方案，在一定程度上也是判断一个设计师是否有经验的标志。

给新人的建议：

1、平时多看所收集整理素材、自己做的页面分门别类的整理好、老设计师为什么出东西的速度比你快而且效果好？就是因为他们看的比你多，素材比你丰富。老设计师的硬盘绝对是个宝，恩恩，别想歪了。

2、设计的时候少些想法，设计好之后多些想法。大胆下笔、小心收拾，只要总体的感觉对了，设计就能出效果，相反，设计时候想法多了，不仅会严重影响设计速度，出来的东西也会不伦不类。

3、设计有时候不都是加法、减法也很重要，全是效果等于没有效果，材质和光感觉最好能保证统一。影响整体效果的东西，再漂亮也要狠的下心去掉。

4、自己看效果的时候一定要放到100%看，建议根据不同分辨率浏览器宽度拉一下辅助线，保证在不同分辨率下效果都不至于太差。看的时候可以学学画素描的方法，眯起眼睛看，那些东西突出没有、哪些东西没有突出，用那个方法一看就知，当然如果带眼睛的可以把眼镜去掉，效果是一样的。

5、有能力制作个人网站的话，还是做一个吧！一方面练手，另外一方面，无论是求职还是接单，都用的着！

6、设计有时候真需要天分，如果做了一段时间，发现自己没有天分，不如像我一样，跳出去换个工作比较好。呵呵，这条只是一个玩笑。要相信自己的努力会有结果，如果你能坚持的话，我相信，迟早有一天你也能成为最NB的设计师！