前端性能优化一

时间  2020-12-24 标签 前端性能优化

减少浏览器的回流和重绘

1. CSS 方面

  • 避免过多样式嵌套
  • 避免使用CSS表达式
  • 使用绝对定位，可以让动画元素脱离文档流
  • 避免使用table布局
  • 尽量不要使用float布局
  • 图片最好设置好width和height
  • 尽量简化浏览器不必要的任务，减少页面重新布局
  • 使用Viewport设置屏幕缩放级别
  • 避免频繁设置样式，最好把新style属性设置完成后，进行一次性更改
  • 避免使用引起回流/重绘的属性，最好把相应变量缓存起来

2. JS方面

  • 最小化回流和重排
    • 为了减少回流发生次数，避免频繁或操作DOM，可以合并多次对DOM修改，然后一次性批量处理。
  • 控制绘制过程和绘制区域
    • 绘制过程开销比较大的属性设置应该尽量避免减少使用
    • 减少绘制区域范围

DOM优化： 控制DOM大小并简化DOM操作

1. 控制DOM大小

  • 总所周知，页面交互卡顿和流畅度很大一部分原因就是页面 有大量DOM元素。
    想象一下，从一个上万节点的DOM树上，使用querySelectorAll或getElementByTagName方法查找某一个节点，是非常耗时的。另外元素绑定事件，事件冒泡和事件捕获的执行也会相对耗时。
  • 通常控制DOM大小的技巧包括：
    • 合理的业务逻辑
    • 延迟加载即将呈现的内容

2. 简化DOM操作

  • 对DOM节点的操作统一处理后，再统一插入到DOM Tree 中
  • 可以使用fragment,尽量不要在页面DOM Tree里直接操作
  • 现在流行的框架Angular,React,Vue都在使用虚拟DOM技术，通过diff算法简化和减少DOM操作

静态文件打包方案

  • 公共组件拆分
  • 压缩： JS/CSS/图片
  • 合并： JS/CSS文件合并，CSS Sprite
  • Combo: JS/CS S 文件 Combo http://cdn.com/??a.js,b.js内容 （ 服务端处理的方式，比较建议）

静态文件：版本号更新，应遵循哪些策略？

  • 缓存更新

    • CDN 或 nginx后台刷新文件路径 ，更新文件header头

  • 加版本号 文件名列如： name.v1-v100.js

    • 大功能迭代每次新增一个大版本，比如v1到v2
    • 小功能迭代新增加0.0.1 或者0.1.0， 比如从 v1.0.0 至 v1.0.1
    • 年末 nginx 统一配置所有版本至最新版

  • 加时间戳 时间戳.文件 name.js

    • 以每次上线时间点做差异

  • 加哈希值 文件 hash.文件 name.js

    • 以文件内容hash值做key
    • 每次上线，文件路径不一致

    算法中，什么是哈希值，哈希值怎么生成的，有什么用？
    1、你可以把哈希值简单地理解成是一段数据（某个文件，或者是字符串）的DNA，或者身份证；
    2、通过一定的哈希算法（典型的有MD5，SHA-1等），将一段较长的数据映射为较短小的数据，这段小数据就是大数据的哈希值。他有这样一个特点，他是唯一的，一旦大数据发生了变化，哪怕是一个微小的变化，他的哈希值也会发生变化。另外一方面，既然是DNA，那就保证了没有两个数据的哈希值是完全相同的。
    3、正是因为这样的特点，它常常用来判断两个文件是否相同。比如，从网络上下载某个文件，只要把这个文件原来的哈希值同下载后得到的文件的哈希值进行对比，如果相同，则表示两个文件完全一致，下载过程没有损坏文件。而如果不一致，则表明下载得到的文件跟原来的文件不同，文件在下载过程中受到了损坏。

前端构建工具介绍和选型建议

1. Grunt
最早，一个项目需要定制多个小任务和引用多个插件（质量参差不齐）
2. Gulp

通过流（Stream）来简化多个任务间的配置和输出，配置代码相对较少

3. Webpack

预编译，中间文件在内存中处理，支持多种模块化，配置相对很简单

4. FIS (百度)
5.JDF（京东）

打包优化： 提升webpack打包效率的6个小技巧

  • 定位体积大的模块
  • 删除没有使用的依赖
  • 生产模式进行公共依赖包抽离
  • 开发模式进行DLL & DllReference方式优化

浏览器渲染过程

  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），展示在页面上
    在这里插入图片描述

页面渲染： 页面渲染技术架构和方案总览

1. 服务端渲染

  • 后端同步渲染，同构直出，BigPipe

2. 客户端渲染

  • JavaScript渲染：静态化，前后端分离，单页面应用
  • Web App: Angular,React,Vue等，PWA
  • 原生 App: iOS,Android
  • Hybrid App: PhoneGap,AppCan等
  • 跨平台开发： RN,Flutter,小程序等

后端同步渲染： 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

页面静态化：动态页面静态化要如何实施？

静态化

  • 定义

    • 静态化是使动态化的网站生成静态HTML页面以供用户更好访问的技术，一般分为纯静态化和伪静态化

  • 技术优势

    • 提高了页面访问速度，降低了服务器的负担，因为访问页面时不需要每次去访问数据库
    • 提高网站内容被搜索引擎搜索到的几率，因为搜索引擎更喜欢静态页面
    • 网站更稳定，如果后端程序，数据库出现问题，会直接影响网站的正常访问，而静态化页面有缓存，更不容易出现问题

  • 技术不足

    • 服务器存储占用问题，应为页面量级在增加，要占用大量硬盘空间
    • 静态页面中的链接更新问题会有死链或者错误链接问题

  • 技术实现

    • 跑定时任务，将已有的动态内容重新定时生成静态的HTML页面
    • 利用模板技术，将模板引擎中的模板字符替换为从数据库中取出来的值，同时生成HTML文件

  • 协作方式

    • 前端统一写好带有交互的完整静态页面
    • 后端拆分出静态页面文件，并嵌套在后端模板文件中

  • 选型建议

    • 后端研发人员充分，又需要考虑用户体验，服务器负载的业务

前后端分离：如何正确理解和实现前后端分离？

  • 定义

    • 前后端分离是指研发人员分离，业务代码分离，后端实现业务接口，前端渲染页面

  • 技术实现

    • 后端只负责功能接口实现，提供按照约定的数据格式并封装好的API接口
    • 前端负责业务具体实现，获取到API接口数据后，进行页面模板拼接和渲染，独立上线

  • 协作方式

    • 前端负责实现页面前端交互，根据后端API接口拼装前端模板
    • 后端专注于业务功能实现和API接口封装

  • 技术优势

    • 团队更加专注
    • 提升了开发效率
    • 增加代码可维护性

  • 技术架构

    • 后端架构： Java, PHP + Nginx, 使用微服务（比如 dubbo 等） 等实现业务的解耦，所有的服务使用某种协议提供不同的服务（比如 JSF 等）
    • 前端架构： 使用Angular, React, Vue 前端框架并部署页面至CDN
    • 前端框架2：使用Angular, React, Vue前端框架部署在Node Server

  • 技术不足

    • 因为前端需要负责一大部分业务逻辑实现和服务器同步，静态化，需要前端人力非常多
    • 页面数据异步渲染，不利于SEO,搜索引擎更喜欢纯静态页面

  • 选项建议

    • 这是大型互联网公司正在采用的开发模式，一句话，如果考虑用户体验，以及前端人力够用，可以积极采用

单页面应用：什么情况下该选择单页面应用？怎样实现？

  • 定义

    • 单页应用（single-page application, 缩写SPA）通过动态重写当前页面，来与用户交互，而非传统的从服务器重新加载整个新页面。这种方法在使用过程中不需要重新加载页面，避免了页面之间切换打断用户体验，使应用程序更像一个桌面应用程序

  • 技术优点

    • 不错的加载速度：用户往往感觉页面加载非常快，因为一进入页面就能看到页面元素
    • 良好的交互体验：进行局部渲染，避免不必要的页面跳转和重复渲染
    • 前后端职责分离：前端进行页面交互逻辑，后端负责业务逻辑
    • 减轻服务器负载：服务器只处理数据接口输出，不用考虑页面模板渲染和HTML展示

  • 技术缺点

    • 开发成本相对较高
    • 首次页面加载时间过多
    • SEO难度比较大

  • 技术实现

    • 使用Angular, React, Vue框架

  • 选型建议

    • 重交互页面业务
    • 核心链路场景业务
联系我们 沪ICP备13005482号-10