【玩转HTML5】html5 + javascript使用的九大开发工具_html5吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：92,859贴子：
【玩转HTML5】html5 + javascript使用的九大开发工具收藏
html5 + javascript使用的九大开发工具：一、Adobe Edge目前还处于预览阶段的Adobe Edge是用HTML5、CSS、JavaScript开发动态互动内容的设计工具。内容可以同时兼容移动设备和桌面电脑。Edge的一个重要功能是Web工具包界面，方便确保页面在不同浏览器中的架构一致性，此外Edge还将整合TypeKit这样的字体服务。动画和图形可以添加到HTML元素中，程序也能通过Edge自身的代码片段库或者JavaScript代码进行扩展。动画可以在独立的时间线上进行嵌套，还能实现互动功能。符合可以服用并通过API和代码片段控制。通过Edge设计的内容可以兼容iOS和Android设备，也可以运行在火狐、Chrome、Safari和IE9等主流浏览器。二、Adobe Dreamweaver CS6Adobe Dreamweaver CS6作为一个Web设计软件，提供了对HTML网站和移动程序的可视化编辑界面。其Fluid Grid排版系统整合CSS样式表功能，提供自适应版面的跨平台兼容性。开发者可以完全实现Web设计的可视化操作，无需为代码所困。用户不但还能在Live View中预览，还提供多屏幕预览功能。开发者可以通过MultiScreen预览面板查看HTML5内容的渲染效果。Live View通过WebKit渲染引擎支持HTML5。三、Adobe ColdFusion 10ColdFusion是用来开发企业Web程序的服务器端技术，通过Websockets、互动表单、视频和地理标签等HTML5技术创建富媒体用户体验。四、Sencha Architect 2在开发移动和桌面应用的工具中，Sencha的定位是HTML5可视化应用开发。开发团队可以在一个单一集成的环境中完成应用的设计、开发和部署。开发者还可以开发Sencha Touch2和Ext JS4 JavaScript应用，并实时预览。五、Sencha Touch 2Sencha Touch2是移动应用框架，也被看作是Sencha的HTML5平台。开发者可以用它开发面向iOS、Android和Blackberry、Kindle Fire等多种平台的移动应用。六、Dojo Foundation Maqetta来自于IBM的一个项目，Dojo Foundation Maqetta是为桌面和移动设备开发HTML5应用的开源工具，支持在浏览器中查看HTML5界面。用户体验设计师可以通过拖放组装UI样板七、微软Visual Studio 2010 ServicePack 1虽然一开始并不支持HTML5，但微软在2011年三月发布的Visual Studio 2010 SP1中提供了IntelliSense，追加了针对HTML5的一些元素。八、JetBrains WebStorm 4.0作为拥有HTML编辑器的JavaScript集成开发环境，WebStorm4.0提供了开发web应用的HTML5样板。开发者可以在创建HTML文档时可获得对HTML5文件的支持。例如砍伐者键入。开发者还可以在chrome浏览器中实时预览HTML文档。九、Google Web Toolkit该开发工具用于开发浏览器应用，但库中支持很多HTML5功能。包括对客户端或web存储的支持。其他HTML5功能还包括支持Canvas可视化，以及音频和视频widget。
登录百度帐号+&&创建文件夹
如何使用JS调用代码位代码？
阅读量&&&1047
请获取支持JS调用的一段式代码；在JS文件中，例如1.js，使用document.write()方法写入代码位代码。一个JS只能调一段代码。方法一：document.write('&script type=&text/javascript& &BAIDU_CLB_SLOT_ID = &1&;&/script&');document.write('&script type=&text/javascript& src=&http://drmcmm.baidu.com/js/o.js&&&/script&');方法二：document.writeln(&&script type=\&text\/javascript\& &BAIDU_CLB_SLOT_ID = \&1\&;&\/script&&);document.writeln(&&script type=\&text\/javascript\& src=\&http:\/\/cbjs.baidu.com\/js\/o.js\&&&\/script&&)&在页面上代码位的位置，引用该JS文件，例如：&script type=&text/javascript& src=&1.js&&&/script&注：在IE下，通过一个JS调用多个代码位的投放方式不可行（非IE浏览器可以）。原因是IE浏览器自身机制的问题：在IE下，JS脚本加载的方式不是严格按照脚本块来解析并解释的，而是按照HTML字面上的脚本块进行。因此，建议使用多个JS分别调用不同的代码位，一个JS仅调用一个代码位。在HTML代码中使用JavaScript代码的例子
转载 & & 投稿：junjie
这篇文章主要介绍了在HTML代码中使用JavaScript代码的例子,本文是入门级示例,初学js的同学不要错过,需要的朋友可以参考下
&script&&/script& 标签
要在 HTML 中使用 JavaScript ，需要使用 &script&&/script& 标签，并定义 type 属性值为 text/javascript ，正如前面的
例子所示：
&script type="text/javascript"&
alert("我是提示文字！");
通常单独的 JavaScript 代码是没什么意义的， JavaScript 代码一般会结合 HTML 代码一起使用，因为 JavaScript 本来就是为了弥补 HTML 的缺陷而产生的。下面是 JavaScript 代码和 HTML 代码一起使用的例子：
&script type="text/javascript"&
alert("我是提示文字！");
&div&图片及文字内容&/div&
通常，JavaScript 代码（&script&&/script&标签）放置于 &head&&/head& 标签之内，更详细的内容请参阅《》。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具开源中国在线工具
在线代码格式化
待格式化JavaScript：
缩进方式：
2个空格缩进
4个空格缩进
8个空格缩进
格式化JavaScript：
在此填写您的意见信息：
Email邮箱: (必填)
您的建议和意见：在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
标签：至少1个，最多5个
赞助我以写出更好的文章
如果您觉得文章对您有帮助，可以逐个点击以下链接，类似于Google ads，不需要您付出任何费用，每天都可以来点一次噢，费用将由广告商承担，give me a cup of coffee?
前端开发中，掌握好浏览器的特性进行有针对性的性能调优是一项基本工作，同时，比较不同代码的执行速度也是一项关键的工作。
比如，当我们想比较RegExp的test方法和String对象的indexOf方法查找字符串谁的速度更快的话，js代码在不同的浏览器，不同的操作系统环境运行的效率可能是不一样的，这就是为什么我们需要对其进行基准测试，在做基准测试方面，我们可以使用Benchmark.js和使用jsPerf（一个基于JSLitmus的基准测试库）。我们可以使用jsPerf来分享你的基准测试。
Benchmark.js 的使用
github 地址：
我们在很多github 开源项目中，往往都能看到benchmark文件夹，比如下面这个：
于是Google之，发现这是用来做基准测试的。于是乎：
首先我们在系统根目录下，通过npm intsall benchmark 来安装benchmark。该模块会被写入node_modules文件夹中，我们在test.js文件中通过require方法引入该模块。
将如下代码写入test.js文件，该文件置于系统根目录下：
var Benchmark = require('benchmark');
var suite = new Benchmark.S
// 添加测试
suite.add('RegExp#test', function() {
/o/.test('Hello World!');
.add('String#indexOf', function() {
'Hello World!'.indexOf('o') & -1;
// add listeners
.on('cycle', function(event) {
console.log(String(event.target));
.on('complete', function() {
console.log('Fastest is ' + this.filter('fastest').pluck('name'));
// run async
.run({ 'async': true });
然后在终端执行node test.js 可见输出结果如下：
~ git:(master) ? node test.js
RegExp#test x 9,847,928 ops/sec ±1.47% (83 runs sampled)
String#indexOf x 23,366,017 ops/sec ±0.91% (96 runs sampled)
Fastest is String#indexOf
结果最快的就是String对象的indexOf方法，其中，Ops/sec 测试结果以每秒钟执行测试代码的次数（Ops/sec）显示，这个数值越大越好。除了这个结果外，同时会显示测试过程中的统计误差，以及相对最好的慢了多少（%）
call和apply的比较
var Benchmark = require('benchmark');
var suite = new Benchmark.S
var arr1 = function (str) {
return [].slice.apply(str);
var str2 = function (str) {
return [].slice.call(str);
// 添加测试
suite.add('arr1', function() {
arr1('test');
.add('str2', function() {
str2('test');
// add listeners
.on('cycle', function(event) {
console.log(String(event.target));
.on('complete', function() {
console.log('Fastest is ' + this.filter('fastest').pluck('name'));
// run async
.run({ 'async': true });
输出如下内容：
arr1 x 596,505 ops/sec ±1.14% (95 runs sampled)
str2 x 627,822 ops/sec ±1.27% (92 runs sampled)
Fastest is str2
本地的使用
本地使用Benchmark需要引入如下三个文件：
&script src="lodash.js"&&/script&
&script src="platform.js"&&/script&
&script src="benchmark.js"&&/script&
jsPerf 的使用
jsPerf 提供了一个简便的方式来创建和共享测试用例，并可以比较不同JavaScript代码段的性能。jsPerf也是基于Benchmark来运行的。
打开jsPerf站点：，先将必填的项目填了。其中，slug是短名称，会生成一个网址，因此不可与别人的重复。然后在Code snippets to compare 区域填入title和用于测试的code。最后点击save test case 完成验证即可。浏览器会自动跳转到测试页面
Async选项框是用来测试一些异步调用的性能的，我们的代码没有使用异步方法，所以不必勾选。
点击“Run tests”按钮开始测试两种算法的性能。建议在运行性能测试之前，关闭无关的浏览器页面，关闭其他程序，退出不必要的后台进程，以保证结果不受其他环境的影响。你也可以通过点击个别测试用例的名字单独运行这个例子
点击该链接查看性能比较：
jsPerf还会统计所有运行过这个测试用例的浏览器的比较结果，显示在下方的Browserscope区域，可以通过它直观地看出各个版本浏览器的性能横向和纵向比较情况。
可以看到Firefox下的执行速度明显高于Chrome
查看别人的测试用例
我们可以通过
浏览最新提交的250项最新测试用例。我们也可以使用底部的Revisions来查看不同的版本，也就是不同浏览器的测试用例情况。
John Resig 在其博文
中提到，应该尽量考虑到每个测试结果的误差并去减小它。扩大测试的样本值，健全的测试执行，都能够起到减少误差的作用。
7 收藏&&|&&54
你可能感兴趣的文章
1 收藏，604
2 收藏，2.8k
16 收藏，1.5k
本作品采用 署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可
居然没有人赞，也是可惜。Benchmark.js 应用很广，而且其实现思路非常有意思。详见作者在
中的讲解。
P.S 其实 Benchmark.js 的作者就是
的作者，233
居然没有人赞，也是可惜。Benchmark.js 应用很广，而且其实现思路非常有意思。详见作者在 [这篇文章](http://calendar.perfplanet.com/2010/bulletproof-javascript-benchmarks/) 中的讲解。
P.S 其实 Benchmark.js 的作者就是 [Lodash](https://lodash.com/) 的作者，233
jsperf终于从垃圾内容中恢复过来了吗撒花
jsperf终于从垃圾内容中恢复过来了吗撒花
jsperf还是不能访问吗
jsperf还是不能访问吗
厉害了。学习了
厉害了。学习了
分享到微博？
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。