前端性能优化及其优化点

• jpg有损压缩，压缩率高但是不支持透明

• png支持透明且浏览器兼容性较好

• webp压缩程度好，但是在ios webview上有兼容性问题，即对ios的支持度不好

• svg矢量图，代码内嵌，相对较小图片样式相对较少

图片格式的使用场景：

• jpg——大部分不需要透明图片的业务场景

• png——大部分需要透明图片的业务场景

• webp——安卓全部

• svg——图片样式相对简单的业务场景

图片优化的几种方式

• 进行图片压缩：针对真实图片的情况，舍弃一些无关紧要的色彩信息(常用于压缩图片的网站为：https://tinypng.com/ ，其能够保证图片在不失帧的情况下将图片压缩到最小)

• css雪碧图：把网站上用到的一些图片整合到一张单独的图片中

• 优点：

1. 减少网站的http请求数量

• 缺点：

1. 当图片加载不出时，会出现页面上所有需要该图片的部分都显示不出，影响渲染效果

2. 当修改图片时，重新拼接图片等，有的需要重新进行裁剪，在维护上不方面

• Image inline：将图片的内容内嵌到html中，减少网站的http请求数量。使用方式为：let 变量 = _inline(url), src = 变量

• 使用矢量图：使用svg进行矢量图的绘制，如使用iconfont解决icon问题

• 使用webp格式的图片：webp优势体现在其具有更优的图像数据压缩算法，能带来更小的图片体积；同时具备有损和无损的压缩模式、Alpha透明以及动画的特性，在jpeg和png上的转化效果非常优秀和稳定

图片的懒加载

• 含义：当图片进入到可视区域之后去请求图片的资源

• 使用场景：对于电商网站需要加载很多图片，页面很长时适用

• 作用：减少无效资源的加载，增强页面的性能，有更好的交互体验

• 影响：并发加载的资源过多时，会阻塞js的加载，影响网站的正常适用

• 懒加载的实现方案：

1. 采用原生js实现

2. 使用lazyload插件https://www.lazyloadjs.cn/

图片的预加载

• 含义：图片等资源在使用之前就预先加载，提前请求

• 作用：资源使用时能从缓存中加载，提升用户体验

• 预加载实现方式：

1. 在img标签中使用display:none

2. 在js中新建image对象，将图片资源放在该对象之中

3. 使用XMLHttpRequest对象

4. 使用preload插件https://github.com/imweb/preload

浏览器渲染过程中的一些优化点

---

首先需要了解的就是整个浏览器在渲染过程中是怎样一个过程，其渲染过程如下：

1. 拿到html文档

2. 解析html生成一个dom树，解析css生成一个css树

3. 将dom树与css树结合渲染生成一个render树

4. layout(回流)：根据生成的render树，进行回流，得到节点的几何信息

5. painting(重绘)：根据render树以及回流得到几何信息，从而得到节点的绝对像素

6. display：将像素发给gpu经过计算最终展示在页面

html在渲染过程中的一些特点

• 顺序执行、并发加载

• 并发加载：在加载过程中会引入css以及js资源在浏览器端并发加载，但是需要注意的是并发加载是受并发度所影响的，因为在一个域名下其加载资源的量是有一定限度的，其解决方式是将很多的资源都放在cdn上，通常情况下会设置三到四个域名，这样能防止一个域名下资源并发上限

• 是否阻塞：

1. css加载是否会阻塞js加载

2. js的加载是否会影响后续的js执行

3. css加载是否会影响页面的渲染

• 依赖关系：html文件之间的依赖关系，如何保证在html中依赖关系正常的情况下来提升效率

• 引入方式

顺序执行、并发加载

• 词法分析：浏览器对html文档的一种解析方式，其加载的方式是按照顺序从上到下执行的，其会影响一些资源的引入过程

• 并发加载

• 并发上线

css阻塞

• css header阻塞页面的渲染：利用该特点可避免页面闪动，将css放在header之中会阻塞页面的渲染，需要等css加载完成之后才会去执行之后的内容，这样可避免页面的闪动

• css阻塞js的执行：造成该现象的原因是有的js操作会影响到css样式的更改等

• css不阻塞外部脚本的加载

js阻塞

• 直接引入的js会阻塞页面的渲染

• js不阻塞资源的加载：在浏览器的内核中如webkit有预加载器，当执行到需要加载资源的部分时，就会先加载资源

• js顺序执行：在js顺序执行时，也会影响到后续js的逻辑执行

css性能与js之间的关系

在这两者之间存在着一定的关系，即css性能会让js执行变慢，造成这个的原因是因为在频繁的出现回流与重绘时，会导致UI频繁渲染，最终导致js执行变慢

回流

• 含义：当render tree中的一部分(或全部)，因为元素的规模尺寸、布局或者是隐藏等改变而导致需要重新计算Dom节点及其样式在设备视口内的确切位置和大小时，该阶段就被称之为回流

• 造成回流的因素：

• 盒子模型相关属性的改变

• 获取定位元素以及浮动

• 改变节点内部文字结构

重绘

• 含义： 当render tree中的一些元素需要重新更新属性并且这些属性只影响元素的外观以及风格，而不影响布局，即将回流阶段获得的具体集合信息(位置、大小)转换成屏幕上的实际像素，该阶段被称之为重绘节点即重绘

• 造成重绘的因素：

• color border-style border-radius visibility text-decoration background等只影响元素外观及风格的元素

基于重绘与回流优化

对于该部分首先需要理解新建dom过程：

• 获取Dom之后分割图层

• 对于每个图层的节点计算样式结果(Recalulate style-样式重计算)

• 为每个节点生成生成图形和位置(layout-回流和重布局)

• 将每个节点绘制填充到图层位图中(paint setup和paint-重绘)

• 图层作为纹理上传至gpu

• 符合多个图层到页面上生成最终屏幕图像(composite layers-图层重组)

从新建dom的过程可知，在页面的性能提升上可以获得的优化点为：

• 避免使用触发重绘、回流的css属性

• 将重绘、回流的影响范围限制在单独的图层中

从这里的优化点可知，如果要将重绘、回流限制在单独的图层中需要知道的就是怎样去创建一个图层，在chrome中创建图层的条件如下：

• 3D或透视变化css属性(perspective transform)

• 使用加速视频解码的video节点

• 拥有3D(WebGL)上下文或加速的2D上下文的canvas节点

• 混合插件(如flash)

• 使用opacity做动画或使用一个动画的webkit变换元素

• 拥有加速css过滤器的元素

• 元素有一个包含复合层的后代界面(一个元素拥有一个子元素，该子元素在自己的层里)

• 元素有一个较低的z-index且包含一个复合层的兄弟元素(即该元素在复合层上的渲染)

基于重绘与回流的优化点：

• 用translate代替top的改变

• 用opacity代替visibility

• 不要一条一条的修改dom样式，预定定义好clas，然后再修改DOM的className

• 把DOM离线修改

• 不要使用table布局，可能一个很小的改动都会造成table的重新布局，应该尽量使用div

• 动画实现速度的选择

• 用动画新建图层

• 启用GPU硬件加速，使用transform来开启GPU硬件加速

缓存相关

---

对于从缓存方面来优化页面就需要知道以下两点：

1. localStorage、cookie、sessionStorage以及indedb的概念及应用

2. 理解pwa和service worker的应用

cookie

• 常用业务场景：去保存浏览器端或者客户端的信息，发送到服务器，去辨别用户

• 使用原因：因为http请求无状态，使用cookie去维持客户端的状态

• cookie的生成方式：

• http response header中set-cookie

• js中可通过document.cookie去读写cookie

• 作用：

• 用于浏览器端与客户端的交互

• 客户端自身数据的存储(仅仅是存储浏览器端的一些信息)

• cookie存储的限制：

• 作为浏览器存储，其大小4kB左右

• 需要设置过期时间expire

• httponly不支持浏览器端读写(从安全性上考虑，因而其属性值常常被设置为true)

• 缺点：cookie在相关域名下会有cdn的流量损耗

• 解决方式：cdn域名和主站的域名要分开

localStorage

其具有以下的几个特点：

• html5设计出专门用来做浏览器存储的

• 其大小为5M左右

• 仅在客户端使用，不和服务端做通信

• 接口封装较好，可以直接使用方法

• 常用于作为浏览器本地缓存方案(防止首屏渲染出现加载不出信息而出现白屏现象)

sessionStorage

其具有以下特点：

• 会话级别的浏览器存储方案，会话已结束自动清除存储内容

• 大小为5M左右

• 仅在客户端使用，不和服务端进行通信

• 接口封装较好

• 常用于表单信息的维护(表单进行多页面应用传递时使用)

浏览器中的分级缓存策略

该分级缓存的顺序依次为：

1. 200状态(form cache)：这一层由expires/cache-control控制

2. expires(http1.0版本有效)，是绝对时间

3. cache-control(http1.1版本有效)，相对时间

4. 优先级：当两者都存在时，cache-control覆盖expires只要没失效，浏览器只访问自己的缓存

5. 304状态：该层由last-modified/etag控制，当下一层失效时或者这用户重新刷新时，浏览器就会发送请求到服务端，如果服务端没有变化就返回304，此时浏览器就会使用缓存中的内容

6. 200状态：当浏览器中没有缓存，或者是下一层失效时或者用户刷新，浏览器直接去服务端下载最新的资源

• etag与last-modified之间的异同点以及优先级

• 相同点：都需要与cache-control结合使用

• 不同点：

• etag：

1. 文件的内容为hash值，

2. etag——>response header,if-none-match——>request header

• last-modified

1. 文件内容为时间

2. last-modified ——>response header,if-modified-since——>request header

3. 其存在的缺点：1. 某些服务端不能获取精确的修改时间；2. 存在文件时间修改了，文件内容没变的情况

indexDB

• 含义：是一种低级的API，用户客户端存储大量结构化数据，该API使用索引来实现对该数据的高效性能搜索，虽然Web Storage存储较少量的数据很有用，但是对于存储大量的结构化数据来说，这种方式就不太可取。因而indexDB就提供了这样的一种解决问题的方案

• 应用场景：为应用创建离线版本

PWA

• 含义：一种新型的web app模型，并不是具体指某一种前言的技术或者单一的知识点，其是一个渐进式的Web App,是通过一系列新的Web特性，配合优化的UI交互设计，逐步的增强Web App的用户体验

• 可靠：在没有网络的环境中也能提供基本的页面访问，而不是会出现"未连接到互联网"的页面

• 快速：针对网页渲染以及网络数据访问有较好的优化

• 融入：应用可以被添加到手机桌面，并且和普通应用一样有全屏、推送的特性

• lighthouse：(download: chorme application station)，可以运行lighthouse去测试该web app对于pwa应用的性能检测

service worker

• 含义：是一个脚本，浏览器独立于当前页面，将其在后台运行，为实现一些不依赖页面或者用户交互的特性打开，在未来这些特性包括，推送消息，背景后台同步，geofencing(地理围栏定位)，但它将推出一个首要特性就是拦截和处理网络请求的能力(包括以编程式的方式来管理被缓存的响应)

• 应用场景

• 使用拦截和处理网络请求的能力去实现一个离线应用

• 使用其在后台运行同时能和页面通信的能力，去实现大规模后台数据的处理

• service woker生命周期：

1. No Service Worker到Installing

2. 如果安装成功就进入激活状态，否则则报一个error

3. 进入激活状态之后就直接进入IDLE（集成开发环境）

4. 最后idle状态也可以进入到terminated或者是fetch/message，两者之间可以互换

• service worker的调试工具

• chrome://serviceworker-internals/

• chrome://inspect/#service-workers

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
的自学效果低效漫长且无助。**

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-33uS1qPS-1715887286074)]

[外链图片转存中…(img-WnN6G2i9-1715887286075)]

[外链图片转存中…(img-AwIYEc8j-1715887286075)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！