欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

AngularJS真的那么完美?angularjs几点问题的详细分析

程序员文章站 2022-05-01 12:34:53
...

先不说AngularJS优略,至少大部分前端工作者还是对AngularJS有着*的推崇的。因为它使开发变得简单。那么问题来了,为什么很多知名网站都没有用到Angular呢? 一起来看这篇文章吧

我们就从几点说起:

1、最糟糕的SEO友好性

这一点无疑是非常致命的,这造成了很多年轻的创业公司都轻易不敢尝试的一个重要原因。搜索引擎爬虫和社交预览截图无法识别使用JavaScript渲染的页面,并且现有的解决方案非常复杂,非常慢。

事实上,通常一个页面的加载是由五部分组成的(拿java为例):

  1. 浏览器像服务器发送Http请求

  2. 服务器针对这个请求进行处理得到结果数据,得到Jsp模板,将这些数据通过模板build成浏览器认识的html文本 并发送给浏览器

  3. 浏览器解析HTML文本并将页面内容呈现出来

可以看出,最后一步当浏览器拿到html文本时,也就是这个流程结束的时候,我们需要的数据都会呈现出来了。而使用Angular的过程是这样的:

  1. 浏览器像前端服务器发送Http请求

  2. 前端服务器发送HTML模板到浏览器

  3. 浏览器解析HTML并执行js脚本,向业务服务器发送Http请求

  4. 服务器针对这个请求进行处理得到结果数据 将结果数据封装成Json格式并发送给浏览器

  5. 浏览器解析Json并将数据呈现在页面中

这两种流程,一个是把页面build的操作放到了服务器中执行,一个是放到了浏览器中执行。这是最明显的差别,先不说多出来的交互次数,单单从搜索引擎眼里来看的话,它只能看到浏览器拿到的静态内容,它不会去执行你的js代码。

前者搜索引擎看到的是一篇文章,后者搜索引擎看到的是一个个的花括号!这也是为什么Angular渲染的页面会被列入百度‘黑名单’的原因所在。那么如何解决呢?

引用一段话:

有两种方法让爬虫访问你的网站。你可以在你的服务器端运行一个浏览器实例,然后根据JavaScript执行后的DOM生成HTML页面。或者你另外建一套为搜索爬虫准备的HTML静态页面。
前一种方案需要你安装WebKit(也有可能是Xvfb),然后在页面加载完成以后生成页面(你也可以使用缓存,但这增加了更多的复杂性。)这样会增加你的页面加载时间,从而影响你的搜索引擎排名。
后一种方案(制作另外一个服务器端网站),可以满足简单的网站,但是如果你的页面非常多样,这将是一个恶梦。而且如果你的备用网站跟你的主站完全不一致,Google会狠狠地惩罚你的,你的流量会直线下降。

2、最糟糕的用户体验

在使用AngularJS后,页面的呈现方式被拆分为了多个过程,这样如果我访问一个页面,而这个页面的内容有比较多的时候,我会明显的感觉到浏览器的渲染过程,我有太多的内容要加载,这个过程是非常糟糕的,尤其是将加载过程放到客户端的时候,它的延迟会非常大。

在富JavaScript应用中,页面转换通常是立即发生的,然后从服务器上加载不同的元素。在服务器端应用中,页面没有等客户端把全面数据下载完,就开始呈现数据。

听起来像是客户端的应用好一些,但实际这是个假像。
想像一下,当用户点了一个链接,客户端的JS应用马上出现了一个加载动画,但这些数据需要加载5秒钟。应用只是第一眼看上去快了,
先不讨论有多少程序员想要在这一个页面上添加功能。你很难要求人家必须通过异步的方式很快的将内容呈现出来,其实页面下面的东西晚一点加载出来人家也是不会关心的。

在服务器端的应用中,如果一个API调用很慢,整个页面的加载就变慢了。你无法忽视服务端的慢,因为他会影响到每一个人。但是客户端的慢很容易被忽视。

你可以很轻松的解决掉服务端的慢,因为服务端是可控的,是在你配置的机器上运行的,你可以清楚的知道在这台机器上发生了什么。而且服务端大都是在一个内部的集群网络中,这使他们之间的信息传递非常的快,即使一个动作需要多次的信息传递也可以在瞬间完成。但是把这些传递放在客户端上的话会有诸多因素拖慢它的速度。
我们不能严格控制用户使用什么浏览器、也不能控制用户机器的配置,但是我们可以控制自己服务器的一切。

3、最重要的太过鸡肋

鸡肋?有人会说,AngularJS的各种好处,比如‘易于维护’、‘编码方便’等等。但这是建立在牺牲性能和用户体验的前提下的。并且所谓的‘依赖注入’等后端的思想强行引到前端中来,这样做看起来高大上了,但似乎哪里不对?后端分架构、拆服务,以及使用各种框架等等,是为了更简单的开发,而web前端,本身体现在浏览器中的就是HTML文本而已,它本身就是个静态的、且不涉及业务的东西,我更认为他这么做没什么实质性的帮助。

从这些方便,或许不能说鸡肋,但是,在任何场景下,几乎都有一种方案可以完美的取代AngularJS,并且做的比它还要好。这。。。这就尴尬了!比如freemaker

freemaker大家不会太陌生,它可以直接调用Java提供的freemakerApi函数,而不是通过ajax去执行http请求异步获取数据。同样,他的性能同样也玩爆AngularJS 或许和它比性能有点儿欺负人了,但是同样作为一款模板引擎而言,freemaker的确有资格在性能上碾压AngularJS。

在易用上,freemaker除了可以直接调用Java函数以外,依然也可以通过http来获取数据,但他会把获取出来的数据统一build成html文本后再交给浏览器去解析,最重要的是,他也支持依赖注入等相关特性,并且和后端程序完美结合,结合以上几点,不管是从扩展性、可维护性、整体性能、用户体验等方面来说,都是碾压了AngularJS。而唯一比不上AngularJS的,则是开发阶段了。freemaker开发相对于angular而言,更复杂一些,或者说angular相对而言,在开发过程中要简单得多,如果仅是因为开发变得愉快而大量的舍去诸多性能方面 的因素的话,这是非常可怕的,一部分人在追求性能的机制去不停的优化,一部分人为了更简单的开发去优化,这不能说谁对谁错,但我更偏向前者。

抛开freemaker不谈,在nodejs中童同样有大量的可取代的解决方案同样有大量的mvc框架,这里就不多讲了。

我认为在浏览器中的js的作用更多的应该放到交互中去,而不是内容体现中,那不是正确的解决方式。

4、应用场景问题

AngularJS在前后端分离的场景中看起来是个不错的选择,但上面说了,在前后端分离时,AngularJS考虑的太过狭隘,我们分离后,除了开发变得方便了,但失去了原有的性能和体验,这无疑是失败的,结合这些原因,或许可以使用AngularJS的场景几乎非常少了,但似乎在后台(后端管理控制面板)、WEBApp这两个场景中可以使用。

那么问题来了,开发管理控制台页的确不需要对性能考虑太多,也不需要针对SEO做优化,但同样这个场景中的中点是在交互上,而不是内容展示上。AngularJS作为一个前端模板引擎,他失去了他的定位。他的作用发挥的微乎其微了,这很尴尬。

而在开发WebApp时,她或许不用考虑SEO,对性能而言,App框架可以对性能做优化,因为我可以严格的控制用户使用的客户端版本。我可以选择App框架 ,但既然可以自己选择App开发框架了,那么任何一种App框架几乎都有超越AngularJS的方案,无论是性能和易用性上。所以这似乎比开发管理控制台页面更糟糕。

综合这几点,我认为AngularJS的地位就很尴尬了。

而唯一没有冲突的场景,可能就是体现在开发企业内部应用的场景上了。

这或许就是为什么AngularJS看起来似乎很棒,却很少有企业去选择。追求性能是每个程序员都应具备的,尤其是从事后端开发工作的,他们考虑的会更多,不可能为了看起来开发方便而放弃体验。如果真的放弃了的话,还分什么初中高?哪里还来的架构师?一堆代码磋商去就开搞罢了。

同样,这也造成了一些前端工程师面试时的尴尬:

问:会用AngularJs嘛?
答:会!呃。。但没怎么用过。。但我真的会。。呃

先不说AngularJS优略,至少大部分前端工作者还是对AngularJS有着*的推崇的。因为它使开发变得简单。那么问题来了,为什么很多知名网站都没有用到Angular呢?
下面我从几点说起:

1、最糟糕的SEO友好性

这一点无疑是非常致命的,这造成了很多年轻的创业公司都轻易不敢尝试的一个重要原因。搜索引擎爬虫和社交预览截图无法识别使用JavaScript渲染的页面,并且现有的解决方案非常复杂,非常慢。

事实上,通常一个页面的加载是由五部分组成的(拿java为例):

  1. 浏览器像服务器发送Http请求

  2. 服务器针对这个请求进行处理得到结果数据,得到Jsp模板,将这些数据通过模板build成浏览器认识的html文本 并发送给浏览器

  3. 浏览器解析HTML文本并将页面内容呈现出来

可以看出,最后一步当浏览器拿到html文本时,也就是这个流程结束的时候,我们需要的数据都会呈现出来了。而使用Angular的过程是这样的:

  1. 浏览器像前端服务器发送Http请求

  2. 前端服务器发送HTML模板到浏览器

  3. 浏览器解析HTML并执行js脚本,向业务服务器发送Http请求

  4. 服务器针对这个请求进行处理得到结果数据 将结果数据封装成Json格式并发送给浏览器

  5. 浏览器解析Json并将数据呈现在页面中

这两种流程,一个是把页面build的操作放到了服务器中执行,一个是放到了浏览器中执行。这是最明显的差别,先不说多出来的交互次数,单单从搜索引擎眼里来看的话,它只能看到浏览器拿到的静态内容,它不会去执行你的js代码。

前者搜索引擎看到的是一篇文章,后者搜索引擎看到的是一个个的花括号!这也是为什么Angular渲染的页面会被列入百度‘黑名单’的原因所在。那么如何解决呢?

引用一段话:

有两种方法让爬虫访问你的网站。你可以在你的服务器端运行一个浏览器实例,然后根据JavaScript执行后的DOM生成HTML页面。或者你另外建一套为搜索爬虫准备的HTML静态页面。
前一种方案需要你安装WebKit(也有可能是Xvfb),然后在页面加载完成以后生成页面(你也可以使用缓存,但这增加了更多的复杂性。)这样会增加你的页面加载时间,从而影响你的搜索引擎排名。
后一种方案(制作另外一个服务器端网站),可以满足简单的网站,但是如果你的页面非常多样,这将是一个恶梦。而且如果你的备用网站跟你的主站完全不一致,Google会狠狠地惩罚你的,你的流量会直线下降。

2、最糟糕的用户体验

在使用AngularJS后,页面的呈现方式被拆分为了多个过程,这样如果我访问一个页面,而这个页面的内容有比较多的时候,我会明显的感觉到浏览器的渲染过程,我有太多的内容要加载,这个过程是非常糟糕的,尤其是将加载过程放到客户端的时候,它的延迟会非常大。

在富JavaScript应用中,页面转换通常是立即发生的,然后从服务器上加载不同的元素。在服务器端应用中,页面没有等客户端把全面数据下载完,就开始呈现数据。

听起来像是客户端的应用好一些,但实际这是个假像。
想像一下,当用户点了一个链接,客户端的JS应用马上出现了一个加载动画,但这些数据需要加载5秒钟。应用只是第一眼看上去快了,
先不讨论有多少程序员想要在这一个页面上添加功能。你很难要求人家必须通过异步的方式很快的将内容呈现出来,其实页面下面的东西晚一点加载出来人家也是不会关心的。

在服务器端的应用中,如果一个API调用很慢,整个页面的加载就变慢了。你无法忽视服务端的慢,因为他会影响到每一个人。但是客户端的慢很容易被忽视。

你可以很轻松的解决掉服务端的慢,因为服务端是可控的,是在你配置的机器上运行的,你可以清楚的知道在这台机器上发生了什么。而且服务端大都是在一个内部的集群网络中,这使他们之间的信息传递非常的快,即使一个动作需要多次的信息传递也可以在瞬间完成。但是把这些传递放在客户端上的话会有诸多因素拖慢它的速度。
我们不能严格控制用户使用什么浏览器、也不能控制用户机器的配置,但是我们可以控制自己服务器的一切。(想看更多就到PHP中文网AngularJS开发手册中学习)

3、最重要的太过鸡肋

鸡肋?有人会说,AngularJS的各种好处,比如‘易于维护’、‘编码方便’等等。但这是建立在牺牲性能和用户体验的前提下的。并且所谓的‘依赖注入’等后端的思想强行引到前端中来,这样做看起来高大上了,但似乎哪里不对?后端分架构、拆服务,以及使用各种框架等等,是为了更简单的开发,而web前端,本身体现在浏览器中的就是HTML文本而已,它本身就是个静态的、且不涉及业务的东西,我更认为他这么做没什么实质性的帮助。

从这些方便,或许不能说鸡肋,但是,在任何场景下,几乎都有一种方案可以完美的取代AngularJS,并且做的比它还要好。这。。。这就尴尬了!比如freemaker

freemaker大家不会太陌生,它可以直接调用Java提供的freemakerApi函数,而不是通过ajax去执行http请求异步获取数据。同样,他的性能同样也玩爆AngularJS 或许和它比性能有点儿欺负人了,但是同样作为一款模板引擎而言,freemaker的确有资格在性能上碾压AngularJS。

在易用上,freemaker除了可以直接调用Java函数以外,依然也可以通过http来获取数据,但他会把获取出来的数据统一build成html文本后再交给浏览器去解析,最重要的是,他也支持依赖注入等相关特性,并且和后端程序完美结合,结合以上几点,不管是从扩展性、可维护性、整体性能、用户体验等方面来说,都是碾压了AngularJS。而唯一比不上AngularJS的,则是开发阶段了。freemaker开发相对于angular而言,更复杂一些,或者说angular相对而言,在开发过程中要简单得多,如果仅是因为开发变得愉快而大量的舍去诸多性能方面 的因素的话,这是非常可怕的,一部分人在追求性能的机制去不停的优化,一部分人为了更简单的开发去优化,这不能说谁对谁错,但我更偏向前者。

抛开freemaker不谈,在nodejs中童同样有大量的可取代的解决方案同样有大量的mvc框架,这里就不多讲了。

我认为在浏览器中的js的作用更多的应该放到交互中去,而不是内容体现中,那不是正确的解决方式。

4、应用场景问题

AngularJS在前后端分离的场景中看起来是个不错的选择,但上面说了,在前后端分离时,AngularJS考虑的太过狭隘,我们分离后,除了开发变得方便了,但失去了原有的性能和体验,这无疑是失败的,结合这些原因,或许可以使用AngularJS的场景几乎非常少了,但似乎在后台(后端管理控制面板)、WEBApp这两个场景中可以使用。

那么问题来了,开发管理控制台页的确不需要对性能考虑太多,也不需要针对SEO做优化,但同样这个场景中的中点是在交互上,而不是内容展示上。AngularJS作为一个前端模板引擎,他失去了他的定位。他的作用发挥的微乎其微了,这很尴尬。

而在开发WebApp时,她或许不用考虑SEO,对性能而言,App框架可以对性能做优化,因为我可以严格的控制用户使用的客户端版本。我可以选择App框架 ,但既然可以自己选择App开发框架了,那么任何一种App框架几乎都有超越AngularJS的方案,无论是性能和易用性上。所以这似乎比开发管理控制台页面更糟糕。

综合这几点,我认为AngularJS的地位就很尴尬了。

而唯一没有冲突的场景,可能就是体现在开发企业内部应用的场景上了。

这或许就是为什么AngularJS看起来似乎很棒,却很少有企业去选择。追求性能是每个程序员都应具备的,尤其是从事后端开发工作的,他们考虑的会更多,不可能为了看起来开发方便而放弃体验。如果真的放弃了的话,还分什么初中高?哪里还来的架构师?一堆代码磋商去就开搞罢了。

同样,这也造成了一些前端工程师面试时的尴尬:

问:会用AngularJs嘛?

答:会!呃。。但没怎么用过。。但我真的会。。呃

本篇文章到这就结束了(想看更多就到PHP中文网AngularJS使用手册中学习),有问题的可以在下方留言提问。

以上就是AngularJS真的那么完美?angularjs几点问题的详细分析的详细内容,更多请关注其它相关文章!

相关标签: javascript angular