H5常见性能优化及原理分析
静态资源组织
常见的图像格式类型：
JPEG 格式：
首先JPEG的整个过程就是对图片的颜色rgba()进行转换，然后进行重采样，区分高频和低频颜色变换，从而进行DTA过程，然后进行压缩对高频颜色变换采样结果，然后进行量化求和，最终得到压缩版的JPEG。
此压缩版本的图片与原始数据的图片存在差异。 虽然在压缩过程中会丢失一些数据，但这些差异是人眼无法识别的。 因此，压缩后不会影响整体浏览体验。 同时对于页面来说，静态资源图片的容量也可以减少很多，从而提高网页的加载速度。
PNG格式：
PNG图像是一种支持透明度的图像格式，其本质是颜色索引数据的集合。 它有PNG8、PNG24、PNG32三种格式，分别是8位、24位、32位索引。 PNG 的文件格式内部有一个调色板。
以PNG8为例：PNG是一种256色+透明函数的格式，其调色板中有256种颜色，即一个像素的颜色需要8bit数据长度来索引，也就是说PNG8的颜色图像仅有256种颜色，因此PNG8的颜色没有那么丰富，有缺点也有优点，而且它的文件大小也是PNG文件格式中最小的。
PNG24图像需要2^24种颜色，即一个像素的颜色需要24位来索引，所以png24索引一个颜色所需的数据长度是png8的三倍，并且不支持透明度。 png32的图像在png24的透明功能的基础上，PNG图像的选择取决于图像的颜色。
如果图片的颜色不是很丰富且比较单一，可以考虑使用PNG8图片。 如果图片色彩非常丰富，可以选择PNG24或PNG32位图片，以减小图片资源的大小。 PNG 图像的每种格式都有一些细微的差异。 在实际开发中，需要平衡当前项目中文件大小、图像格式、图像质量、图像大小的重要性，然后再决定使用哪种图像格式。
常见图片格式使用场景：
JPEG：图片的压缩率比较高，适合用作背景图片，头图适合大面积背景的情况下使用。
PNG：该格式支持透明度。 这种格式的图像兼容性非常好。 用于一些需要透明的背景或弹出层，或者以下需要追求体验质量而使用PNG图片进行页面整体开发的情况。
SVG：另一种是SVG矢量图形。 这种格式最大的优点就是放大缩小时不会失真，而且极其精细。 同时文件比较小，并且图像格式嵌入在代码中。 如果可能的话，尽可能使用这种格式。 图片，当然这只能用于一些简单的组件如图标、按钮等来编写简单的业务场景。
优化图片导入方式：
CSS
目前，恶意仍然是一种常用的图像组织方法。 其优点是将大小图片组合成一张大图片，然后利用图片定位来显示对应的图片，这样可以减少页面请求，提高页面加载速度。
但也有一个缺点，就是由于是大图，所以很多小图都依赖于这张图。 如果这张图没有加载的话，整个页面基本就缺失了，但是就目前的网络而言，基本上可以忽略这个问题，现在基本没有4G网络或者wifi速度慢的情况。
图像-
使用格式嵌入到页面中来减少http请求也是一个好方法，但是在实际开发中一般很少这样做，因为将图片嵌入到HTML中之后实际上不太容易维护。 根据我的开发经验，一般来说，在没有其他办法的情况下，一般都是使用图片格式。
例如，在开发项目中，图片资源一般会放在不同域的地址中。 在使用生成的图片时， .(...) 会污染图片的原始地址，导致跨域问题，而后端不能因为单独生成这张图片时，此时使用它是最简单粗暴的解决方案。 在html中嵌入图片解决了跨域的情况。
图像压缩
把图片放在一些工具上进行批量压缩。
HTML页面加载渲染流程
网页渲染的流程
在加载网页的过程中，首先得到的是一段HTML文本，也可以说是一串字符串。 浏览器解析器需要对这个字符串进行一系列的词法分析，并为每个标签生成对应的标签。 每个标签对应的一个token或者对象，然后从上到下解析这些token，然后从上到下一步步生成对应的DOM节点。
当然，在词法分析的过程中，可以解析出link标签，并请求加载对应的网页资源。 它会被浏览器内核的V8引擎执行，css与html类似。 会解析成CSSOM，然后是HTML、CSSM，解析后组合生成Tree得到的基本信息，然后进入，最后渲染Paint。
HTML 加载功能
顺序加载、并发加载
顺序加载指的是上面提到的词法分析，即浏览器解析HTML页面时，从上到下顺序执行。
并发加载是指同一个域内的静态资源会同时发起请求，即并发请求。 当然，如果有并发请求，服务器也是有并发请求上限的。 例如 中同一域下的资源并发请求数为6，当遇到需要请求大量图片的时候，我们就需要使用延迟加载或者预加载的方式来操作。
优化 HTML 加载和渲染
避免 CSS 和 JS 阻塞
css尽量写在头部，因为css的加载会阻塞页面的加载，这是有利的。 这样就避免了页面加载时css未加载时页面闪烁的情况。 同时，css的加载会阻塞JS的执行，但不会阻塞导入的JS的加载。
js尽量写在HTML文本的底部，因为js的引入会阻塞页面的渲染，而且还依赖于DOM节点。 因此，HTML和CSS应该先加载，JS应该最后加载。 当然，如果不影响首屏，也可以使用defer和async来加载不是立即需要的JS文件。 加载后是根据DOM加载，依次加载执行。
还有async是否顺序加载，谁先加载完就执行。 使用这种方法，需要注意JS是否依赖。 JS的执行顺序也是顺序执行的。 存在相互依赖，阻塞了后续JS逻辑的执行，所以必须要安排一下。 依次。
除了defer和async之外，还有直接使用动态加载js的。 一般情况下，这种方法会用在组件的情况下，封装一个组件，然后用js动态加载JS和CSS。
&
用于加载大量图片，但加载的数量可以根据用户的操作来确定。 目的是减少对服务器的请求，减少网络流量的浪费，同时提高用户体验。 例如，有些电商页面展示商品，并在浏览器滚动到的地方加载相应的数据，而不是一次性列出所有数据。
在H5页面中下拉刷新、上拉加载也是很常见的。 当然，由于IOS本身的浏览器特性，还需要进行一些相应的处理。
用于一些需要注重用户体验、运行页面交互流畅的场景。 页面加载时，先加载所有数据，然后再打开页面。 最常见的方式是利用加载进度条，首先将所有静态资源存储在一个数组中，然后依次加载并计算百分比，达到100%后进入下一步。
浏览器重绘和回流
我们先来说一下框架的概念。 目前大多数设备屏幕的刷新率为每秒60次，即1000/60=1.6ms为一帧。 如果浏览器进行任何渲染，其渲染时间必须小于1.6ms或尽可能接近1.6ms，否则会出现卡顿现象，影响用户体验。
假设浏览器渲染一个动画的时间正好是一帧，那么这一帧的图片会先重新计算样式（css/dom等）然后，更新树，然后()，最后执行()。如下图
()表示当当前页面的布局和几何属性发生变化时，会触发机制。
重绘（ ）是指更新树本身的一些属性，但不影响整体布局，只是改变背景、颜色等，这称为重绘。
优化浏览器页面渲染
前端性能优化的关键是减少页面重绘和回流。
避免使用一些会触发回流的属性。 有些属性会触发的机制，比如：top，以及其他布局相关的属性。 例如：使用@中的位移方法而不是top。
以下图为例：很明显少了一步。 这是因为将触发回流的top属性替换为top属性，减少了渲染过程中的这一步，减少了渲染时间，提高了性能。
触发回流焊的情况
避免回流情况
显然，还少了一步。 这是因为将触发回流的top属性替换为top属性，减少了渲染过程中的这一步，减少了渲染时间，提高了性能。
优化浏览器页面渲染的原理
独立的频繁渲染层，将需要频繁回流重绘的块拿出来作为单独的层，从而减少浏览器的回流重绘范围，从而减少CPU资源消耗。 因为，浏览器渲染过程是这样的：
- DOM 现在被分为多个层；
- 然后将每一层光栅化并将节点绘制到图中；
- 然后将该层作为纹理上传到 GPU；
- 最后，重新组织图层，只要我们对需要独立操作的图层进行重绘和回流，就不会影响其他图层。
根据上面的渲染流程，这里就有一个GPU加速的概念了。 由于我们创建了一个新的合成层，它实际上启用了 GPU 加速。 创建新图层有多种方法：
- 3D或透视变换
- 使用加速视频解码的视频元素；
- 具有 3D (WelGL) 上下文或加速器的 2D 上下文元素；
- 自己做CSS动画或使用过渡元素；
- 具有加速 CSS 过滤功能的元素；
- 元素A有一个z-index小于自身的元素B，并且元素B是复合层（换句话说，该元素渲染在复合层之上），那么元素A将被提升为复合层;
以第2点为例：打开英雄联盟比赛直播视频：
我们可以看到为什么这里的视频变成了一层，这里有一个解释。
这里提一下第7点，因为在实际开发项目中，尤其是在移动端做一些动画效果的时候，经常会遇到问题。
在上图的情况下，元素 B 应该位于单独的合成层上，并且屏幕的最终图像应该在 GPU 上合成。 但是A元素位于B元素之上，并且我们没有指定A元素和B元素的层次结构。 那么浏览器此时会强制为元素A创建一个新的复合层，从而使A和B都变成单独的复合层。
因此，在使用GPU加速来提高动画性能时，最好为当前动画元素添加较高的z-index属性，人为地干扰复合图层的排序，这样可以有效减少不必要的复合图层的创建，提高渲染效果表现。
创建新图层时要小心：GPU 不仅需要将渲染的图层图像发送到 GPU，还需要存储它们以供稍后在动画中重用。 图层不能随意创建，必须结合当前项目情况进行分析。 因为创建新图层是有代价的，所以创建的每个新渲染层都意味着新的内存分配和更复杂的图层管理。 对于某些 机型来说，这种性能开销是无法承受的。
浏览器存储
****：一般用于存储账户验证信息或者一些敏感的用户数据，或者移动端某些项目的合作页面需要获取登录状态信息时，可以使用转账页面来存储相应的数据以便于访问。 一般用于CS与自身数据存储的交互。
因为，它的传递方法是先从服务器生成，然后浏览器接收服务器返回的数据中的set-并将数据写入本地，然后每个http请求（同一域名下）都会携带信息，以便服务器执行请求的用户认证。 注意：不同的域名是不能访问的。
这是一种非常高效的交互机制，但也带来了一些问题。 既然每次都会带上，那就意味着如果请求数量多的话，就会造成流量消耗，从而造成加载缓慢，造成资源浪费。 有些资源CDN可以用来将主站和资源站的域名分开。 当然，这也是基于大量网页的情况。 如果一个网页的PV低于10万甚至更多，在当今的网络中其实是有可能的。 可以忽略。
说到这里，让我想起了之前去一家小公司面试的时候。 当我问到他们公司的网页性能优化情况时，技术总监说，“如果流量没有达到10万以上，你就可以看到界面的正常体验，什么方便就什么。” 大家都笑了，不过，作为开发者，还是要从技术的角度出发，无论项目大小，尽可能的做到最好。
&
& ：对比这两个H5新发布的专门用于存储数据的属性，容量可以达到5M。 唯一的区别是，一是浏览器关闭后数据还在，二是浏览器关闭后数据被清除。 它可以用作一些临时数据的存储，例如表单或购物车数据。 不过假设有极限情况，这个容量不够的时候还是可以考虑的。
这个浏览器API是一个浏览器数据库，仅在需要存储大量结构化数据时使用。 目前使用这个API的人还是很少，因为客户端不需要存储特别大量的数据，数据基本上都是交给后台的，而前端基本上需要的数据存储的基本上是临时数据和验证数据。 另一种是创建相应的离线应用程序。
当需要获取体积较大、计算量较大的js文件时使用此方法。 在3D渲染的情况下，js文件体积大，计算量大，而且js是在单线程中执行的。 这样可能会导致卡住，上一个js还没处理完，下一个js还要等待。 SW是独立于当前WEB的，后台可以处理不同的JS，对主页面进行监控然后汇总。
网络应用程序
PWA是指通过一系列新的Web功能和UI设计来实现最佳的用户体验。 这也是未来WEB APP的趋势。 说白了，它会尽量接近原生APP的体验。 比如它的三个主要方向，第一，APP可以在没有网络的情况下打开和使用。
二是提高相应的速度，以达到最佳的体验效果，二是生成可点击的桌面，与普通APP一样。 点击APP进入，同样具有全屏和推送功能。 眨眼间。 Pwa 原来是 7 年前 的技术。
浏览器缓存
良好的缓存策略可以减少http请求和网页的延迟，减少不必要的数据加载，降低网络负载，从而提高页面响应速度，让用户有更好的浏览体验。 但缓存只能提高第二次打开页面的响应速度，第一次打开页面仍然取决于当前的网络环境和设备。
浏览器的缓存就是保存客户端上的文件。 每次会话时，浏览器都会检查缓存的副本是否仍在有效期内。 如果是这样，浏览器将不再向服务器请求该文件，而是直接在内存中获取并使用。 如果文件已经过期，浏览器就会向服务器发起请求。 这减少了不必要的请求并加快了页面响应速度。
中会保存web缓存的信息，通过中的一些属性配置一些缓存策略，并通过该策略来判断资源是否需要向服务器发起请求再次加载。 它可以存在于 或 中，目的是让客户端和服务器知道对方的缓存情况。
缓存-
Cache-是控制缓存策略的http。 有：max-age、s-、、、no-cache、no-store。 这些属性用于配置缓存并形成缓存策略。
最大年龄
max-ago指的是最大有效时间，即该资源从当前请求的时间算起，在这个时间范围内，不需要向服务器发起资源请求，浏览器可以直接获取该文件中的文件。内存并使用它，我们打开王者荣耀官网：
看到这里的标识，cache-的max-age-是86400秒，换算成86400/3600=24，即这个标识在一天之内访问这个网页时不会向服务器发起资源请求，即使这样徽标已更改。 从图中可以看到from cache，即从内存中获取。
s-
s- 和 max-age 类似，它们不会在指定的时间内向服务器发起资源请求，但是有一个区别，s- 指向共享缓存，例如：cdn，即设置了 s- 后，如果在该时间段内cdn有更新，则不会重新发起请求。 当 和 s- 都设置在缓存中时，s- 将覆盖 and。
和
指私有缓存，即只能由用户自己访问的缓存，指可以被多个浏览器访问的共享缓存。 如果不指定或者是默认的，需要注意的是 s - 只有必须设置时才会生效。
无缓存
意思是每次向服务器发送请求时都会验证缓存是否过期，而不是在一段时间内不会向服务器发送任何资源请求。 注意no-cache的使用，可以设置为0，设置属性为：
缓存-:,:0，无缓存
无商店
指的是禁止缓存，每次加载都需要进行资源请求。
用于设置缓存过期时间。 和max-age一样，是在一定时间内指定的。 只要缓存生效，就不会向服务器请求资源。 但max-age的优先级比max-age高，需要和last-一起使用。
因为是强缓存，所以他是否在规定的时间内向服务器发起请求，无论服务器上的文件是否已经更新。 还有一点就是它出现的比较早，所以在浏览器兼容性上有优势。 （这个有点过时了）
最后-和如果-最后-
last-&if-last- 指文件的最后修改时间，基于客户端和服务器之间的缓存协商机制。 last- 存储在 if--since 中。
我们看到有一个last-，里面有一个时间，就是这个文件在服务器上的最后修改时间，浏览器会保存这个时间。 当下次请求的时候，里面会有if--since，此时告诉服务器这个文件是在这个时间点最后更新的。
如果此时服务器上的文件发生了变化，则会重新加载并返回状态码200。如果服务器上的资源没有变化，浏览器会直接获取缓存并返回304。
Etag 和 if-none-Match
服务器根据文件内容生成哈希值来标识资源的状态。 当向服务器发出第二次请求时，服务器将验证哈希值是否一致，以确定文件是否发生更改。 它能解决哪些问题？ 只有last-的情况才会有以下缺陷：
服务器文件改变了，但内容没有改变；
服务器无法准确获取资源的最后修改时间；
秒内已操作资源，最后-无法识别；
Etag是基于内容的，无论什么操作，只要内容改变，哈希值就必然改变。 另外就是etag的优先级比last-高。 还要补充一点：Last-&ETag 仅在浏览器执行另一次验证时才会使用。 他首先要判断缓存过期（max-age），然后再使用这两个东西。 当然，ETag的优先级比Last-要高。
有所不同： - 这适用于启用了 gzip 压缩并由代理服务器缓存的资源。 如果客户端不支持压缩，那么这种情况下可能无法获取到正确的数据，因此代理服务器可能有两种版本的资源，一种是压缩的，一种是未压缩的。 另一个原因是ie浏览器，ie不支持任何带Very 的资源，但值却不是--和user-Agent（IE已被废弃）
总结：页面的优化方案需要根据当前项目的需求进行调整，以达到最佳的实际体验。
-----
刚开始写H5的时候，我还是一个称霸比赛的羽毛球小王子。 我想..
过去的推荐
