前端性能优化方案总结~~干货满满！！！

Posted 2021-06-24 三水草肃

图片格式和应用场景介绍

• jpg 存储和传输照片 有损压缩，加载快，体积小，不支持透明
  1. 适合颜色丰富的照片，banner图，背景图
• png 透明，无损，体积大。
  1. 适用于小logo，颜色简单且对比强烈的图片
• Gif
  1. 动画，图标，不适合彩色图片，支持透明和不透明
• Webp
  1. 适用于图形和半透明图像，提供有损和无损压缩
  2. 不适用于彩色图片，

图片压缩

• 压缩png： node-pngquant-a=native
  1. 跨平台，压缩比高，压缩png24非常好
• 压缩 jpg： jpegtran
• 压缩 gif
  1. Gifsicle改变每帧比例，减少gif文件大小

逐步加载图像

• 使用统一占位符
• 使用LQIP。低质量图像占位符
• 使用SQIP。基于SVG的图像的占位符
• web font 图标
• Data URL替代图片，base64代码用css代码缓存到本地
• 雪碧图

HTML优化细则

• 减少html的嵌套
• 减少DOM节点数
• 减少无语义代码
• 删除http或者https，如果URL的协议头和当前页面的协议头是一致的，URL在多个协议头都是可用的，则可以考虑函数协议头
• 删除多余的空格，换行符，缩进和不必要的注释
• 省略冗余标签和属性
• 使用相对路径的URL

CSS优化细则

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

JS优化细则

• 尽量避免使用eval
• JS函数尽可能保持简洁
• 使用事件节流函数
• 使用事件委托
• 避免使用大量JS动画
• 尽量使用CSS3动画 、 Canvas动画
• 合理使用requestAnimationFrame动画替代settimeout setinterval，requestAnimationFrame可以在正确的时间进行渲染，settimeout和setinterval无法保证callback回调函数的执行时机

JS缓存优化

合理缓存DOM对象
缓存列表长度
使用可缓存的AJax

JS模块化加载方案和选型

• CommonJS
  1. 旨在web浏览器之外为JS建立模块生态系统，Node模块化方案受CommonJS
• AMD 异步模块规范
  1. RequeireJS模块化加载器，基于AMD API实现
• CMD 通用模块定义规范
  1. SeaJS模块化加载器，遵循CMD API编写
• ES6 import

减少回流和重绘的重要举措

• 避免频繁或操作DOM。可以合并多次对DOM修改，然后一次性批量处理

静态文件打包方案

• 公共组件拆分提取
• 压缩JS/CSS代码
• 合并JS/CSS文件合并，CSS Sprite
• Combo：JS/CSS文件 Combo http://cdn?a.js,b.js

静态文件版本号更新策略

缓存更新

1. DN或ng后端刷新文件路径，更新文件header头
2. 文件name.v1-v1010.js
3. 大功能迭代每次新增一个大版本，比如v1和v2
4. 小功能迭代新增加0.01或者0.02，比如从v0.01或v0.02
5. nginx统一配置所有版本302至最新版

更新策略

1. 时间戳文件.name.js
   • 以每次上线时间点做差异
2. 文件hash.文件.name.js
   • 以文件内容hash值做key
   • 每次上线，文件路径不一样

静态化

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

• 技术优势：

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

• 技术不足

1. 服务器存储占用问题，因为页面量级再增加，要占用大量的硬盘控件
2. 静态页面中的连接更新问题会有死链或者错误链接问题、、
   技术实现
3. 跑定时任务，将已有的动态内容进行重定向，生成静态的HTML页面
4. 利用模板技术，将模板引擎中的字符替换为从数据库字段中取出来的值，同时生成HTML文件
   协作方式
5. 前端统一写好带有交互的完整静态页面
6. 后端拆分出静态页面文件，并嵌套再后端模板文件中

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

• Grunt：
  最早，一个项目需要定制多个小任务和引用多个插件
• Gulp：
  通过流来简化多个任务间的配置和输出，配置代码相对较少
• Webpack：
  预编译，中间文件在内存中处理，支持多种模块化，配置相对很简单

webpack打包优化

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

单页面用用技术方案

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

技术优点

• 不错的加载速度：用户往往感觉页面加载非常快，因为已进入页面就能看到页面元素。
• 良好的交互体验：进行局部渲染，避免不必要的页面间跳转和重复渲染
• 前后端职责分离：前端进行页面交互逻辑，后端负责业务逻辑
• 减轻服务器负载：服务器只处理数据接口输出，不用考虑页面模板渲染和HTML展示
  技术缺点：
• 开发成本相对较高
• 首次页面加载时间过多
• SEO难度比较大
  技术实现
• 使用Angular，React，Vue框架可以很好的实现。

懒加载

• 懒加载也叫延迟加载，指的是长网页中延迟加载特定元素

• 好处：可以减少当前屏无效资源的加载

• 延迟加载图片是指异步加载网站上的图片，也就是说，在首屏内容完全加载后，如果用户不向下滚动，放在页面底部的图片甚至不会被加载

• 实现方式和示例
  1.把页面上 懒加载元素 src属性设置为空字符，把真实的src属性写在data-lazy属性中，当页面滚动的时候监听scroll事件，如果懒加载元素在可视区域内，就把图片的src属性或者文件url路径设置为data-lazy属性值

• 懒加载可以的几个组件

  1. Native lazy loading
  2. IntersectionObserver API
  3. Lozad.js
  4. Yall.js

如何实现url预加载

• 可以使用预加载让浏览器来预先加载某些资源，而这些资源是在将来才会被使用到的，简单来说就是将所需资源提前加载到浏览器本地，这样后面在需要使用的时候就可以直接从浏览器缓存中取了。而不用再重新开始加载
• 好处：减少用户后续加载资源等待的时间。

实现方式

1. HTML

<img  src="1212" style="display:none" />

2. JS

var img = new Image()  img.src =''

3.使用preload，prefetch，preconnect

<link rel="preload" />
<link rel="prefetch" />
<link rel="dns-prefetch" />
<link rel="preconnect" />

预渲染

• 对于大型项目，在懒加载组件被加载之前，组件可能还会有其它懒加载组件的代码或数据，所以用户还是需要时间等待组件加载完成
  那另一种预加载组件的方式就是提前渲染它，在页面中渲染组件，但是并不是在页面中展示，也就是渲染好后先隐藏起来，用的时候直接展示

• 实现方式:
  <link rel="prerender" href="https://my.com">

HTTPS基本概念

• HTTPS：超文本传输安全协议，是一种通过计算机网络进行安全通信的传输协议
• HTTPS诗经是经过HTTP进行通信，但利用SSL/TLS进行数据加密
• HTTPS主要目的是提供对服务器身份认证，保护数据隐私和完整性

HTTPS工作原理

1. 浏览器发起HTTPS请求
2. 服务器传输证书
3. 浏览器解析证书
4. 浏览器传送加密信息
5. 服务器解密信息
6. 服务器传输加密后的信息
7. 浏览器解密信息