Since a large number of custom tags are used in angular, a lot of calculation work will be done on the browser side. Is there a tool that can compile this thing before publishing, so that most browsers can avoid it? For computational work, is there such a tool?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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):
You can split and combine these keywords to explore related content. There are many tools/practices/tutorials/discussions waiting for you to explore.
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.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