- 综合排序
- 最热优先
- 最新优先
- 来自专栏吴裕超
浅析前端渲染与服务端渲染
一般来说同构渲染是介于前后端中的共有部分。 客户端渲染路线：1. 请求一个html -> 2. 服务端返回一个html -> 3. 浏览器下载html里面的js/css文件 -> 4. 等待后端数据返回 -> 8. react-dom( 客户端 )从无到完整地，把数据渲染为响应页面 服务端渲染路线：2. 请求一个html -> 2. 服务端请求数据( 内网请求快 ) -> 3. 步骤：服务端是先请求数据然后渲染“可视”部分，而客户端是等待js代码下载、加载完成再请求数据、渲染。即：服务端渲染不用等待js代码下载完成再请求数据，并会返回一个已经有内容的页面。 3. 增加了前端的工作量，需要多维护node层。 解决方案： 一、前端和后端先行讨论对接，确定哪些是前端渲染哪些是后端渲染，确定字段，接口格式。 前端渲染的部分，又分为2种， 1、前端模板，vue、react去绑数据，实现方式为virtual Dom。
3.6K40发布于 2018-02-28 - 来自专栏Super 前端
前端优化--关键渲染路径
通过优化关键渲染路径，我们可以显著缩短首次渲染页面的时间。 此外，了解关键渲染路径还可以为构建高性能交互式应用打下基础。 令牌化： 浏览器将字符串转换成 W3C HTML5 标准规定的各种令牌，例如，“<html>”、“<body>”，以及其他尖括号内的字符串。每个令牌都具有特殊含义和一组规则。 渲染树构建、布局及绘制 CSSOM 树和 DOM 树合并成渲染树，然后用于计算每个可见元素的布局，并输出给绘制流程，将像素渲染到屏幕上。优化上述每一个步骤对实现最佳渲染性能至关重要。 我们该如何将两者合并，让浏览器在屏幕上渲染像素呢？ DOM 树与 CSSOM 树合并后形成渲染树。 渲染树只包含渲染网页所需的节点（至关重要）。 布局计算每个对象的精确位置和大小。 最后一步是绘制，使用最终渲染树将像素渲染到屏幕上。
1.7K41发布于 2019-08-14 - 来自专栏被删的前端游乐场
前端性能优化--渲染篇
对于内容复杂和变更频繁的前端应用，页面渲染也常常是性能优化的核心场景。前面我有给大家整体地讲过《前端性能优化--方案归纳篇》，其实里面已经囊括了大多数场景下的一些性能优化的方向。 关于加载流程相关的优化，也有在《前端性能优化--加载流程篇》一文中进行详细的介绍。本文主要围绕页面渲染相关的内容，来进行性能优化分析。首屏渲染说到页面渲染，首屏的渲染显然是最首要的。 实际上，对于首屏内容的优化，前端开发在项目中更常用的点是骨架屏、数据分片/分屏加载、SSR DOM 直出渲染这几种，因为这几个优化点相对来说方向明确、效果明确、实现相对简单。 虽然现在大多数前端项目都离不开前端框架，也正因为这些框架本身已经做了很多的优化，所以我们常常会忘记和忽略掉这些注意事项。 结束语本文主要围绕页面渲染和更新的过程，介绍了一些性能优化的方向。其实如果你有注意到，就会发现本文的内容大多数还是基础和简单的前端知识点。
90430编辑于 2024-01-18 - 来自专栏前端入门学习
如何从请求、传输、渲染3个方面提升Web前端性能
什么是WEB前端呢？就是用户电脑的浏览器所做的一切事情。 通过上面的路径可以看出浏览器分为请求、传输、渲染三部分来实现用户的访问，本文就从这三个部分来浅析如何提升WEB前端性能。 请求 浏览器为了减少请求传输，实现了自己的缓存机制。 3、通过延迟加载技术，在用户无感知的情况下请求资源。 4、通过服务器配置，实现一次请求，返回多个资源文件，如淘宝CDN那样。 除了减少请求数量，也可以使用CDN镜像，来减少网络节点，实现快速响应。 在这里小编建了一个前端学习交流扣扣群：132667127，我自己整理的最新的前端资料和高级开发教程，如果有想需要的，可以加群一起学习交流 传输 从服务器往客户端传输，可以开启gzip压缩来提高传输效率 3、由于position的值为absoute和fixed时候，是脱离文档流的，操作此类DOM节点，不会引起整页重排。所以动画元素设置position使其脱离文档流。
96310发布于 2019-07-23 - 来自专栏技术客栈
前端渲染优化有哪些？
最好是通过 javascript动态给 iframe 添加 src 属性值， 这样可 绕开以上两个问题 禁止使用 gif 图片实现 loading 效果 ( 降低 CPU 消耗，提升渲染性能 ) 使用 CSS3 代码代替 JS 动画 (尽可能避免重绘重排以及回流) 对于一些小图标， 可以使用base64位编码， 以减少网络请求 。 避免文件跨域 修改及时生效 页面头部的 <style></style> <script></script> 会阻塞页面;( 因为 Renderer 进程中 JS 线程和渲染线程是互斥的 ) 页面中空的 href 和 src 会阻塞页面其他资源的加载 (阻塞下载进程) 网页 gzip ， CDN 托管， data 缓存 ， 图片服务器 前端模板 JS+数据，减少由于 HTML 标签导致的带宽浪费 ， 前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数 用 innerHTML 代替 DOM 操作，减少 DOM 操作次数，优化 javascript 性能 当需要设置的样式很多时设置
60710编辑于 2024-06-12 - 来自专栏宜信技术实践
如何从请求、传输、渲染3个方面提升Web前端性能
什么是WEB前端呢？就是用户电脑的浏览器所做的一切事情。 通过上面的路径可以看出浏览器分为请求、传输、渲染三部分来实现用户的访问，本文就从这三个部分来浅析如何提升WEB前端性能。 一、请求 浏览器为了减少请求传输，实现了自己的缓存机制。 3、通过延迟加载技术，在用户无感知的情况下请求资源。 4、通过服务器配置，实现一次请求，返回多个资源文件，如淘宝CDN那样。 除了减少请求数量，也可以使用CDN镜像，来减少网络节点，实现快速响应。 3、由于position的值为absoute和fixed时候，是脱离文档流的，操作此类DOM节点，不会引起整页重排。所以动画元素设置position使其脱离文档流。 3、使用回调来代替闭包访问内部属性 4、当不可避免使用闭包时，慎重的对待其中的细节。不用的时候注销掉。 5、通过浏览器自带的工具profiles，来检查内存活动情况。如果是波浪型的，说明正常。
2.1K30发布于 2019-06-28 - 来自专栏人生代码
Vue 3 条件渲染
条件渲染 实验介绍 可以使用条件判断的方式来分别渲染。 v-if v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。 最终的渲染结果将不包含 <template> 元素。 我们可以得出结论，v-if 如果给定的值不为 true，DOM 元素不会渲染出来，而 v-show 给定的值如果不为true，实际上是在样式上加了 display: none 影藏了而已，实际上是渲染出来的 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
1.3K20发布于 2020-11-03 - 来自专栏人生代码
Vue 3 列表渲染
列表渲染 实验介绍 列表渲染，其实给人的感觉就是 JavaScript 中的 for 循环，只不过将其提取到 HTML 模板层面了，将其指令化，本质还是 for 循环。 用 v-for 把一个数组对应为一组元素 我们可以用 v-for 指令基于一个数组来渲染一个列表。 key 属性 当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。 如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。 这个默认的模式是高效的，但是「只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出」。
1.7K10发布于 2020-11-03 - 来自专栏腾讯大讲堂的专栏
【前端技术】react渲染 - 流程概述
作者：winkchen 腾讯IEG前端开发工程师 |导语 web前端技术中，有个叫做jsx的模板渲染语法，它是一个JavaScript 的语法扩展，目前逐渐被行业标准化(用的人多了...)。 实际上jsx 是来源于一个前端框架 react。在react中除了我们了解的jsx，那么jsx在react的渲染过程是哪个环节生效，以及渲染过程经历了哪些步骤。本文会基于这些点进行概述。 七.渲染 渲染可以按照功能，切分为三个点 准备、执行、提交。 我们按照3个步骤往下延伸： 1 - 准备阶段 ： 做两件事： 1.创建根节点的一些关联对象 ReactRoot、fiberRoot、 (HostRoot)fiberNode 2.定义根节点的默认浏览器事件 3 - 提交阶段： 提交阶段的代码也在 "react-reconciler/src/ReactFiberReconciler.js" unbatchedUpdates函数内执行 具体的函数执行在 "react-reconciler
1K10发布于 2020-12-29 - ) } 运行结果：浏览器等待响应的时间为 3s来自专栏前端技术地图
现代前端框架的渲染模式
这十年，前端渲染方式一直在演进，我觉得大概可以分为以下三个阶段： 传统 SSR: 那时候前端还没有分离，在 JSP、ASP、Ruby on Rails、Django 这些 MVC 框架下，通过模板来渲染页面 同构前端：这几年前端框架的发展进入的深水区，随着云原生、容器技术、Serverless、边缘计算等底层技术设施的普及，也让‘前端’生存范围延展到服务端。 前端开始寻求 UX 和 DX 的平衡点 通过这篇文章，你就可以知道近些年前端渲染模式的演变。 废话不多说，直接开始吧。 CSR - 客户端渲染 这个我们再熟悉不过了， 即前端页面在浏览器中渲染，服务端仅仅是静态资源服务器(比如 nginx)。 data: {crucialData.data}
<Foo></Foo> <Bar></Bar>1.2K31编辑于 2023-10-20
【前端】：浏览器渲染模式
当 W3C 创立网络标准后，为了不破坏当时既有的网站，浏览器不能直接弃用这些标准。因此，浏览器采用了两种模式，用以把能符合新规范的网站和老旧网站区分开。 图1-1：浏览器渲染引擎族谱 ? 2. 浏览器如何决定用哪个模式 ？ 浏览器使用文件开头的 DOCTYPE 来决定用怪异模式处理或标准模式处理。 <!DOCTYPE html> <! 3. 我要如何知道目前是哪个模式 ？ 3.1. document.compatMode document.compatMode 可以表明当前文档的渲染模式是混杂模式还是"标准模式".
前端优化--阻塞渲染的CSS
默认情况下，CSS 被视为阻塞渲染的资源，这意味着浏览器将不会渲染任何已处理的内容，直至 CSSOM 构建完毕。请务必精简您的 CSS，尽快提供它，并利用媒体类型和查询来解除对渲染的阻塞。 在 渲染树构建（可查看上篇文章） 中，我们看到关键渲染路径要求我们同时具有 DOM 和 CSSOM 才能构建渲染树。这会给性能造成严重影响：HTML 和 CSS 都是阻塞渲染的资源。 HTML 显然是必需的，因为如果没有 DOM，我们就没有可渲染的内容，但 CSS 的必要性可能就不太明显。如果我们在 CSS 不阻塞渲染的情况下尝试渲染一个普通网页会怎样？ 浏览器将阻塞渲染，直至 DOM 和 CSSOM 全都准备就绪。 CSS 是阻塞渲染的资源。需要将它尽早、尽快地下载到客户端，以便缩短首次渲染的时间。 根据网页加载时设备的方向，portrait.css 可能阻塞渲染，也可能不阻塞渲染。 最后一个声明只在打印网页时应用，因此网页首次在浏览器中加载时，它不会阻塞渲染。
Vue3 | 条件渲染 与 列表循环渲染
完整原文地址见简书https://www.jianshu.com/p/695bf35fa466 本文内容提要 条件渲染 v-if与v-show控制渲染的机制的区别 v-if与v-show 各自的适用场景 v-if与v-else的配合 控制渲染 v-if、v-else-if与v-else的配合 控制渲染 列表循环渲染 v-for例程（数组方式） v-for例程（Object方式 -- 注意使用Key值优化v-for的性能 通过数组的变更函数 更新渲染列表UI 通过 直接用新数组替换更新原数组 更新渲染列表UI 通过改变 数组内容（元素） 更新渲染列表UI 循环Object对象，增加Object 列表循环渲染 v-for例程（数组方式）： <! // this.listArray.splice(2,1,'lalala'); // this.listArray.splice(2,3,
前端资源浏览器渲染原理
浏览器的渲染页面过程 HTML解析过程 一般情况下服务器会给浏览器返回 xx.html 文件 解析html 其实就是 Dom 树的构建过程 我们可以根据以下html 结构 来简单的分析出 html frame转为屏幕上实际的像素点； 包括将元素的可见部分进行绘制，比如文本、颜色、边框、阴影、替换元素（比如img） 渲染的流程可以参考下图 ： 完成以上五步 成功在浏览器渲染出 对应的 xx.html 文件 回流和重绘 回流（reflow） reflow ： 我们渲染出来的节点大小位置 也就是布局时第一次渲染出之后就确定的 之后对于节点大小和位置重新计算的行为 叫做回流（reflow） 回流在什么时候会出现 会形成新的合成层的属性： 3D transforms video、canvas、iframe opacity 动画转换时 position: fixed will-change animation 或 在渲染html的时候 js 没有继续构造DOM的能力 如果需要需要的部分 会先停止构建，下载js 执行脚本 把需要构建的东西构建完成后 继续执行构建 DOM 这么做有什么好处？
前端: 如何渲染十万条数据
面试常见问题: 如何渲染十万条数据 最直接的方法就是直接渲染出来，但是这样的做法肯定是不可取的，因为直接渲染太耗性能了。 提高渲染性能的解决方案有如下： 虚拟列表（也叫按需渲染或可视区域渲染） 时间分片 虚拟列表是最主流的解决方案，不渲染所有的数据，只渲染可视区域中的数据。 01 直接渲染 通过for 直接渲染，太消耗性能
Vue3 - 条件渲染
v-if 条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。 不同之处在于 v-show 会在 DOM 渲染中保留该元素；v-show 仅切换了该元素上名为 display 的 CSS 属性。 v-show 不支持在 <template> 元素上使用 v-show不能和 v-else 搭配使用### v-if VS v-show v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销
UE(3)：延迟渲染管线
如上图所示，因为是Windows平台，所以此处是D3D11。 ，InitViews属于数据处理，因此无法体现在渲染流程中，我们简单介绍一下如下的三个主要Pass，理解UE延迟渲染的最简流程。 深度图在渲染中的作用非常大，而且无需Pixel片元阶段，计算成本很小，甚至可以生成一个更高分辨率的深度图，提升渲染质量。 总结 本文介绍了UE延迟渲染中两个核心的Pipeline，一个是Mesh Drawing，一个是Deferred Shading，主要侧重于渲染中的逻辑流程和关键Pass的生成结果，理解渲染中如何利用材质和着色器的大概步骤 参考资料 [1] 剖析虚幻渲染体系（03）- 渲染机制: https://www.cnblogs.com/timlly/p/14588598.html
【React基础-3】元素渲染
通过上文的了解，我们知道我们可以将一段HTML标签代码直接赋值给一个JS变量，并且将这个变量传给react相应的方法之后，前端浏览器页面就会看到预期的显示效果，那在这个过程中，我们本文所介绍的”元素”这个东西到底是什么呢 元素渲染 我们将一个react元素渲染到页面的话，是要通过ReactDOM的render()方法来渲染的，例如下面的代码： import React from 'react'; import ReactDOM ')); 上述代码就是将element这个元素通过ReactDOM的render()方法渲染到了页面上。 render()方法需要传入两个参数：第一个参数是要渲染的元素，第二个参数是将要渲染的元素被渲染到的dom节点。 仅仅是渲染上一次和这次新传进去的元素中间变化了的部分，也就是上述例子中的”时间”这部分一直在改变，但是其余的部分并没有发生变化，这是为什么呢？
Vue3 - 列表渲染
Vue 列表渲染 v-for 我们可以使用 v-for 指令基于一个数组来渲染一个列表。 text:"重庆市" } ] } } } </script> <template> <main>
- {{ item.text }}
干货|前端同构渲染的思考与实践
开篇 前端同构渲染的相关架构，给我最直观的感受，这是前端渲染最为复杂的一种方案，也是为了追求极致的用户体验不得不去做的一种尝试，虽然 Node.js 的引入赋能了传统前端领域、SEO 优化也不再是个问题 Node.js 的出现极大程度的给传统前端赋予了更大的能量，前端的分离也从前期的物理文件的区分转变为职责上的区分，前端开发者从页面仔的噩梦中解脱出来，最重要的是，JavaScript 能在服务器端执行了 再议首屏 让我们把视角移动的更细致一些，关注『从服务器端输出 HTML』这一部分，其隐藏的含义是我们需要把 App 渲染的所有 HTML 都输出给前端，其实不然，举个栗子： 比如在移动端有一个页面，它有大约 HTML 字符串做缓存策略，在缓存（一般选择 redis 等方案）之后，下次直接将同样的页面直接输出到前端，可大幅提高渲染性能。 SPA 架构，我们解决的是用户的使用效率，是前端的性能。
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号