亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Angular?服務器端渲染應用常見的內(nèi)存泄漏問題小結

 更新時間:2022年06月23日 10:33:46   作者:JerryWang_sap  
這篇文章主要介紹了Angular?服務器端渲染應用一個常見的內(nèi)存泄漏問題,主要包括屏幕閃爍問題,出現(xiàn)閃爍的原因,在于 Angular 不知道如何重用它在服務器上成功渲染的內(nèi)容,本文給大家介紹的非常詳細,需要的朋友一起學習下吧

考慮如下的 Angular 代碼:

import { Injectable, NgZone } from "@angular/core";
import { interval } from "rxjs";
@Injectable()
export class LocationService {
  constructor(ngZone: NgZone) {
    ngZone.runOutsideAngular(() => interval(1000).subscribe(() => {
      ...
    }));
  }
}

這段代碼不會影響應用程序的穩(wěn)定性,但是如果應用程序在服務器上被銷毀,傳遞給訂閱的回調(diào)將繼續(xù)被調(diào)用。 服務器上應用程序的每次啟動都會以 interval 的形式留下一個 artifact.

這是一個潛在的內(nèi)存泄漏點。

這個內(nèi)存泄漏風險可以通過使用 ngOnDestoroy 鉤子解決。這個鉤子適用于 Component 和 service. 我們需要保存 interval 返回的訂閱(subscription),并在服務被銷毀時終止它。

退訂 subscription 的技巧有很多,下面是一個例子:

import { Injectable, NgZone, OnDestroy } from "@angular/core";
import { interval, Subscription } from "rxjs";
@Injectable()
export class LocationService implements OnDestroy {
  private subscription: Subscription;

  constructor(ngZone: NgZone) {
    this.subscription = ngZone.runOutsideAngular(() =>
      interval(1000).subscribe(() => {})
    );
  }
  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }
}

屏幕閃爍問題

用戶的瀏覽器顯示從服務器渲染并返回的頁面,一瞬間出現(xiàn)白屏,閃爍片刻,然后應用程序開始運行,看起來一切正常。出現(xiàn)閃爍的原因,在于 Angular 不知道如何重用它在服務器上成功渲染的內(nèi)容。在客戶端環(huán)境中,它從根元素中 strip 所有 HTML 并重新開始繪制。

閃爍問題可以抽象成如下步驟:

關于正在發(fā)生的事情的一個非常簡化的解釋:

(1) 用戶訪問應用程序(或刷新)

(2) 服務器在服務器中構建html

(3) 它被發(fā)送到用戶的瀏覽器端

(4) Angular 重新創(chuàng)建 應用程序(就好像它是一個常規(guī)的非 Angular Universal 程序)

(5) 當上述四個步驟發(fā)生時,用戶會看到一個 blink 即閃爍的屏幕。

代碼如下:

// You can see this by adding:
// You should see a console log in the server
// `Running on the server with appId=my-app-id`
// and then you'll see in the browser console something like
// `Running on the browser with appId=my-app-id`
export class AppModule {
  constructor(
    @Inject(PLATFORM_ID) private platformId: Object,
    @Inject(APP_ID) private appId: string) {
    const platform = isPlatformBrowser(this.platformId) ?
      'in the browser' : 'on the server';
    console.log(`Running ${platform} with appId=${this.appId}`);
  }
}

無法通過 API 的方式終止渲染

什么時候需要人為干預的方式終止一個服務器端渲染?

始終明確一點,渲染應用程序的時間點發(fā)生在應用程序 applicationRef.isStable 返回 true 時,參考下列代碼:

github.com/angular/ang…

function _render<T>(
    platform: PlatformRef, moduleRefPromise: Promise<NgModuleRef<T>>): Promise<string> {
  return moduleRefPromise.then((moduleRef) => {
    const transitionId = moduleRef.injector.get(?TRANSITION_ID, null);
    if (!transitionId) {
      throw new Error(
          `renderModule[Factory]() requires the use of BrowserModule.withServerTransition() to ensure
the server-rendered app can be properly bootstrapped into a client app.`);
    }
    const applicationRef: ApplicationRef = moduleRef.injector.get(ApplicationRef);
    return applicationRef.isStable.pipe((first((isStable: boolean) => isStable)))
        .toPromise()
        .then(() => {
          const platformState = platform.injector.get(PlatformState);
         ...

到此這篇關于Angular 服務器端渲染應用一個常見的內(nèi)存泄漏問題的文章就介紹到這了,更多相關Angular內(nèi)存泄漏內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • angularjs的一些優(yōu)化小技巧

    angularjs的一些優(yōu)化小技巧

    這篇文章主要介紹了angularjs的一些優(yōu)化小技巧,本文總結了5種優(yōu)化技巧,如一次綁定、盡可能少調(diào)用 ng-repeat、盡量在指令里寫原生語法、頁面內(nèi)盡量少用filters等,需要的朋友可以參考下
    2014-12-12
  • 詳解如何使用webpack+es6開發(fā)angular1.x

    詳解如何使用webpack+es6開發(fā)angular1.x

    本篇文章主要介紹了詳解如何使用webpack+es6開發(fā)angular1.x,具有一定的參考價值,有興趣的可以了解一下
    2017-08-08
  • AngularJS語法詳解(續(xù))

    AngularJS語法詳解(續(xù))

    本文續(xù)上文,接著介紹AngularJS語法,和上文一樣,都是通過示例來向大家分析說明,非常不錯的一篇文章,推薦給大家。
    2015-01-01
  • AngularJS基于ngInfiniteScroll實現(xiàn)下拉滾動加載的方法

    AngularJS基于ngInfiniteScroll實現(xiàn)下拉滾動加載的方法

    這篇文章主要介紹了AngularJS基于ngInfiniteScroll實現(xiàn)下拉滾動加載的方法,結合實例形式分析AngularJS下拉滾動插件ngInfiniteScroll的下載、功能、屬性及相關使用方法,需要的朋友可以參考下
    2016-12-12
  • 關于使用axios的一些心得技巧分享

    關于使用axios的一些心得技巧分享

    vue更新到2.0之后,作者就宣告不再對vue-resource更新,而是推薦的axios,所以下面這篇文章主要給大家分享了關于使用axios的一些心得技巧,文中介紹的非常詳細,對大家具有一定的參考學習價值,需要的朋友們下面來一起看看吧。
    2017-07-07
  • angularjs實現(xiàn)的前端分頁控件示例

    angularjs實現(xiàn)的前端分頁控件示例

    本篇文章主要介紹了angularjs實現(xiàn)的前端分頁控件示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-02-02
  • Angular應用懶加載模塊配置管理詳解

    Angular應用懶加載模塊配置管理詳解

    這篇文章主要為大家介紹了Angular應用懶加載模塊配置管理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-10-10
  • AngularJS中控制器函數(shù)的定義與使用方法示例

    AngularJS中控制器函數(shù)的定義與使用方法示例

    這篇文章主要介紹了AngularJS中控制器函數(shù)的定義與使用方法,結合具體實例形式分析了AngularJS控制器函數(shù)的定義、綁定及相關使用技巧,需要的朋友可以參考下
    2017-10-10
  • 深入解析AngularJS框架中$scope的作用與生命周期

    深入解析AngularJS框架中$scope的作用與生命周期

    這篇文章主要介紹了AngularJS中$scope的作用與生命周期,包括在DOM中添加controller對象的相關用法,需要的朋友可以參考下
    2016-03-03
  • Angular2搜索和重置按鈕過場動畫

    Angular2搜索和重置按鈕過場動畫

    這篇文章主要介紹了Angular2搜索和重置按鈕過場動畫,需要的朋友可以參考下
    2017-05-05

最新評論