浅析前端渲染与服务端渲染

背景知识： 　　「后端渲染」指传统的 ASP、Java 或 PHP 的渲染机制； 　　「前端渲染」指使用 JS 来渲染页面大部分内容，代表是现在流行的 SPA 单页面应用； 　　「同构渲染」指前后端共用 即：服务端渲染，实际上也是需要客户端进行 再次地、但开销很小的二次渲染。 前端渲染的优势 局部刷新。无需每次都进行完整页面请求 懒加载。 还有静态站点的渲染，但这类应用本身复杂度低，很多前端框架已经能完全囊括。 耗时对比： 　　时间耗时比较： 　　　　1. 数据请求：由服务端请求数据而不是客户端请求数据，这是“快”的一个主要原因。 增加了前端的工作量，需要多维护node层。 解决方案： 　　一、前端和后端先行讨论对接，确定哪些是前端渲染哪些是后端渲染，确定字段，接口格式。 　　 前端渲染的部分，又分为2种， 　　1、前端模板，vue、react去绑数据，实现方式为virtual Dom。 　　

前端优化--关键渲染路径

通过优化关键渲染路径，我们可以显著缩短首次渲染页面的时间。 此外，了解关键渲染路径还可以为构建高性能交互式应用打下基础。 这样一来，就能尽快将内容渲染到屏幕上，此外还能缩短首次渲染后屏幕刷新的时间，即为交互式内容实现更高的刷新率。 构建对象模型 浏览器渲染页面前需要先构建 DOM 和 CSSOM 树。 渲染树构建、布局及绘制 CSSOM 树和 DOM 树合并成渲染树，然后用于计算每个可见元素的布局，并输出给绘制流程，将像素渲染到屏幕上。优化上述每一个步骤对实现最佳渲染性能至关重要。 我们该如何将两者合并，让浏览器在屏幕上渲染像素呢？ DOM 树与 CSSOM 树合并后形成渲染树。 渲染树只包含渲染网页所需的节点（至关重要）。 布局计算每个对象的精确位置和大小。 最后一步是绘制，使用最终渲染树将像素渲染到屏幕上。

前端性能优化--渲染篇

对于内容复杂和变更频繁的前端应用，页面渲染也常常是性能优化的核心场景。前面我有给大家整体地讲过《前端性能优化--方案归纳篇》，其实里面已经囊括了大多数场景下的一些性能优化的方向。 关于加载流程相关的优化，也有在《前端性能优化--加载流程篇》一文中进行详细的介绍。本文主要围绕页面渲染相关的内容，来进行性能优化分析。首屏渲染说到页面渲染，首屏的渲染显然是最首要的。 实际上，对于首屏内容的优化，前端开发在项目中更常用的点是骨架屏、数据分片/分屏加载、SSR DOM 直出渲染这几种，因为这几个优化点相对来说方向明确、效果明确、实现相对简单。 虽然现在大多数前端项目都离不开前端框架，也正因为这些框架本身已经做了很多的优化，所以我们常常会忘记和忽略掉这些注意事项。 结束语本文主要围绕页面渲染和更新的过程，介绍了一些性能优化的方向。其实如果你有注意到，就会发现本文的内容大多数还是基础和简单的前端知识点。

前端渲染优化有哪些？

最好是通过 javascript动态给 iframe 添加 src 属性值， 这样可 绕开以上两个问题 禁止使用 gif 图片实现 loading 效果 ( 降低 CPU 消耗，提升渲染性能 避免文件跨域 修改及时生效 页面头部的 <style></style> <script></script> 会阻塞页面;( 因为 Renderer 进程中 JS 线程和渲染线程是互斥的 ) 页面中空的 href 和 src 会阻塞页面其他资源的加载 (阻塞下载进程) 网页 gzip ， CDN 托管， data 缓存 ， 图片服务器 前端模板 JS+数据，减少由于 HTML 标签导致的带宽浪费 ， 前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数 用 innerHTML 代替 DOM 操作，减少 DOM 操作次数，优化 javascript 性能 当需要设置的样式很多时设置

【前端技术】react渲染 - 流程概述

作者：winkchen  腾讯IEG前端开发工程师 |导语 web前端技术中，有个叫做jsx的模板渲染语法，它是一个JavaScript 的语法扩展，目前逐渐被行业标准化(用的人多了...)。 实际上jsx 是来源于一个前端框架 react。在react中除了我们了解的jsx，那么jsx在react的渲染过程是哪个环节生效，以及渲染过程经历了哪些步骤。本文会基于这些点进行概述。 一.介绍前的建议 1.本文的react.render树状图.xmind，此为作者查看/调试react的渲染源码时做的结构笔记。

React to Render