前端性能优化方案总结~~干货满满!!!
Posted 三水草肃
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端性能优化方案总结~~干货满满!!!相关的知识,希望对你有一定的参考价值。
图片格式和应用场景介绍
- jpg 存储和传输照片 有损压缩,加载快,体积小,不支持透明
- 适合颜色丰富的照片,banner图,背景图
- png 透明,无损,体积大。
- 适用于小logo,颜色简单且对比强烈的图片
- Gif
- 动画,图标,不适合彩色图片,支持透明和不透明
- Webp
- 适用于图形和半透明图像,提供有损和无损压缩
- 不适用于彩色图片,
图片压缩
- 压缩png: node-pngquant-a=native
- 跨平台,压缩比高,压缩png24非常好
- 压缩 jpg: jpegtran
- 压缩 gif
- 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
- 旨在web浏览器之外为JS建立模块生态系统,Node模块化方案受CommonJS
- AMD 异步模块规范
- RequeireJS模块化加载器,基于AMD API实现
- CMD 通用模块定义规范
- SeaJS模块化加载器,遵循CMD API编写
- ES6 import
减少回流和重绘的重要举措
- 避免频繁或操作DOM。可以合并多次对DOM修改,然后一次性批量处理
静态文件打包方案
- 公共组件拆分提取
- 压缩JS/CSS代码
- 合并JS/CSS文件合并,CSS Sprite
- Combo:JS/CSS文件 Combo http://cdn?a.js,b.js
静态文件版本号更新策略
缓存更新
- DN或ng后端刷新文件路径,更新文件header头
- 文件name.v1-v1010.js
- 大功能迭代每次新增一个大版本,比如v1和v2
- 小功能迭代新增加0.01或者0.02,比如从v0.01或v0.02
- nginx统一配置所有版本302至最新版
更新策略
- 时间戳文件.name.js
- 以每次上线时间点做差异
- 文件hash.文件.name.js
- 以文件内容hash值做key
- 每次上线,文件路径不一样
静态化
定义:静态化是使动态化的网站生成静态HTML页面以供用户更好访问的技术,一般分为纯动态化和伪动态化
- 技术优势:
- 提高了页面访问速度,降低了服务器的负担,因为访问页面不需要每次访问数据库
- 提高网站内容被引擎搜索到的几率,因为搜索更喜欢静态页面
- 网站更稳定,如果后端程序,数据库出现问题,会直接影响到网站的正常访问,而静态化页面有缓存,更不容易出现问题
- 技术不足
- 服务器存储占用问题,因为页面量级再增加,要占用大量的硬盘控件
- 静态页面中的连接更新问题会有死链或者错误链接问题、、
技术实现 - 跑定时任务,将已有的动态内容进行重定向,生成静态的HTML页面
- 利用模板技术,将模板引擎中的字符替换为从数据库字段中取出来的值,同时生成HTML文件
协作方式 - 前端统一写好带有交互的完整静态页面
- 后端拆分出静态页面文件,并嵌套再后端模板文件中
前端构建工具介绍和选型建议
- Grunt:
最早,一个项目需要定制多个小任务和引用多个插件 - Gulp:
通过流来简化多个任务间的配置和输出,配置代码相对较少 - Webpack:
预编译,中间文件在内存中处理,支持多种模块化,配置相对很简单
webpack打包优化
- 定位体积大的模块
- 删除没有使用的依赖
- 生产模式进行公共依赖包的抽离
- 开发模式进行DLL & DllReferenve方式优化
单页面用用技术方案
- 定义:
单页应用通过动态重写当前页面,来与用户交互。而非传统的从服务器重新加载整个新页面。这种方法再使用过程中不需要重新加载页面,避免了页面之间切换打断用户体验。是应用更像是一个桌面应用程序
技术优点
- 不错的加载速度:用户往往感觉页面加载非常快,因为已进入页面就能看到页面元素。
- 良好的交互体验:进行局部渲染,避免不必要的页面间跳转和重复渲染
- 前后端职责分离:前端进行页面交互逻辑,后端负责业务逻辑
- 减轻服务器负载:服务器只处理数据接口输出,不用考虑页面模板渲染和HTML展示
技术缺点: - 开发成本相对较高
- 首次页面加载时间过多
- SEO难度比较大
技术实现 - 使用Angular,React,Vue框架可以很好的实现。
懒加载
-
懒加载也叫延迟加载,指的是长网页中延迟加载特定元素
-
好处:可以减少当前屏无效资源的加载
-
延迟加载图片是指异步加载网站上的图片,也就是说,在首屏内容完全加载后,如果用户不向下滚动,放在页面底部的图片甚至不会被加载
-
实现方式和示例
1.把页面上 懒加载元素 src属性设置为空字符,把真实的src属性写在data-lazy属性中,当页面滚动的时候监听scroll事件,如果懒加载元素在可视区域内,就把图片的src属性或者文件url路径设置为data-lazy属性值 -
懒加载可以的几个组件
- Native lazy loading
- IntersectionObserver API
- Lozad.js
- Yall.js
如何实现url预加载
- 可以使用预加载让浏览器来预先加载某些资源,而这些资源是在将来才会被使用到的,简单来说就是将所需资源提前加载到浏览器本地,这样后面在需要使用的时候就可以直接从浏览器缓存中取了。而不用再重新开始加载
- 好处:减少用户后续加载资源等待的时间。
实现方式
- HTML
<img src="1212" style="display:none" />
- 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工作原理
- 浏览器发起HTTPS请求
- 服务器传输证书
- 浏览器解析证书
- 浏览器传送加密信息
- 服务器解密信息
- 服务器传输加密后的信息
- 浏览器解密信息
以上是关于前端性能优化方案总结~~干货满满!!!的主要内容,如果未能解决你的问题,请参考以下文章