最近在做一个小项目,网页需要动态的生成,便有了下面的问题!
自己乱写的js生成HTML代码,js功底太差,并没有完成,将就这贴上,。。。。
代码如下:
<script type="text/javascript">
$(document).ready(function(){
//左半
$("#GroupGrid").append("<div class='leftB'></div>");
for(var i = 0; i < 10; i++){
$(".leftB").append("<div class='leftBin'></div>");
}
$(".leftBin").append("<div class='leftBinin'></div>");
//右半
$("#GroupGrid").append("<div class='rightB'></div>");
$(".rightB").append("<div class='rightBleftup'></div>");
$(".rightB").append("<div class='rightBleftdown'></div>");
for(var i = 0; i < 10; i++){
$(".rightB").append("<div class='twoSmallSlot'></div>");
}
for(var i = 0; i < 3; i++){
$(".twoSmallSlot").append("<div class='smallSlot'></div>");
}
alert("dasd");
});
</script>
对于过多的HTML代码,还是通过JSTL标签动态生成吧!(这句根据下文,应该是错误的啦!)
代码待更新。。。。。。。。
再更
对于这个问题通过各方面的查阅资料,发现这是一个关于前端渲染与后端渲染的问题,也就是客户端需要的动态数据,是通过Java servlet代码/JSP中JSTL标签动态生成(本质都是servlet Java代码),或是通过前端js动态的生成,前者是在服务器端数据处理,后者是在客户端数据处理,这个问题就牵扯到前后端分离的话题了。
下面是前端渲染与后端渲染的区别,比较好理解
前端渲染:
指的是后端返回JSON数据,前端利用预先写的html模板,循环读取JSON数据,拼接字符串(es6的模板字符串特性大大减少了拼接字符串的的成本),并插入页面。
好处:网络传输数据量小。不占用服务端运算资源(解析模板),模板在前端(很有可能仅部分在前端),改结构变交互都前端自己来了,改完自己调就行。
坏处:前端耗时较多,对前端工作人员水平要求相对较高。前端代码较多,因为部分以前在后台处理的交互逻辑交给了前端处理。占用少部分客户端运算资源用于解析模板。
后端渲染:
前端请求,后端用后台模板引擎直接生成html,前端接受到数据之后,直接插入页面。
好处:前端耗时少,即减少了首屏时间,模板统一在后端。前端(相对)省事,不占用客户端运算资源(解析模板)
坏处:占用服务器资源。
前端渲染与后端渲染对比:
后端渲染:
页面呈现速度:快,受限于用户的带宽
流量消耗:少一点点(可以省去前端框架部分的代码)
可维护性:差(前后端东西放一起,掐架多年,早就在闹分手啦)
seo友好度:好
编码效率:低(这个跟不同的团队不同,可能不对)
前端渲染:
页面呈现速度:主要受限于带宽和客户端机器的好坏,优化的好,可以逐步动态展开内容,感觉上会更快一点。
流量消耗:多一点点(一个前端框架大概50KB)当然,有的用后端渲染的项目前端部分也有在用框架。
可维护性:好,前后端分离,各施其职,代码一目明了。
SEO友好度:差,大量使用ajax,多数浏览器不能抓取ajax数据。
编码效率:高,前后端各自只做自己擅长的东西,后端最后只输出接口,不用管页面呈现,只要前后端人员能力不错,效率不会低。
解释完毕。。。。。。
何为seo:搜索引擎优化(Search Engine Optimization,简称SEO)是一种利用搜索引擎的搜索规则来提高目的网站在有关搜索引擎内的排名的方式。
对搜索引擎不友好的网站有哪些特征:
1、网页中大量采用图片或者Flash等富媒体(Rich Media)形式,没有可以检索的文本信息,而SEO最基本的就是文章SEO和图片SEO;
标题,或者标题中没有包含有效的关键词;
3、网页正文中有效关键词比较少(一般小于整文章2%~8%);
4、网站导航系统让搜索引擎“看不懂”;
5、大量动态网页让搜索引擎无法检索;
6、没有被其他已经被搜索引擎收录的网站提供的链接;
7、网站中充斥大量欺骗搜索引擎的垃圾信息,如“过渡页”、“桥页”、颜色与背景色相同的文字;
8、网站中缺少原创的内容,完全照搬硬抄别人的内容等。
OK
对于这个问题优缺点以了解,但在这个小项目中,我是负责后端开发的,我还是决定在后端解决这个问题,也会鼓励伙伴在前端实现同样的效果: