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

Posted 三水草肃

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端性能优化方案总结~~干货满满!!!相关的知识,希望对你有一定的参考价值。

图片格式和应用场景介绍

  • 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" />
  1. 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. 浏览器解密信息

以上是关于前端性能优化方案总结~~干货满满!!!的主要内容,如果未能解决你的问题,请参考以下文章

熬夜写了一份 Web 性能优化干货总结!

前端总结--性能优化

javaer你还在手写分表分库?来看看这个框架怎么做的 干货满满

前端开发代码结构及性能优化大总结

前端知识总结--性能优化

前端性能优化小结(面试干货)