认识达内从这里开始

web前端编程开发技术随着互联网的不断发展而被越来越多的程序员掌握，今天我们就通过案例分析来简单了解一下，web前端内容展现形式都有哪些。

1、静态内容展现

静态内容来自于模板。对于不同模板类型，获取静态内容的方式不一样。对于“原始HTML”类型的模板，静态内容会从次动态请求返回的完整HTML中，根据html注释标记提取出来，并存储到edge缓存上。对于“静态模板”，会通过拉取CDN的的模板文件，并存储到edge缓存上。静态内容有缓存过期时间和版本号。

模板一开始的静态内容会在响应时直接返回给用户。后续的静态内容(例如html和body的闭合标签)有两种方式：

一种是等待动态内容返回后，再写到响应流中。这种方式对SEO比较友好，但缺点是动态内容会阻塞住后续静态内容，并且如果有多个动态内容区块的话，无法实现先返回的动态模板先展示，只能依次展示。

另一种方式是先把静态内容完全返回，然后动态内容以类bigpipe的方式，通过脚本把内容插入到对应的坑位。这种方式的优点是静态内容可以一开始就完整展示，且多个动态内容可以先到先展示。缺点是对SEO不友好(因为动态内容是能进js插进去的)。

2、动态内容

动态内容是在渲染过程中，解析到需要动态获取的区域，会在edge上发起动态内容请求。动态内容支持以动态加速的形式到达服务端(源站)。连续节点与后端的动态的内容交互，分为三种方式：

一是后端动态内容返回的是全量的页面，需要通过注释标记来从内容中提取。这种方式的优点是对现有业务侵入较小，缺点是动态内容传输体积大，并且需要下载完整html后再截取动态内容。

二是后端动态内容只返回动态区块的内容，这种方式的优点是可以将动态响应流式返回给用户，缺点时需要页面单独对外提供一个只返回动态区块内容的url。

三是后端动态内容只返回数据，配合静态模板中的动态渲染模板，在边缘节点上渲染出动态html后返回给用户。优点是与后端传输数据量小，且不需要后端有SSR能力。缺点是需要开发者多维护一套模板逻辑，并且在边缘节点上做复杂的模板渲染可能会有cpu开销和限制。

用户和边缘节点的动态内容交互，分为两种形式：

瀑布流式(对应路由配置里的WATER_FALL):动态内容以瀑布流的形式依次返回。虽然在边缘节点上多个动态内容加载的操作是并行的，但对于用户来说，会从上到下依次展示页面内容。这种方式优点是对SEO友好，并且不影响页面模块的加载顺序。缺点是多个动态模块时，无法看到整体页面的框架，个动态块的内容会阻塞后续动态块内容的展示，且页面底部的jscss资源无法提前加载和执行。

嵌入式(对应路由配置里的ASYNC_INSERT)：静态内容一次性全部返回，其中动态部分内容会先占一些坑位。后续动态内容会以innerHTML的形式，插入到先前占的坑中。这种方式优点是页面底部的jscss资源无法提前加载和执行，并且页面可以先看到一个全貌。缺点是对SEO不友好，且页面模块的执行顺序会根据动态块返回速度有所变化，需要在浏览器端页面逻辑里做一些判断和兼容。

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。更多内容请加danei0707学习了解。欢迎关注“达内在线”参与分销，赚更多好礼。