加载动态HTML - 服务器端或客户端

时间:2021-11-10 16:23:22

I have been working on a project, where I'm making AJAX call to load 100's of record from database, which would then be rendered on a slider.

我一直在做一个项目,我正在进行AJAX调用,从数据库加载100的记录,然后在滑块上呈现。

To be precise, the data I would be fetching is the 'Image Path' for all the images, and other details such as 'the size of slider thumbnail', 'number of thumbnails to show', etc.

确切地说,我将获取的数据是所有图像的“图像路径”,以及其他细节,例如“滑块缩略图的大小”,“要显示的缩略图的数量”等。

For this list of data, I have 2 options: 1. To generate the HTML on the server-side and send it to client, where it will be applied to the slider. 2. To generate and send json data to client. Parsing this json data and generating the Slides for the Slider.

对于这个数据列表,我有两个选项:1。在服务器端生成HTML并将其发送到客户端,它将应用于滑块。 2.生成json数据并将其发送到客户端。解析此json数据并为Slider生成幻灯片。

I'm confused as to which approach to use, for better overall performance for client/server. Google search and reading articles states me that using json data is a faster. However, after performing few initial test to fetch and render HTML shows that generating HTML on server side and sending it to client for rendering is much faster than sending the json data to the client and preparing the HTML for rendering.

我很困惑使用哪种方法,以获得更好的客户端/服务器整体性能。谷歌搜索和阅读文章指出,使用json数据更快。但是,在执行少量初始测试以获取和呈现HTML后,显示在服务器端生成HTML并将其发送到客户端进行呈现比将json数据发送到客户端并准备HTML以进行呈现要快得多。

It would be great if someone would put a light on this issue, where the server gets about 4k-5k hits per hour.

如果有人能够解决这个问题,那么服务器每小时点击量大约为4k-5k就会很棒。

2 个解决方案

#1


1  

There's a lot of really great discussion around this topic, however I tend to side with client side rendering. My reasoning is 1. If your server is getting hit very often, server side rendering slows down the response time of your server and can cause really long queue times, and 2. Because you're making the request separately from your markup and styling, you can have a splash page or some waiting animation on the user side as opposed to having them sit at a white screen while your server is compiling everything. This is just my opinion, but I've found client side rendering to provide the best UX as well as offloading computations from your web server is often a good idea

关于这个主题有很多非常好的讨论,但我倾向于支持客户端渲染。我的理由是1.如果您的服务器经常受到攻击,服务器端渲染会减慢服务器的响应时间,并导致很长的队列时间,以及2.因为您将请求与标记和样式分开,你可以在用户端有一个启动页面或一些等待动画,而不是在服务器编译所有内容时让它们坐在白色屏幕上。这只是我的看法,但我发现客户端渲染提供最好的用户体验以及从Web服务器卸载计算通常是个好主意

#2


0  

I like the answer on this link. A Short Description what it is about (Copy-Paste):

我喜欢这个链接上的答案。简短描述它是什么(复制粘贴):

I'm a bit on both sides, actually :

我有点双方,实际上:

  • When what I need on the javascript side is data, I use JSON
  • 当我在javascript方面需要的是数据时,我使用JSON

  • When what I need on the javascript side is presentation on which I will not do any calculation, I generally use HTML
  • 当我在javascript方面需要的是我不会做任何计算的演示时,我通常使用HTML

The main advantage of using HTML is when you want to replace a full portion of your page with what comes back from the Ajax request :

使用HTML的主要优点是当您想要使用Ajax请求返回的内容替换页面的完整部分时:

  • Re-building a portion of page in JS is (quite) hard

    在JS中重新构建页面的一部分是非常困难的

  • You probably already have some templating engine on the server side, that was used to generate the page in the first place... Why not reuse it ?

    你可能已经在服务器端有一些模板引擎,它首先用于生成页面...为什么不重用它?

I generally don't really take into consideration the "performance" side of things, at least on the server :

我通常不会考虑事物的“性能”方面,至少在服务器上:

  • On the server, generating a portion of HTML or some JSON won't probably make that much of a difference

    在服务器上,生成HTML或一些JSON的一部分可能不会产生太大的影响

  • About the size of the stuff that goes through the network : well, you probably don't use hundreds of KB of data/html... Using gzip on whatever you are transferring is what's going to make the biggest difference (not choosing between HTML and JSON)

    关于通过网络的东西的大小:好吧,你可能不使用数百KB的数据/ HTML ...使用gzip进行任何你传输的是最大的区别(不在HTML之间选择)和JSON)

  • One thing that could be taken into consideration, though, is what resources you'll need on the client to recreate the HTML (or the DOM structure) from the JSON data... compare that to pushing a portion of HTML into the page ;-)

    但是,可以考虑的一件事是,客户端需要从JSON数据重新创建HTML(或DOM结构)的资源...将其与将部分HTML推入页面进行比较; - )

#1


1  

There's a lot of really great discussion around this topic, however I tend to side with client side rendering. My reasoning is 1. If your server is getting hit very often, server side rendering slows down the response time of your server and can cause really long queue times, and 2. Because you're making the request separately from your markup and styling, you can have a splash page or some waiting animation on the user side as opposed to having them sit at a white screen while your server is compiling everything. This is just my opinion, but I've found client side rendering to provide the best UX as well as offloading computations from your web server is often a good idea

关于这个主题有很多非常好的讨论,但我倾向于支持客户端渲染。我的理由是1.如果您的服务器经常受到攻击,服务器端渲染会减慢服务器的响应时间,并导致很长的队列时间,以及2.因为您将请求与标记和样式分开,你可以在用户端有一个启动页面或一些等待动画,而不是在服务器编译所有内容时让它们坐在白色屏幕上。这只是我的看法,但我发现客户端渲染提供最好的用户体验以及从Web服务器卸载计算通常是个好主意

#2


0  

I like the answer on this link. A Short Description what it is about (Copy-Paste):

我喜欢这个链接上的答案。简短描述它是什么(复制粘贴):

I'm a bit on both sides, actually :

我有点双方,实际上:

  • When what I need on the javascript side is data, I use JSON
  • 当我在javascript方面需要的是数据时,我使用JSON

  • When what I need on the javascript side is presentation on which I will not do any calculation, I generally use HTML
  • 当我在javascript方面需要的是我不会做任何计算的演示时,我通常使用HTML

The main advantage of using HTML is when you want to replace a full portion of your page with what comes back from the Ajax request :

使用HTML的主要优点是当您想要使用Ajax请求返回的内容替换页面的完整部分时:

  • Re-building a portion of page in JS is (quite) hard

    在JS中重新构建页面的一部分是非常困难的

  • You probably already have some templating engine on the server side, that was used to generate the page in the first place... Why not reuse it ?

    你可能已经在服务器端有一些模板引擎,它首先用于生成页面...为什么不重用它?

I generally don't really take into consideration the "performance" side of things, at least on the server :

我通常不会考虑事物的“性能”方面,至少在服务器上:

  • On the server, generating a portion of HTML or some JSON won't probably make that much of a difference

    在服务器上,生成HTML或一些JSON的一部分可能不会产生太大的影响

  • About the size of the stuff that goes through the network : well, you probably don't use hundreds of KB of data/html... Using gzip on whatever you are transferring is what's going to make the biggest difference (not choosing between HTML and JSON)

    关于通过网络的东西的大小:好吧,你可能不使用数百KB的数据/ HTML ...使用gzip进行任何你传输的是最大的区别(不在HTML之间选择)和JSON)

  • One thing that could be taken into consideration, though, is what resources you'll need on the client to recreate the HTML (or the DOM structure) from the JSON data... compare that to pushing a portion of HTML into the page ;-)

    但是,可以考虑的一件事是,客户端需要从JSON数据重新创建HTML(或DOM结构)的资源...将其与将部分HTML推入页面进行比较; - )