本人是前端小白菜,最近在苦学前端,做点自己的学习小总结。欢迎各位大佬纠错。
模版引擎原来一开始是后端使用的,后来才慢慢支持前端,听起来很高大上的模版引擎,什么页面渲染,我不喜欢这么专业的难懂的叫法,所以我要自己亲自总结一下。
服务端渲染
模版引擎不关心内容,只关心自己能识别的模版语法,比如art-template只识别 {{ }} 这种胡须语法块,在读取HTML静态页面的时候,其实就是读取一大串字符串,然后在字符串之间夹着 {{ name }} , {{ if sex !==‘male’ }} , {{ each XX of List }}等等语法块的时候,就是用字符串替换,把那个占位符作用的语法块替换掉,循环有一套替换规则,if 判断也有自己的一套替换规则,替换的内容可以是自己定义的,也可以是数据库查出来的,可以是请求别人接口得到的等等都可以,然后再把填充好数据的HTML页面(其实就是一个String),发给浏览器,让浏览器读取,解析,展示。
这样做其实对服务器带宽会有一定要求,因为是服务端一次加载全部展示数据,渲染后的页面很大(包含着大量图片,视频,音频),就会导致页面首次加载很慢,第二次刷新因为有缓存的原因,相对会快一点,这样就是通过模版引擎做的服务端渲染。。。现在很多电商网站都会采用这一种方式吧,算是比较主流。这样只发起一次请求,却要服务端完成这么多替换操作,数据填充,循环,判断,应该算是计算密集型吧?
客户端渲染
而客户端渲染,最常见的例子,就是让我想起了那年夏天,在大学闷热的机房,女老师教我们的静态页面,那些标签,左右浮动效果,以及AJAX异步,在客户发起请求的时候,返回一个页面,数据展示还是空的,需要过一两秒,或者需要鼠标移动,下拉之类的触发ajax异步,通过异步的方式再次向服务器发起请求,再返回数据,这样的用户体验相对会比较好吧,虽然有点奇怪,看着一个空网站,然后才有数据慢慢展示,这样的渲染一个页面,发起的请求是多次的,算是IO密集型吧?
我做过WebMagic+Selenium的动态爬虫(在另外一篇博客),当时需求如果爬取服务端渲染的数据,它是跟随着页面一起展示的,非常好拿,整个页面拿回来再解析就行了,通过简简单单的CURL,JSOUP,XSOUP之类的都可以搞定。如果是客户端渲染,它数据展示有触发条件,所以要用自动化测试工具selenium那一套模拟人的操作,去触发了客户端数据渲染,再放小虫子进去收割。
好了,总结就先到这里,有说的不对的地方欢迎大佬纠错哦