您的当前位置:首页Angular开发实践之服务端渲染
广告

Angular开发实践之服务端渲染

2023-11-30 来源:吉希宠物网
这篇文章主要介绍了Angular开发实践之服务端渲染,现在分享给大家,也给大家做个参考。

Angular Universal

Angular在服务端渲染方面提供一套前后端同构解决方案,它就是Angular Universal(统一平台),一项在服务端运行 Angular 应用的技术。

标准的 Angular 应用会执行在浏览器中,它会在 DOM 中渲染页面,以响应用户的操作。

而 Angular Universal 会在服务端通过一个被称为服务端渲染(server-side rendering - SSR)的过程生成静态的应用页面。

它可以生成这些页面,并在浏览器请求时直接用它们给出响应。 它也可以把页面预先生成为 HTML 文件,然后把它们作为静态文件供服务器使用。

工作原理

要制作一个 Universal 应用,就要安装 platform-server 包。 platform-server 包提供了服务端的 DOM 实现、XMLHttpRequest 和其它底层特性,但不再依赖浏览器。

你要使用 platform-server 模块而不是 platform-browser 模块来编译这个客户端应用,并且在一个 Web 服务器上运行这个 Universal 应用。

服务器(下面的示例中使用的是 Node Express 服务器)会把客户端对应用页面的请求传给 renderModuleFactory 函数。

renderModuleFactory 函数接受一个模板 HTML 页面(通常是 index.html)、一个包含组件的 Angular 模块和一个用于决定该显示哪些组件的路由作为输入。

该路由从客户端的请求中传给服务器。 每次请求都会给出所请求路由的一个适当的视图。

renderModuleFactory 在模板中的 <app> 标记中渲染出哪个视图,并为客户端创建一个完成的 HTML 页面。

最后,服务器就会把渲染好的页面返回给客户端。

为什么要服务端渲染

三个主要原因:

  1. 帮助网络爬虫(SEO)

  2. 提升在手机和低功耗设备上的性能

  3. 迅速显示出第一个页面

帮助网络爬虫(SEO)

Google、Bing、百度、Facebook、Twitter 和其它搜索引擎或社交媒体网站都依赖网络爬虫去索引你的应用内容,并且让它的内容可以通过网络搜索到。

这些网络爬虫可能不会像人类那样导航到你的具有高度交互性的 Angular 应用,并为其建立索引。

Angular Universal 可以为你生成应用的静态版本,它易搜索、可链接,浏览时也不必借助 JavaScript。它也让站点可以被预览,因为每个 URL 返回的都是一个完全渲染好的页面。

启用网络爬虫通常被称为搜索引擎优化 (SEO)。

提升手机和低功耗设备上的性能

有些设备不支持 JavaScript 或 JavaScript 执行得很差,导致用户体验不可接受。 对于这些情况,你可能会需要该应用的服务端渲染、无 JavaScript 的版本。 虽然有一些限制,不过这个版本可能是那些完全没办法使用该应用的人的唯一选择。

快速显示首页

快速显示首页对于吸引用户是至关重要的。

如果页面加载超过了三秒中,那么 53% 的移动网站会被放弃。 你的应用需要启动的更快一点,以便在用户决定做别的事情之前吸引他们的注意力。

使用 Angular Universal,你可以为应用生成“着陆页”,它们看起来就和完整的应用一样。 这些着陆页是纯 HTML,并且即使 JavaScript 被禁用了也能显示。 这些页面不会处理浏览器事件,不过它们可以用 routerLink 在这个网站中导航。

在实践中,你可能要使用一个着陆页的静态版本来保持用户的注意力。 同时,你也会在幕后加载完整的 Angular 应用。 用户会认为着陆页几乎是立即出现的,而当完整的应用加载完之后,又可以获得完全的交互体验。

示例解析

下面将基于我在GitHub上的示例项目 angular-universal-starter 来进行讲解。

这个项目与第一篇的示例项目一样,都是基于 Angular CLI进行开发构建的,因此它们的区别只在于服务端渲染所需的那些配置上。

安装工具

在开始之前,下列包是必须安装的(示例项目均已配置好,只需 npm install 即可):

  1. @angular/platform-server - Universal 的服务端元件。

  2. @nguniversal/module-map-ngfactory-loader - 用于处理服务端渲染环境下的惰性加载。

  3. @nguniversal/express-engine - Universal 应用的 Express 引擎。

  4. ts-loader - 用于对服务端应用进行转译。

  5. express - Node Express 服务器

使用下列命令安装它们:

项目配置

配置工作有:

  1. 创建服务端应用模块:src/app/app.server.module.ts

  2. 修改客户端应用模块:src/app/app.module.ts

  3. 创建服务端应用的引导程序文件:src/main.server.ts

  4. 修改客户端应用的引导程序文件:src/main.ts

  5. 创建 TypeScript 的服务端配置:src/tsconfig.server.json

  6. 修改 @angular/cli 的配置文件:.angular-cli.json

  7. 创建 Node Express 的服务程序:server.ts

  8. 创建服务端预渲染的程序:prerender.ts

  9. 创建 Webpack 的服务端配置:webpack.server.config.js

1、创建服务端应用模块:src/app/app.server.module.ts

服务端应用模块(习惯上叫作 AppServerModule)是一个 Angular 模块,它包装了应用的根模块 AppModule,以便 Universal 可以在你的应用和服务器之间进行协调。 AppServerModule 还会告诉 Angular 再把你的应用以 Universal 方式运行时,该如何引导它。

2、修改客户端应用模块:src/app/app.module.ts

NgModule 的元数据中 BrowserModule 的导入改成 BrowserModule.withServerTransition({appId: 'my-app'}),Angular 会把 appId 值(它可以是任何字符串)添加到服务端渲染页面的样式名中,以便它们在客户端应用启动时可以被找到并移除。

此时,我们可以通过依赖注入(@Inject(PLATFORM_ID)@Inject(APP_ID))取得关于当前平台和 appId 的运行时信息:

3、创建服务端应用的引导程序文件:src/main.server.ts

该文件导出服务端模块:

4、修改客户端应用的引导程序文件:src/main.ts

监听 DOMContentLoaded 事件,在发生 DOMContentLoaded 事件时运行我们的代码,以使 TransferState 正常工作

5、创建 TypeScript 的服务端配置:src/tsconfig.server.json

tsconfig.app.json 的差异在于:

module 属性必须是 commonjs,这样它才能被 require() 方法导入你的服务端应用。

angularCompilerOptions 部分有一些面向 AOT 编译器的选项:

  1. entryModule - 服务端应用的根模块,其格式为 path/to/file#ClassName。

6、修改 @angular/cli 的配置文件:.angular-cli.json

apps 下添加:

7、创建 Node Express 的服务程序:server.ts

8、创建服务端预渲染的程序:prerender.ts

9、创建 Webpack 的服务端配置:webpack.server.config.js

Universal 应用不需要任何额外的 Webpack 配置,Angular CLI 会帮我们处理它们。但是由于本例子的 Node Express 的服务程序是 TypeScript 应用(server.ts及prerender.ts),所以要使用 Webpack 来转译它。这里不讨论 Webpack 的配置,需要了解的移步 Webpack官网

测试配置

通过上面的配置,我们就制作完成一个可在服务端渲染的 Angular Universal 应用。

在 package.json 的 scripts 区配置 build 和 serve 有关的命令:

开发只需运行 npm run start执行 npm run ssr 编译应用程序,并启动一个Node Express来为应用程序提供服务 http://localhost:4000

dist目录:

执行npm run prerender - 编译应用程序并预渲染应用程序文件,启动一个演示http服务器,以便您可以查看它 http://localhost:8080

注意: 要将静态网站部署到静态托管平台,您必须部署dist/browser文件夹, 而不是dist文件夹

dist目录:

根据项目实际的路由信息并在根目录的 static.paths.ts 中配置,提供给 prerender.ts 解析使用。

因此,从dist目录可以看到,服务端预渲染会根据配置好的路由在 browser 生成对应的静态index.html。如 / 对应 /index.html/lazy 对应 /lazy/index.html

服务器到客户端的状态传输

在前面的介绍中,我们在 app.server.module.ts 中导入了 ServerTransferStateModule,在 app.module.ts 中导入了 BrowserTransferStateModuleTransferHttpCacheModule

这三个模块都与服务器到客户端的状态传输有关:

  1. ServerTransferStateModule:在服务端导入,用于实现将状态从服务器传输到客户端

  2. BrowserTransferStateModule:在客户端导入,用于实现将状态从服务器传输到客户端

  3. TransferHttpCacheModule:用于实现服务器到客户端的请求传输缓存,防止客户端重复请求服务端已完成的请求

使用这几个模块,可以解决 http请求在服务端和客户端分别请求一次 的问题。

比如在 home.component.ts 中有如下代码:

代码运行之后,

服务端请求并打印:

客户端再一次请求并打印:

方法1:使用 TransferHttpCacheModule

使用 TransferHttpCacheModule 很简单,代码不需要改动。在 app.module.ts 中导入之后,Angular自动会将服务端请求缓存到客户端,换句话说就是服务端请求到数据会自动传输到客户端,客户端接收到数据之后就不会再发送请求了。

方法2:使用 BrowserTransferStateModule

该方法稍微复杂一些,需要改动一些代码。

调整 home.component.ts 代码如下:

  1. 使用 const KFCLIST_KEY = makeStateKey('kfcList') 创建储存传输数据的 StateKey

  2. HomeComponent 的构造函数中注入 TransferState

  3. ngOnInit 中根据 this.state.get(KFCLIST_KEY, null as any) 判断数据是否存在(不管是服务端还是客户端),存在就不再请求,不存在则请求数据并通过 this.state.set(KFCLIST_KEY, data as any) 存储传输数据

  4. ngOnDestroy 中根据当前是否客户端来决定是否将存储的数据进行删除

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

Js面试算法详解

JS简单获取并修改input文本框内容的方法示例

详解vue表单

小编还为您整理了以下内容,可能对您也有帮助:

React 服务端渲染与预渲染

仍是SPA

需要用到 react-router-config 这个库,它可以根据 route 匹配到对应的组件,拿到当前route对应的组件是实现路由同步的关键,再通过组件的静态API方法获取接口数据

主要是在服务端通过组件的静态API方法获取接口数据后创建store,再通过 window.store= store 传递给前端

主要是要将前端的 js 文件附加在服务端渲染的模板 html 文件中

服务端渲染的应用场景:一般只是对重要的页面,如首页才会做,可以提高首屏加载速度,利于SEO。其他页面实际上仍是CSR

预渲染不像服务器渲染那样即时编译 HTML,它只在构建时为了特定的路由生成特定的几个静态页面,等于我们可以通过 Webpack 插件将一些特定页面组件 build 时就编译为 html 文件,直接以静态资源的形式输出给搜索引擎。

1、SPA变为MPA
2、必须使用 History 路由,而不能使用 Hash 路由,所以对于没有做预渲染的页面往往需要服务器配置路由,如nginx 配置如下:

3、对于动态路由,如 /detail/:id ,是不支持的,不过可以换成 query 路由,如 /detail?id=
4、应用场景比较有限,能想到的就是骨架屏应用,比如首页,为了速度,我们会用一些骨架屏组件,如果不做预渲染,则骨架屏组件会等整个js文件加载完毕才开始渲染,体验不好。如果做了预渲染,则当html文件加载完毕时就会开始渲染了

React 服务端渲染与预渲染

仍是SPA

需要用到 react-router-config 这个库,它可以根据 route 匹配到对应的组件,拿到当前route对应的组件是实现路由同步的关键,再通过组件的静态API方法获取接口数据

主要是在服务端通过组件的静态API方法获取接口数据后创建store,再通过 window.store= store 传递给前端

主要是要将前端的 js 文件附加在服务端渲染的模板 html 文件中

服务端渲染的应用场景:一般只是对重要的页面,如首页才会做,可以提高首屏加载速度,利于SEO。其他页面实际上仍是CSR

预渲染不像服务器渲染那样即时编译 HTML,它只在构建时为了特定的路由生成特定的几个静态页面,等于我们可以通过 Webpack 插件将一些特定页面组件 build 时就编译为 html 文件,直接以静态资源的形式输出给搜索引擎。

1、SPA变为MPA
2、必须使用 History 路由,而不能使用 Hash 路由,所以对于没有做预渲染的页面往往需要服务器配置路由,如nginx 配置如下:

3、对于动态路由,如 /detail/:id ,是不支持的,不过可以换成 query 路由,如 /detail?id=
4、应用场景比较有限,能想到的就是骨架屏应用,比如首页,为了速度,我们会用一些骨架屏组件,如果不做预渲染,则骨架屏组件会等整个js文件加载完毕才开始渲染,体验不好。如果做了预渲染,则当html文件加载完毕时就会开始渲染了

服务端渲染和客户端渲染的区别

你好,你是想问服务端渲染和客户端渲染的区别是什么吗?服务端渲染和客户端渲染区别是渲染过程和优缺点。

1、渲染过程:

2、服务端渲染:在服务端渲染中,服务器首先接收到客户端的请求,然后生成HTML文档并将其发送给客户端。客户端只需解析收到的HTML文档,而无需等待额外的请求。整个渲染过程都在服务端完成。

3、客户端渲染:在客户端渲染中,客户端首先接收到HTML框架,然后通过JavaScript动态请求服务器获取数据,再将数据与HTML框架拼接在一起,最后生成渲染后的页面。渲染过程涉及到客户端与服务器之间的多次数据交互。

4、服务端渲染优点:节省客户端资源,减轻客户端负担,加快页面加载速度。有利于SEO优化,因为服务器端生成完整的HTML页面,便于爬虫抓取。

5、服务端渲染缺点:不利于前后端分离,开发效率较低。服务器需要解析HTML,加大了服务器压力。

6、客户端渲染优点:前后端分离,开发效率高。可以根据用户操作实时生成动态内容,提高用户交互性。

7、客户端渲染缺点:客户端需要解析HTML和JavaScript,可能影响页面加载速度。多次请求服务器,网络延迟可能导致页面加载速度降低。

react服务端渲染,css样式问题如何解决

一原因与思路
客户端渲染路线:1. 请求一个html -> 2. 服务端返回一个html -> 3. 浏览器下载html里面的js/css文件 -> 4. 等待js文件下载完成 -> 5. 等待js加载并初始化完成 -> 6. js代码终于可以运行,由js代码向后端请求数据( ajax/fetch ) -> 7. 等待后端数据返回 -> 8. react-dom( 客户端 )从无到完整地,把数据渲染为响应页面
服务端渲染路线:2. 请求一个html -> 2. 服务端请求数据( 内网请求快 ) -> 3. 服务器初始渲染(服务端性能好,较快) -> 4. 服务端返回已经有正确内容的页面 -> 5. 客户端请求js/css文件 -> 6. 等待js文件下载完成 -> 7. 等待js加载并初始化完成 -> 8. react-dom( 客户端 )把剩下一部分渲染完成( 内容小,渲染快 )
说明:对同一个组件,服务端渲染“可视的”一部分( render/componentWillMount部分代码 ),为确保组件有完善的生命周期及事件处理,客户端需要再次渲染。即:服务端渲染,实际上也是需要客户端进行 再次地、但开销很小的二次渲染。

react服务端渲染,css样式问题如何解决

一原因与思路
客户端渲染路线:1. 请求一个html -> 2. 服务端返回一个html -> 3. 浏览器下载html里面的js/css文件 -> 4. 等待js文件下载完成 -> 5. 等待js加载并初始化完成 -> 6. js代码终于可以运行,由js代码向后端请求数据( ajax/fetch ) -> 7. 等待后端数据返回 -> 8. react-dom( 客户端 )从无到完整地,把数据渲染为响应页面
服务端渲染路线:2. 请求一个html -> 2. 服务端请求数据( 内网请求快 ) -> 3. 服务器初始渲染(服务端性能好,较快) -> 4. 服务端返回已经有正确内容的页面 -> 5. 客户端请求js/css文件 -> 6. 等待js文件下载完成 -> 7. 等待js加载并初始化完成 -> 8. react-dom( 客户端 )把剩下一部分渲染完成( 内容小,渲染快 )
说明:对同一个组件,服务端渲染“可视的”一部分( render/componentWillMount部分代码 ),为确保组件有完善的生命周期及事件处理,客户端需要再次渲染。即:服务端渲染,实际上也是需要客户端进行 再次地、但开销很小的二次渲染。

客户端渲染和服务端渲染的区别(转)

服务端渲染 :DOM树在服务端生成,然后返回给前端。

客户端渲染 (SSR):前端去后端取数据生成DOM树。

服务端渲染的优点 :

1、尽量不占用前端的资源,前端这块耗时少,速度快。

2、有利于SEO优化,因为在后端有完整的html页面,所以爬虫更容易爬取信息。

服务端渲染的缺点 :

1、不利于前后端分离,开发的效率降低了。

2、对html的解析,对前端来说加快了速度,但是加大了服务器的压力。

客户端渲染的优点 :

1、前后端分离,开发效率高。

2、用户体验更好,我们将网站做成SPA(单页面应用)或者部分内容做成SPA,当用户点击时,不会形成频繁的跳转。

客户端渲染的缺点 :

1、前端响应速度慢,特别是首屏,这样用户是受不了的。

2、不利于SEO优化,因为爬虫不认识SPA,所以它只是记录了一个页面。

服务端和客户端渲染的区别 :

1、二者本质的区别:是谁来完成了html的完整拼接,服务端渲染是在服务端生成DOM树,客户端渲染是在客户端生成DOM树。

2、响应速度:服务端渲染会加快页面的响应速度,客户端渲染页面的响应速度慢。

3、SEO优化:服务端渲染因为是多个页面,更有利于爬虫爬取信息,客户端渲染不利于SEO优化。

4、开发效率:服务端渲染逻辑分离的不好,不利于前后端分离,开发效率低,客户端渲染是采用前后端分离的方式开发,效率更高,也是大部分业务采取的渲染方式。

直观的区分服务端渲染和客户端渲染:

源码里如果能找到前端页面中的内容文字,那就是在服务端构建的DOM,就是服务端渲染,反之是客户端渲染。

应该使用服务端渲染还是客户端渲染:

我们要根据业务场景去选择渲染的方式。

如果是企业级网站,主要功能是页面展示,它没有复杂的交互,并且需要良好的SEO,那我们应该使用服务端渲染。

如果是后台管理页面,交互性很强,它不需要考虑到SEO,那我们应该使用客户端渲染。

具体使用哪种渲染方式也不是绝对的,现在很多网站使用 服务端渲染和客户端渲染结合 的方式:首屏使用服务端渲染,其他页面使用客户端渲染。这样可以保证首屏的加载速度,也完成了前后端分离。

angular是异步渲染还是同步渲染

angular可以异步渲染亦可同步渲染。根据查询相关公开信息:同步是阻塞模式,异步是非阻塞模式,均可在angular中执行。

angular是异步渲染还是同步渲染

angular可以异步渲染亦可同步渲染。根据查询相关公开信息:同步是阻塞模式,异步是非阻塞模式,均可在angular中执行。

服务端渲染SSR之UmiJS预渲染

本文主要介绍 UmiJS 的预渲染功能。

服务端渲染(Server-Side Rendering),是指由 服务端 完成页面的 HTML 结构拼接的页面处理技术,发送到浏览器,然后为其绑定状态与事件,成为完全可交互页面的过程。

服务端渲染,首先得有后端服务器(一般是 Node.js)才可以使用,而没有后端服务器的情况下,可以使用 预渲染 。

预渲染与服务端渲染唯一的不同点在于 渲染时机 ,服务端渲染的时机是在用户访问时执行渲染(即实时渲染,数据一般是最新的),预渲染的时机是在项目构建时,当用户访问时,数据不一定是最新的( 如果数据没有实时性,可以直接考虑预渲染 )。

预渲染在构建时执行渲染,将渲染后的 HTML 片段生成静态 HTML 文件。无需使用 web 服务器实时动态编译 HTML,适用于 静态站点生成 。

Umi3 在 SSR 上做了大量优化及开发体验的提升,具有以下特性:

默认情况下,服务端渲染时关闭的,可通过配置开启:

服务端渲染的数据获取方式与 SPA(单页应用) 有所不同,为了让客户端和服务端都能获取到同一份数据,Umi 提供了页面级数据的预获取。

每个页面可能有单独的数据预获取逻辑,这里我们会获取页面组件上的 getInitialProps 静态方法,执行后将结果注入到该页面组件的 props 中,如:

getInitialProps 有几个固定参数:

为了结合数据流框架,我们提供了 modifyGetInitialPropsCtx 方法,由插件或应用来扩展 ctx 参数,以 dva 为例:

然后在页面中,可以获取到 store :

同时也可以在自身应用中进行扩展:

同时可以使用 getInitialPropsCtx 将服务端参数扩展到 ctx 中,例如:

在使用的时候,就有 req 对象,不过需要注意的是,只在服务端执行时才有此参数:

则在执行 getInitialProps 方法时,除了以上两个固定参数外,还会获取到 title 和 store 参数。

关于 getInitialProps 执行逻辑和时机,需要注意:

执行 umi build ,除了正常的 umi.js 外,会多一个服务端文件: umi.server.js (相当于服务端入口文件)。然后在后端框架中,引用该文件:

render 方法参数和返回值如下:

完美兼容客户端动态加载,配置如下:

@umijs/preset-react 插件集中已内置对标题的渲染,通过以下步骤使用:

@umijs/preset-react 插件集中已内置 dva

这时候 getInitialProps(ctx) 中的 ctx 就会有 store 属性,可执行 dispatch ,并返回初始化数据。

Umi 同时支持对服务端和客户端包大小的分析

angularjs加载渲染完页面怎么更改数据

使用Jquery结合AngulraJs使用的时候,在render完table后,执行一段js脚本,把JqTable应用到该table上,能够捕获到AngularJs渲染完成页面的事件。
要达到这个目的,需要为当前的app自定义directive:
app.directive('onFinishRenderFilters', function ($timeout) {
return {
restrict: 'A',
link: function(scope, element, attr) {
if (scope.$last === true) {
$timeout(function() {
scope.$emit('ngRepeatFinished');
});
}
}
};
});
然后,在需要监控的地方,加上该directive:
<tr ng-repeat="user in users" on-finish-render-filters>
<td>{{user.Id}}</td>
<td>{{user.Name}}</td>
<td>{{user.Salary}}</td>
</tr>
最后,补充上需要render完成之后的Js脚本:
$scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {
//下面是在table render完成后执行的js
var table = $("#leaderBoard").dataTable({
bJQueryUI: true,
"sScrollX": '100%',
});
});

angularjs加载渲染完页面怎么更改数据

使用Jquery结合AngulraJs使用的时候,在render完table后,执行一段js脚本,把JqTable应用到该table上,能够捕获到AngularJs渲染完成页面的事件。
要达到这个目的,需要为当前的app自定义directive:
app.directive('onFinishRenderFilters', function ($timeout) {
return {
restrict: 'A',
link: function(scope, element, attr) {
if (scope.$last === true) {
$timeout(function() {
scope.$emit('ngRepeatFinished');
});
}
}
};
});
然后,在需要监控的地方,加上该directive:
<tr ng-repeat="user in users" on-finish-render-filters>
<td>{{user.Id}}</td>
<td>{{user.Name}}</td>
<td>{{user.Salary}}</td>
</tr>
最后,补充上需要render完成之后的Js脚本:
$scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {
//下面是在table render完成后执行的js
var table = $("#leaderBoard").dataTable({
bJQueryUI: true,
"sScrollX": '100%',
});
});

服务端渲染的好处

react.js在服务器端渲染好处:

提升性能是需要再浏览器端的性能提升还是服务端的 性能提升,是两个概念,服务端渲染会给服务端造成一定的压力,减轻客户端的压力;好处:在整个页面级别的应用会使得浏览器在解析dom完成之后马上有东西可以渲染。再者就是对seo比较友好一些;

渲染的流程主要是:

准备数据,一般从数据库或外部API获得 (一般要先 render React 一次,去触发所需的API)

数据和React结合生成HTML Markup

除了把HMTL Markup输出外, 还要把'State'输出,这要在客户端才能保留'State'



服务端渲染的好处

react.js在服务器端渲染好处:

提升性能是需要再浏览器端的性能提升还是服务端的 性能提升,是两个概念,服务端渲染会给服务端造成一定的压力,减轻客户端的压力;好处:在整个页面级别的应用会使得浏览器在解析dom完成之后马上有东西可以渲染。再者就是对seo比较友好一些;

渲染的流程主要是:

准备数据,一般从数据库或外部API获得 (一般要先 render React 一次,去触发所需的API)

数据和React结合生成HTML Markup

除了把HMTL Markup输出外, 还要把'State'输出,这要在客户端才能保留'State'



angularjs ng-repeat 渲染完成后数据变化,可以再次渲染吗

前言 大家都知道对于处理小数量,ng-repeat是非常有用的,但是如果需要处理非常大的数量集,还是采用自定义的方法更好一些。特别是数据大多都是静态的或已预存储好的,这个时候应避免使用ng-repeat指令。 ng-repeat中的表达式和 $watch Angular中的表达式都会创建$watch 的Scope 函数。用于监听模型变化,当你的模型部分发生变化时它会通知你。在ng-repeat指令中,如果某行数据有15列数据都绑定了表达式,如果数据有1000多行的话,那么$watch就又奖金15000个,这性能简直难以想象。 所以当我们想要实现ng-repeat的功能又想兼备性能,那只能另找一种方法了。 替换ng-repeat的方法 如果内容是静态的,我们不需要两种方式的绑定,只需要执行一次赋值语句{{::value}}就可以。如果anguluarJS是1.3以下的旧版本,是不支持的一次性绑定语法的。那么最好的方法就是自定义指令,换言之,静态数据可以使用一些简单的方法来格式化。 实现步骤 1、首先创建无序列表,用于保存动态绑定的内容。 创建UL标签作为容器用于显示列表 我们选择动态加载List中的数据,首先添加div标签,并命名为"repeater-alternative"用于渲染流中。 <div> <ul> <div repeater-alternative></div> </ul> </div> 2、定义List 数据: //示例数据 var studentsList = [ { FirstName: "Raj, LastName : "B", Country : "India", BirthDate: "01/01/1990" }, { FirstName: "Kumar, LastName : "S", Country : "India", BirthDate: "01/01/1990" }, .................. .................. .................. .................. ]; $scope.collectionObject = studentsList; //分配给$scope函数 3、实际List内容 主要目的适用于重复集合对象,并显示到列表中,所以需要制定访问循环的逻辑,并按照需求来格式化字符串。 var tableRow = ""; angular.forEach($scope.collectionObject, function (item) { tableRow = tableRow + ['<li>', '<div class="col-md-1">' + item.FirstName + '</div> ', '<div class="col-md-1 ">' + item.LastName + '</div> ', '<div class="col-md-1 ">' + item.Country+ '</div> ', '<div class="col-md-1 ">' + item.Id + '</div> ', '<div class="col-md-1 ">' + $filter('date')(item.BirthDate, 'dd-MMM-yyyy') + '</div> ', '</li>'].join(''); }); 4、List格式化逻辑 一旦collectionObject的值已被赋给其他变量,就需要定义显示数据的表格。 5、如何获取分配CollectionObject的时间 Angular会监控$scope变量值得改变,一旦值被修改,则$watch将被处罚,所以需要将CollectionObject赋值逻辑放到$scope变量的$watch中。 代码如下: $scope.$watch($scope.object, function (oldValue, newValue) { }) 即,当我们执行赋值语句是,Angular会处理这个事件,并格式化List的内容。 $scope.$watch('collectionObject', function (oldValue, newValue) { var tableRow = ""; angular.forEach($scope.collectionObject, function (item) { tableRow = tableRow + ['<li>', '<div class="col-md-1">' + item.FirstName + '</div> ', '<div class="col-md-1 ">' + item.LastName + '</div> ', '<div class="col-md-1 ">' + item.State + '</div> ', '<div class="col-md-1 ">' + item.Id + '</div> ', '<div class="col-md-1 ">' + $filter('date')(item.BirthDate, 'dd-MMM-yyyy') + '</div> ', '</li>'].join(''); }); }) 接下来就是将内容渲染到表格控件中,也就是HTML<DIV>repeater-alternative标签中。 首先必须理解Angular的Directive机制,简单而言,就是我们来指示Angular,当指定的变量被发现,就开始执行后台操作。 var userDirectives = angular.mole([]); userDirectives.directive('DOMElementFound', function () { return { replace: true, link: function ($scope, $elem, attrs) { //后台处理操作 } } }); 我们会通知Angular,当发现"repeater-alternative" 元素,则将以下数据渲染到列表行中。 代码如下: var userDirectives = angular.mole([]); userDirectives.directive('repeaterAlternative', function () { return { replace : true, link: function ($scope, $elem, attrs) { $scope.$watch('collectionObject', function (oldValue, newValue) { var tableRow = ""; angular.forEach($scope.collectionObject, function (item) { tableRow = tableRow + ['<li>', '<div class="col-md-1">' + item.FirstName + '</div> ', '<div class="col-md-1 ">' + item.LastName + '</div> ', '<div class="col-md-1 ">' + item.State + '</div> ', '<div class="col-md-1 ">' + item.Id + '</div> ', '<div class="col-md-1 ">' + $filter('date')(item.BirthDate, 'dd-MMM-yyyy') + '</div> ', '</li>'].join(''); }); //If IE is your primary browser, innerHTML is recommended to increase the performance $elem.context.innerHTML = tableRow; //If IE is not your primary browser, just appending the content to the element is enough . //$elem.append(tableRow); }); } } }); 总结 在本文中,主要模拟了ng-repeat的工作方式和逻辑,但只限于静态内容,所以输出结果与调用ng-repeat结果相同,但是渲染更快,因为该方法只有一种数据绑定方式和少量的$watch。以上就是这篇文章的全部内容,希望本文的内容能对大家的学习或者工作有所帮助,如果有疑问大家可以留言交流。

前端面试题-服务端渲染SSR

我最开始接触是在Vue的官网上,开始是作为一个小节出现,现在已经是个专门的大章节来专门讲Vue服务端渲染的内容。

服务端渲染 简单来说就是在服务器上把数据和模板拼接好以后发送给客户端显示。

回顾下前端的 历史 ,最开始的站点是简单的静态网站。后端大哥把.html文件推送给用户,用户浏览器解析这些字符串进行显示。那个时候就是 服务端渲染 。可是后来由于网站内容越来越复杂、特效越来越炫酷,这种‘兼职’状态已经不能满足需求,细分之下的前端出现了。

随后为了方便的开发,开始提倡 前后端分离,大家各做各的,彼此之间通过基于HTTP的各种API协作,变成了数据动态生成的新一代站点。

再后来出现了Vue等三大MV*框架,网站做成了SPA应用,解决了很多问题的同时也带来了新问题,其中最突出的两个:难以SEO和首屏加载缓慢。

想要了解更多关于前端技术内容欢迎关注尚硅谷教育!

前端安全相关面试题

前端JS高阶面试题

前端设计模式-面试题

web前端渲染优化

web前端之二叉搜索树

前端面试题-服务端渲染SSR

我最开始接触是在Vue的官网上,开始是作为一个小节出现,现在已经是个专门的大章节来专门讲Vue服务端渲染的内容。

服务端渲染 简单来说就是在服务器上把数据和模板拼接好以后发送给客户端显示。

回顾下前端的 历史 ,最开始的站点是简单的静态网站。后端大哥把.html文件推送给用户,用户浏览器解析这些字符串进行显示。那个时候就是 服务端渲染 。可是后来由于网站内容越来越复杂、特效越来越炫酷,这种‘兼职’状态已经不能满足需求,细分之下的前端出现了。

随后为了方便的开发,开始提倡 前后端分离,大家各做各的,彼此之间通过基于HTTP的各种API协作,变成了数据动态生成的新一代站点。

再后来出现了Vue等三大MV*框架,网站做成了SPA应用,解决了很多问题的同时也带来了新问题,其中最突出的两个:难以SEO和首屏加载缓慢。

想要了解更多关于前端技术内容欢迎关注尚硅谷教育!

前端安全相关面试题

前端JS高阶面试题

前端设计模式-面试题

web前端渲染优化

web前端之二叉搜索树

吉希宠物网还为您提供以下相关内容希望对您有帮助:

服务端渲染和客户端渲染的区别

1、渲染过程:2、服务端渲染:在服务端渲染中,服务器首先接收到客户端的请求,然后生成HTML文档并将其发送给客户端。客户端只需解析收到的HTML文档,而无需等待额外的请求。整个渲染过程都在服务端完成。3、客户端渲染:在...

客户端渲染和服务端渲染的区别(转)

1、二者本质的区别:是谁来完成了html的完整拼接,服务端渲染是在服务端生成DOM树,客户端渲染是在客户端生成DOM树。2、响应速度:服务端渲染会加快页面的响应速度,客户端渲染页面的响应速度慢。3、SEO优化:服务端渲染因为...

服务端渲染SSR之UmiJS预渲染

服务端渲染,首先得有后端服务器(一般是 Node.js)才可以使用,而没有后端服务器的情况下,可以使用 预渲染 。预渲染与服务端渲染唯一的不同点在于 渲染时机 ,服务端渲染的时机是在用户访问时执行渲染(即实时渲染,数...

服务端渲染的好处

提升性能是需要再浏览器端的性能提升还是服务端的 性能提升,是两个概念,服务端渲染会给服务端造成一定的压力,减轻客户端的压力;好处:在整个页面级别的应用会使得浏览器在解析dom完成之后马上有东西可以渲染。再者就是对seo...

什么是前端渲染?什么是服务端渲染?两者区别及应用场景

服务端渲染:服务端用php的smarty模板或者java的jsp,把页面的商品列表信息渲染出来了,返回一个html给浏览器了。区别:如果页面要求被蜘蛛抓取,前端渲染的数据就不能被抓取到,但是服务端渲染的页面就能被抓取到。如果有SEO...

前端面试题-服务端渲染SSR

那个时候就是 服务端渲染 。可是后来由于网站内容越来越复杂、特效越来越炫酷,这种‘兼职’状态已经不能满足需求,细分之下的前端出现了。随后为了方便的开发,开始提倡 前后端分离,大家各做各的,彼此之间通过基于HTTP的各种...

angularjs加载渲染完页面怎么更改数据

使用Jquery结合AngulraJs使用的时候,在render完table后,执行一段js脚本,把JqTable应用到该table上,能够捕获到AngularJs渲染完成页面的事件。要达到这个目的,需要为当前的app自定义directive:app.directive('onFinishRender...

现在又流行服务端渲染html了,这是为什么?

其实前后端渲染的选择,并没有太多关系到服务器的效率。而是多数网站需要权衡内容的可见性与功能性两者。一、内容可见性 指的是让有效内容更容易被获取,因为多数网站是展现有效内容给用户,帮助公司或品牌产品得到更多的流量,...

现在又流行服务端渲染html了,这是为何?

5 其实这是第二个翻身的机会,如果 nodejs 服务器渲染成为主流,其实就相当于前端把后端的大部分工作给抢了,工资压过普通后端指日可待 6 然而结果是 nodejs 服务端渲染始终是小众,因为后端也没那么脆弱,java php rails...

渲染是什么意思?

3、服务端渲染(SSR):在Web开发中,服务端渲染(Server-Side Rendering,简称SSR)指的是在服务器端预先生成完整的HTML结构内容,然后将这个内容发送给浏览器,由浏览器直接显示在页面上。SSR可以提高页面加载速度、改善SEO...

Top