由于angular中使用了大量自定义标签,所有会在浏览器端做很多的计算工作,有没有一种工具可以将这件事情在发布前先编译好,这样就可以避免大部分浏览器的计算工作,有这样的工具吗?
某草草2017-05-15 16:52:43
Actually, this is a big topic, but I won’t go into it here because it’s too laborious - to understand all the details, it’s not enough to only know Angular.
To summarize the key points, I will say two points:
It is not difficult to pre-compile templates (here it refers to caching static templates to $templateCache
,从而在应用加载的时候直接把模版载入内存),但是对 Angular 这样重度依赖数据绑定的框架来说,编译模版那点工作量不值一提。除非说你的项目无比庞大,模版多的管理不过来——但此时更严重的是本地开发时模版预编译的时间损耗——所以把巨型应用模块化分割才是正途;这就有点跑题了。像 ng-repeat
这类的指令会是我们想“减轻浏览器负担”的目标,也就是在浏览器载入之前就把此类指令展开,填充 DOM;而像 ng-if
). Such instructions cannot be pre-processed because they often rely on "data binding".
I'll give you an example, say there's a section on the page consisting of ng-if
控制,根据当前用户是否有权限来判断,但是是否有权限这个状态必须得等用户登录(或者别的预置条件)之后才能获取到——我们要如何在浏览器之外预处理 ng-if
?它会涉及到 DOM 操作,它也会影响到浏览器性能,你说是预处理还是不预处理?如果所有这样的标签都要作一番权衡才能决定是否预处理,那这个代价也太大了,不如不用 Angular。Angular 做不到完全的静态化(顺便一提,ESNext 的 Object.observe()
which would be the key to solving it), while semi-static is fine, but often not because of browser performance.
In fact, you have to believe that the performance of modern browsers is very strong. Client-side rendering is not the "performance bottleneck" that many people imagine. Many attempts at server-side rendering (for Angular) are mainly for search engine optimization. rather than a performance improvement. Let me give you some keywords to research. This is a good opportunity to learn (use an English search engine, there are no useful results in Chinese):
To summarize. For JS applications based mainly on "data binding" (such as Angular), due to the current lack of support at the language and environment levels (such as the aforementioned Object.observe()
, etc.), complete pre-compilation cannot be achieved at the DOM level. Or static. It is possible to preprocess parts of the DOM in other ways before entering the browser, but it will not have a huge impact on the overall performance improvement of the application or/and the performance improvement of the browser, and the cost of implementing these preprocessing itself is not Not small; unless you are making an application with extremely stringent performance (such as Taobao?), it is still a decision.
ringa_lee2017-05-15 16:52:43
From a search engine optimization perspective, this also makes sense. Ready-made tools suitable for AngularJS include
prerender.io
angularjs-server
Taobao’s Midway Island should be a similar starting point