导图社区前端全链路性能优化之：静态资源优化

前端全链路性能优化之：静态资源优化

前端全链路性能优化之静态资源优化，包含图片资源，HTML，CSS，JavaScript等文件的优化思路及方法。

编辑于2020-12-29 20:41:02

前端性能优化
性能优化

安生

他的近期作品查看更多>>

前端全链路性能优化之研发开发流程优化
前端全链路性能优化之研发开发流程优化，从混合式开发，CDN/DNS，HTTP，Cookie，服务器，HTTPS，HTP-2等方面实现对研发开发流程的优化。
前端全链路性能优化之全链路质量监控体系建设
前端全链路性能优化之全链路质量监控体系建设，主要从前端团队研发，前后端合作，自动化测试及上线，代码质量优化，上线前的即时检测及上线后的性能/错误监控，对线上业务的基调监控，对App 性能和错误监控等方面讲解前端优化。
前端全链路性能优化之：服务端和网络优化
前端全链路性能优化之：服务端和网络优化，了解 WebView内核，加深对浏览器优化的认知，辨明主流HTML5离线化的技术实现，对混合式开发-React Native内核的了解等方面出发，了解前端性能优化。

前端全链路性能优化之：静态资源优化

社区模板帮助中心，点此进入>>

安生

他的近期作品查看更多>>

相似推荐
大纲

互联网9大思维
- 33.9k
- 913
- 2.4k
- 392
MindMaster
安全教育的重要性
- 6.5k
- 864
- 98
- 18
issen
组织架构-单商户商城webAPP 思维导图。
- 14.6k
- 3
- 184
- 10
Kacyun
个人日常活动安排思维导图
- 7.2k
- 0
- 78
- 0
少儿栏目外景策划波波老师
域控上线
- 1.6k
- 163
- 11
- 4
jackrao
西游记主要人物性格分析
- 15.3k
- 1.3k
- 636
- 105
issen
17种头脑风暴法
- 195.8k
- 3.9k
- 11.6k
- 3.9k
MindMaster
python思维导图
- 5.4k
- 528
- 242
- 7
(*^▽^*)
css
- 1.2k
- 1
- 43
- 3
A张舫
CSS
- 3.3k
- 262
- 188
- 33
journey

前端全链路性能优化之：静态资源优化

3、CSS：CSS的优化应该遵循哪些原则？

①：提升CSS渲染性能

谨慎使用expensive属性如：:nth-child 伪类；position: fixed 定位

尽量减少样式层级数如：div ul li span i { color: blue }

尽量避免使用占用过多CUP和内存的属性如：text-indent:-99999px

尽量避免使用耗电量大的属性如：CSS3 3D transforms、CSS3 transitions、Opacity

②：合理使用CSS选择器

尽量避免使用CSS表达式 background-color: expression( (new Date()).getHours()%2 ? "#FFF" : "#000" )

尽量避免使用通配选择器 body > a { font-weight:bold }

尽量避免类正则的属性选择器 *=, |=, ^=, $=

③：提升CSS文件加载性能

使用外链的CSS

尽量避免使用@import

④：精简CSS代码

使用缩写代码

删除不必要的零

删除不必要的单位，如px

删除过多分号

删除空格和注释

尽量减少样式表的大小

⑤：合理使用Web Fonts

将字体部署在CDN上

将字体以base64形式保存在CSS中并通过localStorage进行缓存

Google 字体库（Google Fonts）因为某些不可抗拒原因，应该使用国内托管服务

⑥：CSS 动画优化

尽量避免同时动画

延迟动画初始化

结合SVG

4、JavaScript

①：如何提升JavaScript的执行效率？

JS优化总体原则

当需要时才优化

考虑可维护性

提升JS文件加载性能

加载元素的顺序CSS文件放在<head>里，JS文件放在<body>里

JS变量和函数优化

尽量使用id选择器

尽量避免使用eval

JS函数尽可能保持简洁

使用事件节流函数

使用事件委托

JS动画优化

避免添加大量JS动画

尽量使用 CSS3 动画

尽量使用 Canvas 动画

合理使用 requestAnimationFrame 动画代替 setTimeout、setInterval （requestAnimationFrame可以在正确的时间进行渲染，setTimeout（callback）和setInterval（callback）无法保证callback回调函数的执行时机）

合理使用缓存

合理缓存 DOM 对象

缓存列表长度

使用可缓存的Ajax

②：如何对JavaScript的缓存进行优化？

通常由浏览器存储，然后将Cookie与每个后续请求一起发送到同一个服务器。收到 HTTP 请求时，服务器可以发送带有Cookie的header头。可以给Cookie设置有效时间

应用于

会话管理：登录名，购物车商品，游戏得分或服务器应要记录的其他内容

个性化：用户首选项，主题或其他设置

跟踪：记录和分析用户行为，比如：埋点

sessionStorage

创建一个本地存储的键/值对

应用于

页面应用页面之间传值

IndexedDB

索引数据库

应用于

客户端存储大量结构化数据

没有网络连接的情况下使用（比如Google Doc、石墨文档）

将冗余、很少修改、但经常访问的数据，以避免随时从服务器获取数据

LocalStorage

本地存储

应用于

缓存静态文件内容JS/CSS（比如百度M站首页）

缓存不常变更的API接口数据

储存地理位置信息

浏览在页面的具体位置

③：如何选择合适的模块化加载方案？

CommonJS

旨在Web浏览器之外为JavaScript建立模块生态系统

Node.js模块化方案受CommonJS

AMD（Asynchronous Module Definition）（异步模块定义）规范 --> RequireJS模块加载器：基于AMD API实现

CMD（Common Module Definition）（通用模块定义）规范 --> SeaJS模块化加载器：遵循CMD API 编写

ES6 import

2、HTML：怎样精简优化HTML的代码结构？

①：精简HTML代码

减少HTML的嵌套

减少DOM节点数

减少无语义代码比如：<div class="clear"></div>消除浮动

删除http或者https，如果URL的协议头和当前页面的协议头一致的，或者此URL在多个协议头都是可用的，则可以考虑删除协议头

删除多余的空格、换行符、缩进和不必要的注释

省略冗余标签和属性

使用相对路径的URL

②：文件放在合适位置

CSS样式文件链接尽量放在页面头部

CSS加载不会阻塞DOM Tree解析，但是会阻塞DOM Tree渲染，也会阻塞后面JS执行。任何body元素之前，可以确保在文档部分中解析了所有CSS样式（内联和外联），从而减少了浏览器必须重排文档的次数。如果放置页面底部，就要等待最后一个CSS文件下载完成，此时会出现白屏，影响用户体验

JS引用放在HTML底部

防止JS的加载、解析、执行对阻塞页面后续元素的正常渲染

③：增强用户体验

设置favicon.ico

网站如果不设置favicon.ico，控制台会报错，另外页面加载过程中也没有图标loading过程，同事也不利于记忆网站品牌，建议统一添加

增加首屏必要的CSS和JS

页面如果需要等待所依赖的JS和CSS加载完成才显示，则在渲染过程中页面那会一直显示空白，影响用户体验，建议增加首屏必要的CSS和JS，比如页面框架背景图片或者loading图标，内联在HTML页面中，这样做，首屏能快速显示出来，相对于减少用户对页面家在等待过程。（比如新浪微博M站页面框架）

1、图片优化

①：如何为不同格式的图片选择合适的应用场景？

JPEG （Joint Photographic Experts Group）

联合图像专家小组是一种针对彩色照片而广泛使用的有损压缩图形格式介绍栅格图形常用文件扩展名： .jpg .jpeg .jpe 常被应用于存储和传输文件不适合：线条图形和文字、图标图形（因为他的算法不太注意这些类型的图形）不支持透明度非常适合：颜色丰富的照片、彩色图大焦点图、通栏banner图结构不规则的图形

PNG （Portable Network Graphics）

便携式网格图形是一种无损压缩的位图图形格式，支持索引、灰度、RGB三种颜色方案以及Alpha通道等特性介绍栅格图形 PNG最初是作为替代GIF来设计的，能够显示256色，文件比JPEG或者GIF大，但是PNG非常好的保留了图像质量支持Alpha通道的半透明和透明特性最高支持24位彩色图像（PNG-24）和8位灰度图像（PNG-8）不适合由于是无损存储，彩色图像体积太大，所以不太适合非常适合纯色、透明、线条绘图、图标边缘清晰、有大块相同颜色的区域颜色数较少但需要半透明

GIF （Graphics Interchange Format）

图像互换格式是一种位图图形文件格式，以8位色（即256种颜色）重现真彩色的图像，采用LZW压缩算法进行编码介绍栅格图形支持256色仅支持完全透明和完全不透明如果需要比较通用的动画，GIF是唯一选择不适合每个像素只有8比特，不适合存储彩色图片非常适合动画图标

Webp

Webp是一种现代图像格式，可为图像提供无损压缩和有损压缩，这使得它非常灵活。由Google在购买On2 Technologies 后发展出来的，以BSD授权条款发布介绍优秀算法能同时保证一定程序上的图像质量和比较小的体积可以插入多帧，实现动画效果采用8位压缩算法无损的Webp比PNG小26%，有损的Webp比JPEG小25-34%，比GIF有更好的动画不适合：最多处理256色，不适合于彩色图片非常适合：适用于图形和半透明图像

②：怎样让图片加载的更快？

用工具进行图片压缩

压缩png：node-pngquant-native （优：跨平台，压缩比高，压缩png24非常好）

压缩jpg：jpegtran （优：跨平台、有Linux/Mac/Windows的解决方案）

压缩gif：Gifsicle （优：通过改变每帧比例，减小gif文件大小，同时可以使用透明来达到更小的文件大小，目前公认的解决方案）

图片尺寸随网络环境变化

不同网络环境(wifi/4G/3G)下，家在不同尺寸和像素的图片，通过在图片URL后缀加不同参数改变

http://img13.360buyimg.com/n1/s100x100_ifs/t2443/71/2538811251/470889/c2ec38b3/570f3438N81a4b62c.jpg

响应式图片

JavaScript绑定事件检测窗口大小

CSS媒体查询

@media screen and (max-width:640px){ my_image{ width:640px; } }

img标签属性

<img sreset="img-320w.jpg, img-640w.jpg 2x, img-960w.jpg 3x" src="img-960w.jpg" alt="img" /> （x描述符：表示图像的设备像素比）

逐步加载图像

使用统一占位符

使用LQIP

低质量图像占位符（Low Quality Image Placeholders）

安装

npm install lqip

源码

使用SQIP

基于SVG的图像占位符（SVG Quality Image Placeholders）

安装

npm install sqip

源码

真的需要图片吗？

Web Font 代替图片

使用 Data URL 代替图片

采用 Image spriting（雪碧图）

③：在服务器端进行图片自动优化的原理是什么？

名词解释

图片服务器自动化优化是可以在图片URL链接上增加不同特殊参数，服务器自动化生成

不同格式、大小、质量的图片

处理方式

图片裁剪

按长边、短边、填充、拉伸等缩放

图片格式转换

支持JPG、GIF、PNG、Webp等，支持不同的图片压缩率

图片处理

添加图片水印、高斯模糊、重心处理、裁剪边框等

AI能力

鉴黄以及智能抠图、智能排版、智能配色、智能合成等AI功能

图片分辨率

默认

大小 100 * 100 的jpg

webp格式的图片

质量压缩至10%

前端全链路性能优化之 ：静态资源优化

前端全链路性能优化之 ：静态资源优化

前端全链路性能优化之：静态资源优化

前端全链路性能优化之：静态资源优化