写一个静态HTML页面，直接写HTML代码和用JS动态生成代码，哪种方式要好

如果写一个静态HTML页面，直接写HTML代码和用JS动态生成代码，哪种方式要好点？为什么？

不考虑人力因素（手写HTML太费时间排除），请从读取和解析或者其他的角度分析。谢谢

添加评论

按投票排序按时间排序

6 个回答

10赞同反对，不会显示你的姓名

尤雨溪，不会搞艺术的程序员不是好设计师

奔跑的糖球、王佳、知乎用户等人赞同

可能我把题主的问题想得太复杂了，因为原问题几乎没有回答的意义。静态的页面肯定是直接 HTML 比用 js 生成快。要用到 js，那肯定是因为有动态的内容需求，需要基于数据来渲染 HTML，那么这个问题就可以引申到服务端渲染 vs. 客户端渲染。首先，单纯从首屏… 显示全部

可能我把题主的问题想得太复杂了，因为原问题几乎没有回答的意义。静态的页面肯定是直接 HTML 比用 js 生成快。

要用到 js，那肯定是因为有动态的内容需求，需要基于数据来渲染 HTML，那么这个问题就可以引申到服务端渲染 vs. 客户端渲染。
首先，单纯从首屏渲染速度来说，几乎一定是服务端渲染更快。原因如下：

假设内容相同，两者解析 HTML 并渲染的速度是一样的，不同的是客户端渲染需要先请求并加载 js，然后执行 js，请求 API 数据，最后才能进入解析和渲染的步骤。
服务端的渲染可以用比 js 效率更高的语言执行，服务器的性能配置也通常胜过用户的机器配置。

但是，服务端渲染由于计算量主要集中在服务端，那么在用户请求量很大的情况下系统负载会比客户端渲染的方案高一些。如果因此导致服务器响应变慢，那么用户体验也会下降。

客户端渲染存在的主要理由是单页应用，在首屏渲染之后，还可能需要动态地创建很多 HTML，这时候刷新整个页面效率很低，通过在前端预先加载模板，之后请求变更的数据并在前端渲染的方式，可以很好地提升用户体验。另外这样的方案很自然地使得后端变为纯数据 API，前后解耦，开发维护上有一定好处。

两者之间的选择主要取决于首屏加载速度对你的应用有多重要。对于单页富应用而言，主要的体验集中在首屏加载完毕以后的交互上（比如 gmail，加载很慢，但之后交互就很流畅），相比之下，内容类的网站，首屏加载速度则是个决定性因素。

现在也有越来越多的采用前后结合的方式，即服务端渲染首屏，之后由 js 接管，接下来的更新进行局部的前端渲染。当然，实现起来比较麻烦一点，所以很多这样的方案是基于 Node.js 实现的，前后端可以共用模板和渲染逻辑。

编辑于 2014-09-05 4 条评论感谢

收藏 • 没有帮助 • 举报 • 作者保留权利

3赞同反对，不会显示你的姓名

杨光，装逼遭雷劈

Jiahui Liu、KY Fish、知乎用户赞同

如果页面有局部ajax的需求，比如股票行情，那么在页面第一次载入的时候就可以考虑ajax载入。另一种情况就是http://weibo.com的例子，数据每时每刻都在刷新，第一次载入的时候生成静态代码没有任何意义，所以也是所有代码用js动态生成。否则，不要让js动… 显示全部

如果页面有局部ajax的需求，比如股票行情，那么在页面第一次载入的时候就可以考虑ajax载入。
另一种情况就是http://weibo.com的例子，数据每时每刻都在刷新，第一次载入的时候生成静态代码没有任何意义，所以也是所有代码用js动态生成。
否则，不要让js动态生成代码。
（所谓“js生成代码”，百分之九十九的情况是异步从服务器抓json。如果你不是这种情况，只是把html语句非要写到js代码里，然后再innerHTML一下，这就是逆天而行。）

编辑于 2014-09-06 添加评论感谢

收藏 • 没有帮助 • 举报 • 作者保留权利

1赞同反对，不会显示你的姓名

缪斯的情人，每个铅笔盒都有种装B的欲望，你呢？

知乎用户赞同

反对第一名答案，根本没答道点上，题主的意思是js动态生成html标签和直接写html形式，和服务端渲染没啥关系，无论是js还是浏览器直接渲染都是客户端渲染。回到题主的问题，这个答案很明确了，在不考虑你说的成本外，当然首选html啊，所谓静态页原则就是能静… 显示全部

反对第一名答案，根本没答道点上，题主的意思是js动态生成html标签和直接写html形式，和服务端渲染没啥关系，无论是js还是浏览器直接渲染都是客户端渲染。
回到题主的问题，这个答案很明确了，在不考虑你说的成本外，当然首选html啊，所谓静态页原则就是能静态就不要动态生成，js的每次dom操作都会涉及到重绘和重渲染，这是性能的一个主要损失点，虽然已经有很多优化方案，但还是不如直接写的静态html，很明显你可以试试写一个5000行的表格，分别用两种方法对比下。
另外，排除性能因素，静态html更容易调整样式，能更好的与设计师协调，语义化的标签更易读

发布于 2014-09-05 1 条评论感谢

收藏 • 没有帮助 • 举报 • 作者保留权利

0赞同反对，不会显示你的姓名

安而遇，喜欢js是因为它继成自lisp 的那一部分

我只想说，用JS动态生成之后那还叫静态页面吗……？

发布于 2014-09-06 4 条评论感谢

收藏 • 没有帮助 • 举报 • 作者保留权利

0赞同反对，不会显示你的姓名

严天宇，资深小胖

假如用户禁用了JavaScript......**************************************************************************************************之前看过《DOM编程艺术》。作者老在强调：“提防那些禁用JavaScript的家伙”。这里“禁用JavaScript的家伙”，一是指… 显示全部

假如用户禁用了JavaScript......

**************************************************************************************************

之前看过《DOM编程艺术》。作者老在强调：“提防那些禁用JavaScript的家伙”。
这里“禁用JavaScript的家伙”，一是指那些使用了浏览器中“禁用JavaScript”功能的用户，二则是指“搜索引擎”。
那些使用js动态生成的内容，搜索引擎是搜不到的。
我想：“自己的网站隐形了”这个结果应该和一般的网站运营者的意愿相去甚远。

发布于 2014-09-05 1 条评论感谢

收藏 • 没有帮助 • 举报 • 作者保留权利

0赞同反对，不会显示你的姓名

rambo，web全栈工程师

你是想说用纯html 跟 js拼接html。还是一个在服务器用类似ejs jade跟浏览器前端渲染html比呢？这么说你应该知道结果了吧。不过我想你用得着考虑这个问题吗？以前网上抄的很热的 ejs 比 jade快很多。测试结果新的jade比ejs 也慢不了太多啊最重要的… 显示全部

你是想说用纯html 跟 js拼接html。还是一个在服务器用类似ejs jade跟浏览器前端渲染html比呢？这么说你应该知道结果了吧。不过我想你用得着考虑这个问题吗？以前网上抄的很热的 ejs 比 jade快很多。测试结果新的jade比ejs 也慢不了太多啊最重要的还是你的使用习惯
js函数内，判断变量true后执行和false时跳出函数哪个方式比较快？

写一个静态HTML页面，直接写HTML代码和用JS动态生成代码，哪种方式要好相关推荐

“开发一个静态 HTML 页面，我要价 18000 美元，有错吗？”
作者 | Ibrahim Diallo 译者 | 王艳妮,责编 | 屠敏出品 | CSDN(ID:CSDNnews) 在信息加速发展的互联网时代,越来越多的科技公司为了专注核心竞争力业务以及降低软件 ...
js 动态生成html（js根据后台返回数据生成html页面中的table标签）（转义字符）
js 动态生成html table标签中内容js生成 html代码 js代码 js 动态生成html 触发事件传参字符转义 table标签中内容js生成 html代码 <div><t ...
用HTML写一个超级课程表页面
用HTML写一个超级课程表页面首先给大家展示一下效果图,他家可以根据自己的喜好,换成自己喜欢的颜色看到这个图可以把它肯成一个大的表格来进行做,将一些单元格进行相应的合并就可以达到上面所期望的图片效 ...
android splash 公司,正确地写一个Android Splash页面
正确地写一个Android Splash页面打开APP立即进入应用的主页面并呈现出用户想要的内容,对于用户来讲是最好的体验.但是通常APP在启动时需要进行一系列的初始化.网络加载等耗时的操作,因此启 ...
使用html简单仿写一个静态的绝地求生官网首页
这是我以前写的一个静态网页,算一个html入门的简单的教程.刚刚开始学习前端可以用这个练手 1.首先在vscode新建一个文件夹,点击如图所示,点击蓝笔圈起的图标(左边的是新建文件) 起名为绝地求生. ...
原生node写一个静态资源服务器
myanywhere 用原生node做一个简易阉割版的anywhere静态资源服务器,以提升对node与http的理解. 相关知识 es6及es7语法 http的相关网络知识响应头缓存相关压缩相 ...
给出vue写一个转盘抽奖页面
好的,下面是一种可能的方法来创建一个转盘抽奖页面: 在 HTML 文件中创建一个 div 元素作为转盘的容器. 在 CSS 文件中为转盘容器设置样式,包括大小.背景图片等. 在 Vue 组件中,使用 ...
手写一个promise用法_手写一个 Promise
1 js 的基本数据类型? 2 JavaScript 有几种类型的值? 3 什么是堆?什么是栈?它们之间有什么区别和联系? 4 内部属性 [Class] 是什么? 5 介绍 js 有哪些内置对象? 6 ...
python写一个表白程序-用Python写一个表白神器让你脱单
原标题:用Python写一个表白神器让你脱单来自公众号:Python编程时光今天是什么节日,就不用小明说了吧? 有女朋友的,该准备的礼物买了吗? 没有对象的,表白的套路学会了吗? 还没有?好吧,你 ...

写一个静态HTML页面，直接写HTML代码和用JS动态生成代码，哪种方式要好

6 个回答

写一个静态HTML页面，直接写HTML代码和用JS动态生成代码，哪种方式要好相关推荐

最新文章

热门文章