前端各种优化

1：文件合并：

目的是减少 http 请求，

基本原理：

　　在浏览器(客户端)和服务器发生通信时，就已经消耗了大量的时间，尤其是在网络情况比较糟糕的时候，这个问题尤其的突出。

　　一个正常HTTP请求的流程简述：如在浏览器中输入"www.xxxxxx.com"并按下回车，浏览器再与这个URL指向的服务器建立连接，然后浏览器才能向服务器发送请求信息，服务器在接受到请求的信息后再返回相应的信息，浏览器接收到来自服务器的应答信息后，对这些数据解释执行。

　　而当我们请求的网页文件中有很多图片、CSS、JS甚至音乐等信息时，将会频繁的与服务器建立连接，与释放连接，这必定会造成资源的浪费，且每个HTTP请求都会对服务器和浏览器产生性能负担。

　　网速相同的条件下，下载一个100KB的图片比下载两个50KB的图片要快。所以，请减少HTTP请求。

解决方法：

使用自动化构建工具：利用如Webpack这样的打包工具可以自动合并和压缩您的文件。这些工具通常具有丰富的配置选项，允许您定制合并和压缩的过程。
手动合并：如果没有使用自动化工具，可以手动将多个CSS或JavaScript文件的内容复制到一个文件中。对于CSS，可以将所有的CSS规则合并到一个样式表中；对于JavaScript，可以将所有的脚本合并到一个JS文件中。
测试合并后的文件：确保合并后的文件在网站中能够正常工作，没有引入新的错误或问题。
更新文件引用：在HTML文件中更新对CSS和JavaScript文件的引用，使其指向合并后的新文件。

2:正确理解 Repaint 和 Reflow　　

Repaint 和 Reflow 也就是重绘和重排

基本原理：

　　Repaint(重绘)就是在一个元素的外观被改变，但没有改变布局(宽高)的情况下发生，如改变visibility、outline、背景色等等。

　　Reflow(重排)就是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证DOM树上的所有其它结点的visibility属性，这也是Reflow低效的原因。如：改变窗囗大小、改变文字大小、内容的改变、浏览器窗口变化，style属性的改变等等。如果Reflow的过于频繁，CPU使用率就会噌噌的往上涨，所以前端也就有必要知道 Repaint 和 Reflow的知识。

解决方法：

　上面提到通过设置style属性改变结点样式的话，每设置一次都会导致一次reflow，所以最好通过设置class的方式；　有动画效果的元素，它的position属性应当设为fixed或absolute，这样不会影响其它元素的布局；如果功能需求上不能设置position为fixed或absolute，那么就权衡速度的平滑性。

　　总之，因为 Reflow 有时确实不可避免，所以只能尽可能限制Reflow的影响范围。

可以采取以下措施

直接在目标元素上操作：尽量直接在需要改变样式的元素上操作，而不是通过父级元素来影响子元素。这样可以减少重排的范围，因为浏览器只需要重新计算和应用样式到指定的元素上。
避免使用多层内联样式：内联样式会使得每次修改都触发重排，因此尽量避免使用多层内联样式，转而使用CSS类来定义样式。这样可以通过切换类名来改变样式，而不是直接修改样式属性。
减少重排次数：除了减少重排的范围，还应该尽量减少重排的次数。例如，可以将多个改变样式的操作合并在一起执行，或者使用requestAnimationFrame来将样式的更改放在浏览器的下一次重绘之前进行。
使用文档碎片：当需要对DOM进行大量操作时，可以使用文档碎片（DocumentFragment）来创建一个脱离主文档的节点结构，完成所有操作后再一次性将其添加到DOM中，这样可以避免多次重排

3：减少对DOM的操作　　

基本原理：

　　对DOM操作的代价是高昂的，这在网页应用中的通常是一个性能瓶颈。

　　天生就慢。在《高性能JavaScript》中这么比喻：“把DOM看成一个岛屿，把JavaScript(ECMAScript)看成另一个岛屿，两者之间以一座收费桥连接”。所以每次访问DOM都会教一个过桥费，而访问的次数越多，交的费用也就越多。所以一般建议尽量减少过桥次数。

解决方法：

　　修改和访问DOM元素会造成页面的Repaint和Reflow，循环对DOM操作更是罪恶的行为。所以请合理的使用JavaScript变量储存内容，考虑大量DOM元素中循环的性能开销，在循环结束时一次性写入。

　　减少对DOM元素的查询和修改，查询时可将其赋值给局部变量。

　　注：在IE中:hover会降低响应速度。

减少对DOM的操作可以通过以下几种方式实现：

使用文档碎片：文档碎片（DocumentFragment）是一种轻量级的文档结构，它不是主文档的一部分，因此对它的修改不会触发页面的重绘或回流。通过在文档碎片上进行元素操作，然后将它们一次性添加到DOM中，可以减少重排的次数。
使用缓存机制：将经常访问的DOM元素存储在变量中，以便重复使用，这样可以避免重复访问DOM树，提高代码执行效率。例如，可以将商品数量输入框的值缓存起来，避免重复的DOM查询。

此外，还可以使用虚拟DOM技术，如React等前端框架所提供的。虚拟DOM是对真实DOM的抽象，通过计算虚拟DOM之间的差异来最小化对真实DOM的操作。这样可以显著减少实际DOM操作的次数，从而提高性能。

4：使用JSON格式来进行数据交换

　　基本原理：

　　JSON是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript原生格式，这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包。

　　与XML序列化相比，JSON序列化后产生的数据一般要比XML序列化后数据体积小，所以在Facebook等知名网站中都采用了JSON作为数据交换方式。

　JS操作JSON：

　　在JSON中，有两种结构：对象和数组。

　　1. 一个对象以 “ { ” 开始，“ } ” 结束。每个“名称”后跟一个 “ : ” ；“名称/值对”之间使用 “ , ”（逗号）分隔。名称用引号括起来；值如果是字符串则必须用引号括起来，数值型则不需要。如：
var obj={"name":"darren","age":24,"location":"beijing"}    
　　2. 数组是值（value）的有序集合。一个数组以 “ [ ” 开始， “ ] ” 结束。值之间使用 “ , ” （逗号）分隔。如：
var jsonlist=[{"name":"darren","age":24,"location":"beijing"},{"name":"weidong.nie","age":24,"location":"hunan"}];
　　对这种数组和对象字面量的操作是非常方便且高效的。如果预先知道JSON结构的情况下，使用JSON进行数据传递简直是太美妙了，可以写出很实用美观可读性强的代码。如果你是纯粹的前台开发人员，一定会非常喜欢JSON。

5：高效使用HTML标签和CSS样式

　基本原理：

　　HTML是一门用来描述网页的一种语言，它使用标记标签来描述网页，作为一名合格的前端开发，你有必要去知道其常用标签代表的含义(SEO)和属性(表现形式)。

　　CSS指层叠样式表 (Cascading Style Sheets)，如果说把页面想象成一个人，HTML就是人的骨架，CSS就是人的衣装，一个人的品味从他的衣装就能一目了然。

　　一名专业的前端开发也是一名优秀的重构，因为在页面中经常会有各种不合理的嵌套和重复定义的CSS样式，我不是要你重构页面，只是希望你在碰到这种情况的时候解决这些问题。如这样的HTML：
<table><tr><td>
　　<table><tr><td>
　　　　...
　　</td></tr></table>
</td></tr></table>
或者这样的CSS:
body .box .border ul li p strong span{color:#000}
　　以上都是对HTML和CSS非常糟糕的使用方法。

正确理解：

　　HTML是一门标记语言，使用合理的HTML标签前你必须了解其属性，比如Flow Elements，Metadata Elements ，Phrasing Elements。比较基础的就是得知道块级元素和内联元素、盒模型、SEO方面的知识。

　　CSS是用来渲染页面的，也是存在渲染效率的问题。CSS选择符是从右向左进行匹配的，这里对css选择符按照开销从小到大的顺序梳理一下：　
　　ID选择符 #box
　　类选择符 .box  
　　标签 div
　　伪类和伪元素 a:hover
　　当页面被触发引起回流（reflow）的时候，低效的选择符依然会引发更高的开销，所以请避免低效。

6：使用CDN加速（内容分发网络）

　基本原理：

　　CDN的全称是Content Delivery Network，即内容分发网络。

　　"其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。" - 百度百科。

　　上面几句话有多少能安安心心看完的，所以我还是通过说故事再来介绍一遍吧，顺便补一句，故事出处不明，^_^：

　　古代打仗大家一定都知道，由于古代的交通很不发达，所以当外族进攻的时候往往不能及时的反击，等朝廷征完兵再把兵派往边境的时候那些侵略者却是早已不见了踪影，这个让古代的帝王很是郁闷。后来帝王们学聪明了，都将大量的兵员提前派往边境驻扎，让他们平时屯田，战时当兵，这样的策略起到了很显著的作用。

使用：

Vue3项目使用cdn加速_vue3 cdn-CSDN博客

【vue】配置cdn加速_ant-design-vue cdn-CSDN博客

前端Vue项目实现CDN加速_vue项目利用cnd加速-CSDN博客

7：将CSS和JS放到外部文件中引用，CSS放头，JS放尾

　　JavaScript是浏览器中的霸主，为什么这么说，因为在浏览器在执行JavaScript代码时，不能同时做其它事情，即<script>每次出现都会让页面等待脚本的解析和执行（不论JavaScript是内嵌的还是外链的），JavaScript代码执行完成后，才继续渲染页面。这个也就是JavaScript的阻塞特性。

　　因为这个阻塞的特点，建议把JavaScript代码放到</body>标签以前，这样既能有效的防止JavaScript的阻塞，又能使得页面的HTML结构能更快的释放。

　　HTML规范清楚指出CSS要放包含在页面的<head>区域内，这里就不多解释了。

8：压缩图片和使用图片Sprite技术

　　基本原理:

　　注：其实压缩图片和图片精灵是两个方面的技术，可是既然都是关于图片的优化还是放到一块吧。

　　现在由于工作的细分，专业的前端工程师已经少有机会去切图了，可是关于图片压缩还是得略微了解，一般图片压缩的方式有：

　　1.缩小图片分辨率；

　　2.改变图片格式；

　　3.降低图片保存质量。

　　关于图片精灵(Sprite)技术就和我们工作直接相关，不管是在CSS中的图片还是在HTML结构中的图片都会产生HTTP请求，前端优化的第一条就是减少请求数，最直接有效的方法是使用图片精灵（CSS Sprite）。图片精灵就是把许多图片放到一张大图片里面，通过CSS来显示图片的一部分。

操作：

【CSS】精灵图、字体图标、用户界面样式、常见布局技巧、初始化、CSS三角_css精灵图(王者荣耀案例)-CSDN博客

9：注意控制Cookie大小和污染

基本原理和使用方法：

　　有关Cookie的基础和高级知识可以去看本人写过的一篇文章《JavaScript 操作 Cookie》。

　　因为Cookie是本地的磁盘文件，每次浏览器都会去读取相应的Cookie，所以建议去除不必要的Coockie，使Coockie体积尽量小以减少对用户响应的影响；

　　使用Cookie跨域操作时注意在适应级别的域名上设置coockie以便使子域名不受其影响

　　Cookie是有生命周期的，所以请注意设置合理的过期时间，合理地Expire时间和不要过早去清除coockie，都会改善用户的响应时间。

，以下是一些具体的方法：

限制Cookie数量：尽量合并相似的Cookie，减少不必要的Cookie，以降低总体数量。每个域名下的Cookie数量最好控制在175个以内。
控制Cookie大小：每个Cookie的大小一般不应超过4KB。在设置Cookie时，应确保name和value的字符串长度之和不超过浏览器允许的最大长度。
使用Domain和Path属性：合理设置Cookie的Domain和Path属性，确保只有预期的页面能够访问到这些Cookie，从而避免不同应用或页面之间的Cookie污染。
设置Secure属性：通过设置Secure属性，确保Cookie只在使用HTTPS协议时传输，增加数据传输的安全性。
使用HttpOnly属性：设置HttpOnly属性可以防止客户端脚本访问Cookie，减少跨站脚本攻击（XSS）的风险。
定期清理Cookie：定期清理过期或不再需要的Cookie，以减少Cookie的累积和潜在的安全问题。清除Cookie后，可以防止数据污染，例如避免两个页面因路径相同而导致的Cookie参数相互影响。
替代方案：考虑使用其他存储机制，如localStorage或sessionStorage，它们提供了更大的存储空间（约5MB），并且localStorage中的数据没有过期时间设置，可以在浏览器打开期间一直保持。
监控管理：使用浏览器的开发者工具或专门的软件来监控和管理Cookie的使用情况，及时发现并处理问题。