如果写一个静态HTML页面，直接写HTML代码和用JS动态生成代码，哪种方式要好点？为什么？
不考虑人力因素（手写HTML太费时间排除），请从读取和解析或者其他的角度分析。谢谢
按投票排序
可能我把题主的问题想得太复杂了，因为原问题几乎没有回答的意义。静态的页面肯定是直接 HTML 比用 js 生成快。要用到 js，那肯定是因为有动态的内容需求，需要基于数据来渲染 HTML，那么这个问题就可以引申到 服务端渲染 vs. 客户端渲染。首先，单纯从首屏渲染速度来说，几乎一定是服务端渲染更快。原因如下：假设内容相同，两者解析 HTML 并渲染的速度是一样的，不同的是客户端渲染需要先请求并加载 js，然后执行 js，请求 API 数据，最后才能进入解析和渲染的步骤。服务端的渲染可以用比 js 效率更高的语言执行，服务器的性能配置也通常胜过用户的机器配置。但是，服务端渲染由于计算量主要集中在服务端，那么在用户请求量很大的情况下系统负载会比客户端渲染的方案高一些。如果因此导致服务器响应变慢，那么用户体验也会下降。客户端渲染存在的主要理由是单页应用，在首屏渲染之后，还可能需要动态地创建很多 HTML，这时候刷新整个页面效率很低，通过在前端预先加载模板，之后请求变更的数据并在前端渲染的方式，可以很好地提升用户体验。另外这样的方案很自然地使得后端变为纯数据 API，前后解耦，开发维护上有一定好处。两者之间的选择主要取决于首屏加载速度对你的应用有多重要。对于单页富应用而言，主要的体验集中在首屏加载完毕以后的交互上（比如 gmail，加载很慢，但之后交互就很流畅），相比之下，内容类的网站，首屏加载速度则是个决定性因素。现在也有越来越多的采用前后结合的方式，即服务端渲染首屏，之后由 js 接管，接下来的更新进行局部的前端渲染。当然，实现起来比较麻烦一点，所以很多这样的方案是基于 Node.js 实现的，前后端可以共用模板和渲染逻辑。
反对第一名答案，根本没答道点上，题主的意思是js动态生成html标签和直接写html形式，和服务端渲染没啥关系，无论是js还是浏览器直接渲染都是客户端渲染。回到题主的问题，这个答案很明确了，在不考虑你说的成本外，当然首选html啊，所谓静态页原则就是能静态就不要动态生成，js的每次dom操作都会涉及到重绘和重渲染，这是性能的一个主要损失点，虽然已经有很多优化方案，但还是不如直接写的静态html，很明显你可以试试写一个5000行的表格，分别用两种方法对比下。另外，排除性能因素，静态html更容易调整样式，能更好的与设计师协调，语义化的标签更易读
如果页面有局部ajax的需求，比如股票行情，那么在页面第一次载入的时候就可以考虑ajax载入。另一种情况就是的例子，数据每时每刻都在刷新，第一次载入的时候生成静态代码没有任何意义，所以也是所有代码用js动态生成。否则，不要让js动态生成代码。（所谓“js生成代码”，百分之九十九的情况是异步从服务器抓json。如果你不是这种情况，只是把html语句非要写到js代码里，然后再innerHTML一下，这就是逆天而行。）
你是想说 用 纯html 跟 js拼接html。
还是一个在服务器用类似ejs jade跟浏览器前端渲染html比呢？
这么说 你应该知道结果了吧。
不过我想你用得着考虑这个问题吗？ 以前网上抄的很热的 ejs 比 jade快很多。
测试结果 新的jade比ejs 也慢不了太多啊 最重要的还是你的使用习惯
假如用户禁用了JavaScript......**************************************************************************************************之前看过《DOM编程艺术》。作者老在强调：“提防那些禁用JavaScript的家伙”。这里“禁用JavaScript的家伙”，一是指那些使用了浏览器中“禁用JavaScript”功能的用户，二则是指“搜索引擎”。那些使用js动态生成的内容，搜索引擎是搜不到的。我想：“自己的网站隐形了”这个结果应该和一般的网站运营者的意愿相去甚远。
我只想说，用JS动态生成之后那还叫静态页面吗……？求一段生成随机数字的JS 代码怎么写
[问题点数：40分，结帖人ccmutto]
求一段生成随机数字的JS 代码怎么写
[问题点数：40分，结帖人ccmutto]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
相关帖子推荐：
2011年3月 Web 开发大版内专家分月排行榜第二2011年1月 Web 开发大版内专家分月排行榜第二2010年10月 Web 开发大版内专家分月排行榜第二2010年9月 Web 开发大版内专家分月排行榜第二2010年6月 Web 开发大版内专家分月排行榜第二
2012年10月 Web 开发大版内专家分月排行榜第三2010年7月 Web 开发大版内专家分月排行榜第三
本帖子已过去太久远了，不再提供回复功能。谁能介绍一款js图标插件，能生成饼形图，柱形图的，谢谢，请大神们介绍一下还有用法等等_百度知道
谁能介绍一款js图标插件，能生成饼形图，柱形图的，谢谢，请大神们介绍一下还有用法等等
谢谢，能生成饼形图，柱形图的谁能介绍一款js图标插件
提问者采纳
html" target="_blank">httpFusionCharts具体的使用可以参考这个文档.com/view/8a52dff6f61fbd：<a href="http://wenku://wenku./view/8a52dff6f61fbd
提问者评价
太感谢了，真心有用
其他类似问题
柱形图的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁用GruntJS合并、压缩JS文件
长期东忙西忙，却不忙更新自己的博客，缺少输出，甚为惭愧
记得我当初刚接触GruntJS的时候对NodeJS一知半解，所以第一次使用花了些时间才熟悉起来。本文希望能帮助朋友们快速入门。
为什么要合并、压缩你的JS文件？
在开始之前，先重申一下这个问题。因为经常在帮忙改东西的时候看到HTML页面上引用了N个JS，而通常看到这个就知道这人JS写得有多糟糕了。HTML里穿插一堆JS代码的我就不吐槽了。
一般在一个HTML文档加载的时候，浏览器会根据HTML代码从上到下读取所需要加载进来的CSS、JS、图片等文件，指定为异步加载的文件除外。每读取一个文件，浏览器都会向Web服务器发送一个加载的请求，服务器觉得这个请求没问题后，浏览器才会开始接收文件。也就是说，每次加载一个文件都会消耗一定的时间在服务器和客户端的来回上。
加载一个文件消耗的时间可以忽略不计，问题是你显示一个复杂的网页可能会加载N多文件，那我们在我们可以控制的范围内，能少花点时间就少花点呗。用户可是对网页加载的速度很挑剔的！
对图片我们经常会把一些图标合并成一个大图片用CSS的background来取得相应图片以减少请求。CSS也通常对一种媒体只写一个文件，当然这边要注意万恶的IE对CSS的限制，参考我的博文:用SCSS需要小心IE对css的几个限制。对JS，一般就会将本地的所有用到的文件合并及压缩。当然，以上对使用requireJS一类的框架加载的除外。
所谓的压缩就是会将所有空&#26684;符、注释等不影响代码都移除，把长的名称都替换为短的名称以节省字符。当你的JS被压缩后，除了头部可能会额外加点文件注释外，所有的JS代码都并为一行，很多变量名都变为a啊a的字母，完全失去了可读性。然后你看到自己的JS从300KB可能缩减为只有5KB。这样做的唯一目的就是把JS文件变小，使其加载的速度更快。
一切都是为了更好的performance……哪天咱下行网速和服务器上行网速都升级到GB级别哪还用担心这个？
GruntJS的安装及使用
GruntJS是一个建立在NodeJS基础上的任务管理工具。概念我不赘述，反正除了配置烦很好使就对了。
GruntJS的安装方法在官网上介绍得很详细。点击查看官网教程>>
总结下来其实就那么几步：
到NodeJS官网安装适合你系统的NodeJS。现在的NodeJS安装会自带NPM包管理，所以你不用再另外装NPM了。用NPM装GruntJS的CLI，因为你要在命令行执行GruntJS的命令：npm install -g grunt-cli在开发项目根目录准备package.json文件。这个文件的内容我会在后面详细说明。将命令行指定到这个根目录，运行npm install
想要在你的项目里运行GruntJS呢，还需要以下几步：
准备文件Gruntfile.js或Gruntfile.coffee。文件的内容我会在后面详细说明。 将命令行指定到这个根目录，运行grunt
package.json的配置
这个JSON文件就是给NPM包管理用的。这里我们只要根据GruntJS官网给的一个例子改就已足够。详细的配置请参考官网：https://www.npmjs.org/doc/files/package.json.
GruntJS官网的例子:
"name": "my-project-name",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-nodeunit": "~0.3.3",
"grunt-contrib-uglify": "~0.4.0"
这个例子包含了配置这个项目的名称，项目的版本，开发用到的NPM包。运行npm install的时候就是读取这个devDependencies的内容，来下载相应的包到项目根目录的node_modules文件夹内。还可以指定下载的包的版本。关于版本的写法还有一些符号和写法来指定某个范围内的版本。点击查看版本号语法详细介绍>>
一般性可在Github查找并选择你要使用的Grunt包，直接写上当前的版本如0.3.3指定当前的版本。或者在版本号前加“~”符号选择临近版本。或者用x来代替最后的3，写为0.3.x，选择0.3.开头的最新版，因为最后一个数字改变通常是开发者修复了BUG而不会有配置或者语法上的改变。
在这里，我们合并、压缩JS需要用到2-3个NPM包。分别是：
gruntgrunt-contrib-concat
用于文件的合并。grunt-contrib-uglify
用于JS的压缩。
名称中间带“contrib”的为GruntJS官方提供的插件。
我说2-3个包是因为grunt-contrib-uglify也可以直接将多个文件合并为一个文件，但是它会“改”代码。这里我希望能最终生成两个文件：一个是纯粹将所有JS代码无改动地合并在一起，用来debug调试；另一个是压缩过的JS，也就是所有调试通过发布项目时最终使用的JS。所以我还使用了grunt-contrib-concat。
另外，示例当中使用的grunt-contrib-jshint是一个用来检查JS语法错误的插件，可以在你合并文件的时候就帮你检查出错误，不过有时候会有点蛋疼。这里我为了减少篇幅先不用它。
把上面的示例修改如下：
"name": "my-project-name",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-concat": "0.5.x",
"grunt-contrib-uglify": "0.5.x"
Gruntfile.js的配置
一个基本的Gruntfile包含以下几部分：
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON(&#39;package.json&#39;),
// 这里放插件的设置信息
taskname: { }
// 载入要使用的插件
grunt.loadNpmTasks(&#39;grunt-taskname&#39;);
// 注册任务
grunt.registerTask(&#39;default&#39;, [&#39;grunt-taskname&#39;]);
整段代码包含在一个函数中，利用了NodeJS一个把函数公开，可以被其他文件使用的一个写法。
grunt.initConfig用来接收对各个插件的配置信息。每个插件的配置选项都可以在它们自己的Github项目页面中找到，而且写法基本上都类&#20284;。如：
grunt.initConfig({
pkg: grunt.file.readJSON(&#39;package.json&#39;),
// 任务名称，需根据插件的说明来写
// 子任务名称，这名称随你起
// 可选的配置参数
options: {
banner: &#39;/*!\n *
- JS for Debug\n * @licence
- v ()\n * http://blog.csdn.net/jennieji | Licence: MIT\n */\n&#39;
// 源文件路径
&#39;js/app/**/*.js&#39;
// 运行任务后生成的目标文件
dest: &#39;js/app.debug.js&#39;
以上是一个对“grunt-contrib-concat"的配置实例。
"concat"指定了这套配置所对应的插件。"dev"是我自定义的一个子任务，我给它取名为"dev"。一个插件可以拥有多套不同的配置以应付不同的需求，也就是说在"concat"下可以包含任意多个自定义的子任务，每个子任务都可以有不同的配置。
这里我设置了"banner"参数，这个参数在很多对文件操作的插件中都有，如uglify, less, sass等等。它的作用是给最终的目标文件头部加上一些信息或者代码。
在这个"banner"中，我为最终生成的app.debug.js加上了一段文件注释。其中还使用了几个特殊的代码：
\n换行符，写入文件后，前后的字符就会分行。
类&#20284;ASP的写法。pkg是用grunt.file.readJSON('package.json')读取到的JSON，并且已经转换为JS对象。按照前面package.json的示例，这段代码会在写入文件时被替换为"my-project-name"。其实从这里就可以看出在grunt的配置中，我们可以利用JS对象和JSON来做辅助的配置。
这是利用了个grunt的方法，可以运行任务的时间并且指定生成的&#26684;式。
运行这个concat任务时，我的app.debug.js的头部会有以下一段注释：
* my-project-name - JS for Debug
* @licence my-project-name - v0.1.0 ()
* http://blog.csdn.net/jennieji | Licence: MIT
而在文件路径的写法上，则可以用一些匹配的符号。如我这里用了一个星号"*.js"表示任意名称的JS文件，两个星号"**"表示当前目录或者子目录下。所以这里"js/app/"目录下及其所有子目录下的JS文件都会被合并到app.debug.js的文件中。
配置完后，还要记得载入插件和注册你这个任务，否则会报错！
载入插件就是把插件NPM包的名字"grunt-contrib-concat"传给grunt.loadNpmTasks方法。
注册任务呢，则是用grunt.registerTask方法。第一个参数为注册的任务队列的名称，写为"default"则成为这个Gruntfile的默认任务队列。第二个参数就是这个任务队列要执行的任务名称的数组，这里的任务名称使用在initConfig配置时使用的名称，即"concat"。修改代码如下：
// 载入要使用的插件
grunt.loadNpmTasks(&#39;grunt-contrib-concat&#39;);
// 注册任务
grunt.registerTask(&#39;default&#39;, [&#39;concat&#39;]);
如果这样写，那配置完后直接输入以下命令到命令行便可以执行一次JS的合并：
如果将"default"改为其他名字，比如"debug"，那么命令行需要输入：
grunt debug
加入Uglify压缩JS也做类&#20284;的配置。注意的是这边源文件和目标文件的配置写法不一样。是在files参数里以“目标文件路径：[源文件路径1,源文件路径2,...]”的&#26684;式来写。此外我还直接利用了concat已经生成的合并文件来做压缩。完整的Gruntfile.js如下：
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON(&#39;package.json&#39;),
options: {
banner: &#39;/*!\n *
- JS for Debug\n * @licence
- v ()\n * http://blog.csdn.net/jennieji | Licence: MIT\n */\n&#39;
&#39;js/app/**/*.js&#39;
dest: &#39;js/app.debug.js&#39;
options: {
banner: &#39;/*!\n *
- compressed JS\n * @licence
- v ()\n * http://blog.csdn.net/jennieji | Licence: MIT\n */\n&#39;
&#39;js/app.min.js&#39;: ［&#39;&#39;］
grunt.loadNpmTasks(&#39;grunt-contrib-concat&#39;);
grunt.loadNpmTasks(&#39;grunt-contrib-uglify&#39;);
grunt.registerTask(&#39;default&#39;, [&#39;concat&#39;，&#39;uglify&#39;]);
这个应该是最基础的用法了，我看bootstrap和angular的配置文件都超级复杂。
如果不想每次改了代码都要在命令行里运行grunt，推荐使用watch插件，它会自动检测到文件的改动，然后运行相应的任务。
另外将Less编译为有"grunt-contrib-less".
SASS编译为CSS有"grunt-contrib-compass"比较好用，因为可以引用compass-style里的mixin。
还有"grunt-conritb-requirejs"来针对用requireJS写的JS文件做压缩。
您对本文章有什么意见或着疑问吗？请到您的关注和建议是我们前行的参考和动力&&
您的浏览器不支持嵌入式框架，或者当前配置为不显示嵌入式框架。