如果写一个静态HTML页面,直接写HTML代码和用JS动态生成代码,哪种方式要好点?为什么?
不考虑人力因素(手写HTML太费时间排除),请从读取和解析或者其他的角度分析。谢谢
添加评论
按投票排序
按时间排序
6 个回答
可能我把题主的问题想得太复杂了,因为原问题几乎没有回答的意义。静态的页面肯定是直接 HTML 比用 js 生成快。要用到 js,那肯定是因为有动态的内容需求,需要基于数据来渲染 HTML,那么这个问题就可以引申到 服务端渲染 vs. 客户端渲染。首先,单纯从首屏…
显示全部
可能我把题主的问题想得太复杂了,因为原问题几乎没有回答的意义。静态的页面肯定是直接 HTML 比用 js 生成快。
要用到 js,那肯定是因为有动态的内容需求,需要基于数据来渲染 HTML,那么这个问题就可以引申到 服务端渲染 vs. 客户端渲染。
首先,单纯从首屏渲染速度来说,几乎一定是服务端渲染更快。原因如下:
客户端渲染存在的主要理由是单页应用,在首屏渲染之后,还可能需要动态地创建很多 HTML,这时候刷新整个页面效率很低,通过在前端预先加载模板,之后请求变更的数据并在前端渲染的方式,可以很好地提升用户体验。另外这样的方案很自然地使得后端变为纯数据 API,前后解耦,开发维护上有一定好处。
两者之间的选择主要取决于首屏加载速度对你的应用有多重要。对于单页富应用而言,主要的体验集中在首屏加载完毕以后的交互上(比如 gmail,加载很慢,但之后交互就很流畅),相比之下,内容类的网站,首屏加载速度则是个决定性因素。
现在也有越来越多的采用前后结合的方式,即服务端渲染首屏,之后由 js 接管,接下来的更新进行局部的前端渲染。当然,实现起来比较麻烦一点,所以很多这样的方案是基于 Node.js 实现的,前后端可以共用模板和渲染逻辑。
要用到 js,那肯定是因为有动态的内容需求,需要基于数据来渲染 HTML,那么这个问题就可以引申到 服务端渲染 vs. 客户端渲染。
首先,单纯从首屏渲染速度来说,几乎一定是服务端渲染更快。原因如下:
- 假设内容相同,两者解析 HTML 并渲染的速度是一样的,不同的是客户端渲染需要先请求并加载 js,然后执行 js,请求 API 数据,最后才能进入解析和渲染的步骤。
- 服务端的渲染可以用比 js 效率更高的语言执行,服务器的性能配置也通常胜过用户的机器配置。
客户端渲染存在的主要理由是单页应用,在首屏渲染之后,还可能需要动态地创建很多 HTML,这时候刷新整个页面效率很低,通过在前端预先加载模板,之后请求变更的数据并在前端渲染的方式,可以很好地提升用户体验。另外这样的方案很自然地使得后端变为纯数据 API,前后解耦,开发维护上有一定好处。
两者之间的选择主要取决于首屏加载速度对你的应用有多重要。对于单页富应用而言,主要的体验集中在首屏加载完毕以后的交互上(比如 gmail,加载很慢,但之后交互就很流畅),相比之下,内容类的网站,首屏加载速度则是个决定性因素。
现在也有越来越多的采用前后结合的方式,即服务端渲染首屏,之后由 js 接管,接下来的更新进行局部的前端渲染。当然,实现起来比较麻烦一点,所以很多这样的方案是基于 Node.js 实现的,前后端可以共用模板和渲染逻辑。
Jiahui Liu、KY Fish、知乎用户
赞同
如果页面有局部ajax的需求,比如股票行情,那么在页面第一次载入的时候就可以考虑ajax载入。另一种情况就是
http://weibo.com的例子,数据每时每刻都在刷新,第一次载入的时候生成静态代码没有任何意义,所以也是所有代码用js动态生成。否则,不要让js动…
显示全部
如果页面有局部ajax的需求,比如股票行情,那么在页面第一次载入的时候就可以考虑ajax载入。
另一种情况就是 http://weibo.com的例子,数据每时每刻都在刷新,第一次载入的时候生成静态代码没有任何意义,所以也是所有代码用js动态生成。
否则,不要让js动态生成代码。
(所谓“js生成代码”,百分之九十九的情况是异步从服务器抓json。如果你不是这种情况,只是把html语句非要写到js代码里,然后再innerHTML一下,这就是逆天而行。)
另一种情况就是 http://weibo.com的例子,数据每时每刻都在刷新,第一次载入的时候生成静态代码没有任何意义,所以也是所有代码用js动态生成。
否则,不要让js动态生成代码。
(所谓“js生成代码”,百分之九十九的情况是异步从服务器抓json。如果你不是这种情况,只是把html语句非要写到js代码里,然后再innerHTML一下,这就是逆天而行。)
知乎用户
赞同
反对第一名答案,根本没答道点上,题主的意思是js动态生成html标签和直接写html形式,和服务端渲染没啥关系,无论是js还是浏览器直接渲染都是客户端渲染。回到题主的问题,这个答案很明确了,在不考虑你说的成本外,当然首选html啊,所谓静态页原则就是能静…
显示全部
反对第一名答案,根本没答道点上,题主的意思是js动态生成html标签和直接写html形式,和服务端渲染没啥关系,无论是js还是浏览器直接渲染都是客户端渲染。
回到题主的问题,这个答案很明确了,在不考虑你说的成本外,当然首选html啊,所谓静态页原则就是能静态就不要动态生成,js的每次dom操作都会涉及到重绘和重渲染,这是性能的一个主要损失点,虽然已经有很多优化方案,但还是不如直接写的静态html,很明显你可以试试写一个5000行的表格,分别用两种方法对比下。
另外,排除性能因素,静态html更容易调整样式,能更好的与设计师协调,语义化的标签更易读
回到题主的问题,这个答案很明确了,在不考虑你说的成本外,当然首选html啊,所谓静态页原则就是能静态就不要动态生成,js的每次dom操作都会涉及到重绘和重渲染,这是性能的一个主要损失点,虽然已经有很多优化方案,但还是不如直接写的静态html,很明显你可以试试写一个5000行的表格,分别用两种方法对比下。
另外,排除性能因素,静态html更容易调整样式,能更好的与设计师协调,语义化的标签更易读
假如用户禁用了JavaScript......**************************************************************************************************之前看过《DOM编程艺术》。作者老在强调:“提防那些禁用JavaScript的家伙”。这里“禁用JavaScript的家伙”,一是指…
显示全部
假如用户禁用了JavaScript......
**************************************************************************************************
之前看过《DOM编程艺术》。作者老在强调:“提防那些禁用JavaScript的家伙”。
这里“禁用JavaScript的家伙”,一是指那些使用了浏览器中“禁用JavaScript”功能的用户,二则是指“搜索引擎”。
那些使用js动态生成的内容,搜索引擎是搜不到的。
我想:“自己的网站隐形了”这个结果应该和一般的网站运营者的意愿相去甚远。
**************************************************************************************************
之前看过《DOM编程艺术》。作者老在强调:“提防那些禁用JavaScript的家伙”。
这里“禁用JavaScript的家伙”,一是指那些使用了浏览器中“禁用JavaScript”功能的用户,二则是指“搜索引擎”。
那些使用js动态生成的内容,搜索引擎是搜不到的。
我想:“自己的网站隐形了”这个结果应该和一般的网站运营者的意愿相去甚远。
你是想说 用 纯html 跟 js拼接html。 还是一个在服务器用类似ejs jade跟浏览器前端渲染html比呢? 这么说 你应该知道结果了吧。 不过我想你用得着考虑这个问题吗? 以前网上抄的很热的 ejs 比 jade快很多。 测试结果 新的jade比ejs 也慢不了太多啊 最重要的…
显示全部
你是想说 用 纯html 跟 js拼接html。 还是一个在服务器用类似ejs jade跟浏览器前端渲染html比呢? 这么说 你应该知道结果了吧。 不过我想你用得着考虑这个问题吗? 以前网上抄的很热的 ejs 比 jade快很多。 测试结果 新的jade比ejs 也慢不了太多啊 最重要的还是你的使用习惯
js函数内,判断变量true后执行和false时跳出函数哪个方式比较快?
js函数内,判断变量true后执行和false时跳出函数哪个方式比较快?