前端性能优化之：页面渲染架构设计及方案选型

前端性能优化之：页面渲染架构设计及方案选型，从页面渲染的角度出发，解析浏览器渲染机制，做到性能优化。

前端全链路性能优化之：页面渲染架构设计及方案选型

• 4、构建工具：常用的前端构建工具有哪些？
  • Grunt： 最早，一个项目需要定制多个小任务和引用多个插件（质量参差不齐）
  • Gulp： 通过流（Stream）来简化多个任务间的配置和输出，配置代码相对较少
  • Webpack： 预编译，中间文件在内存中处理，支持多种模块化，配置相对很简单
  • FIS
  • JDF
• 5、打包优化：提升Webpack打包效率的小技巧
  • 定位体积大的模块
  • 删除没有使用的依赖
  • 生产模式进行公共依赖包抽离
  • 开发模式进行 DLL & DllReference 方式优化
• 6、浏览器渲染：你是否清楚浏览器的渲染过程
  • 1. 浏览器解析 HTML ，生成 DOM Tree（ Parse HTML）
  • 2. 浏览器解析 CSS ，生成 CSSOM（ CSS Object Model ） Tree
  • 3. JavaScript 会通过 DOM API 和 CSSOM API 来操作 DOM Tree 和 CSS Rule Tree，浏览器将 DOM Tree 和 CSSOM Tree 合成渲染树（Render Tree）
  • 4. 布局（Layout）：根据生成的 Render Tree，进行回流，以计算每个节点的几何信息（位置，大小，字体样式等）
  • 5. 绘制（Painting）：根据渲染树和回流得到的几何信息，得到每个节点的绝对像素
  • 6. 展示（Display）：将像素发送给图形处理器（GPU），展示在页面上
• 7、页面渲染：主流的页面渲染技术架构和方案有哪些？
  • 服务端渲染
    • 后端同步渲染，同构直出，BigPipe
  • 客户端渲染
    • JavaScript 渲染：静态化，前后端分离，单页面应用
    • Web App：Angular，React，Vue等，PWA
    • 原生App：IOS，Android
    • Hybrid App：phoneGap，AppCan等
    • 跨平台开发：RN，Flutter，小程序等
• 8、后端同步渲染：JSP是如何同步渲染出页面的？
  • 同步渲染的步骤（以 JSP 为例）
    • 步骤1：JSP Servlet 映射以 .jsp 结尾的 URL，当 .jsp 文件请求时，servlet容器知道要调用哪个 Servlet
    • 步骤2：Servlet 容器检查 Servlet 是否已被编译
    • 步骤3：如果未在步骤2中进行编译，则 Servlet 容器会将 JSP 转换为 Servlet 代码，并进行编译
    • 步骤4：Servlet 容器将 JSP 请求转发到编译 JSP Servlet类
    • 步骤5：JSP Servlet 类返回并发送给客户端浏览器 HTML
  • 技术优点
    • 快速实现业务开发并上线
  • 技术不足
    • 需要先实现业务逻辑和功能，再输出 HTML 内容给浏览器，用户等待 HTML 页面完全加载之后才能看到页面内容
    • 代码耦合严重，不太好业务逻辑和页面模板
    • 需求变更上线周期相对较长
  • 协作方式
    • 前端出静态页面，后端套页面
  • 选型建议
    • 如果是创业初期验证阶段，或者20个研发人员以内的项目，为了满足业务快速验证并一天内多次上线，技术选型上使用服务端同步渲染没有任何问题，一人字就是“快”
  • 协作利器
    • jSmart
    • Velocity.js
• 3、静态文件
  • ① 有哪些常用的压缩工具
    • HTML 压缩工具：html-minifier
    • CSS 压缩工具：clean- css
    • JS 压缩工具：uglify-js
  • ② 怎样打包才更合理
    • 公共组件拆分
    • 压缩：JS/CSS/图片
    • 合并：JS/CSS 文件合并，CSS Sprite
    • Combo：JS/CSS问及看 Combo http://cdn.com/??a.js,b.js 内容
  • ③ 版本号更新，你应该遵循哪些策略
    • 缓存更新
      • CDN 或 ng 后台刷新文件路径，更新文件header头
    • 文件 name.v1-v10.js
      • 大功能迭代每次新增一个大版本，比如由v1到v2
      • 小功能迭代新增加 0.0.1 或者 0.1.0，比如从 v1.0.0 至v1.0.1
      • 年末ng统一配置所有版本302至最新版
    • 时间戳.文件 name.js
      • 以每次上线时间点做差异
    • 文件 hash.文件 name.js
      • 以文件内容 hash 值做key
      • 每次上线，文件路径不一致
• 2、DOM 编程优化
  • 怎样控制 DOM 大小
    • 页面交互卡顿和流畅度很大一部分原因就是页面有大量DOM元素。
      • 想象一下，从一个上万节点的DOM树上，使用querySelectorAll或getElementByTagName 方法查找某一个节点，是非常耗时的。
      • 另外元素绑定事件，事件冒泡和事件捕获的执行也会相对耗时。
    • 通常控制 DOM 大小的技巧包括：
      • 合理的业务逻辑
      • 延迟加载即将呈现的内容
  • 怎样简化 DOM 操作
    • 对 DOM 节点的操作统一处理后，再统一插入到 DOM Tree中
    • 可以使用 fragment ，尽量不在页面 DOM Tree里直接操作
    • 现在流行的框架 Angular ，React , Vue 都在使用虚拟 DOM 技术，通过 diff 算法简化和减少 DOM 操作
• 1、怎样才能减少浏览器的回流和重绘
  • CSS
    • 避免过多样式嵌套
    • 避免使用CSS表达式
    • 使用绝对定位，可以让动画元素脱离文档流
    • 避免使用table布局
    • 尽量不使用float布局
    • 图片最好设置好 width 和 height
    • 尽量简化浏览器不必要的任务，减少页面重新布局
    • 使用Viewport设置屏幕缩放级别
    • 避免频繁设置样式，最好把新 Style 属性设置完成后，进行一次性更改
    • 避免使用引起回流/重绘的属性，最好把相应变量缓存起来
  • JS
    • 最小化回流和重绘
      • 为了减少回流发生次数，避免频繁或操作DOM，可以合并多次对DOM修改，然后一次性批量处理
    • 控制绘制过程和绘制区域
      • 绘制过程开销比较大的属性设置应该尽量避免减少使用
      • 减少绘制区域范围