事件委托事件委托（也叫事件委托）采用事件冒泡的方式将监听函数绑定到父容器上。当DOM上的事件被触发时，会产生一个事件对象event，其中包含与事件相关的所有信息。使用事件委托的优点：a．减少DOM操作并减少事件处理时间。b.减少内存空间的使用，提高性能。简单示例：让myUl=document.getElementByld("my-ul");myUl.addEventListener('click',function(e){if(e.target.tagName=="LI"){//如果点击了目标名为LI的tagalert(e.target.innerText)}})functionanti-抖动和节流可以看文章：https://blog.csdn.net/qq_3244...webpWebP是一种有损压缩和无损压缩的图片文件格式，源自图片编码格式VP8，支持透明图层和多图像动画。WebP可以在不影响图片清晰度的情况下，对网页图片进行有效压缩，从而节省带宽，提高图片下载速度。在同等质量的情况下，WebP格式图片的体积比JPEG格式图片小40%，比PNG文件小26%。Google提供了一个WebP文件解码器（libvpx）和一个命令行工具（webpconv），用于JEPG、png等图像格式与WebP格式之间的转换。WebP目前支持Chrome内核、Edgel8+、Safari14+、Android的WebView等浏览器，但不支持ie。方法一：前端js判断加载判断浏览器是否支持WebP，先加载一个base64的WebP格式，根据宽高判断是否支持。如果支持，加载默认的WebP格式图片。如果不支持，将img标签中的图片后缀换成普通的jpg或png即可。functioncheckWebp(callback){varimg=newImage();img.onload=function(){varresult=(img.width>0)&&(img.height>0);回调（结果）；};图像。onerror=function(){回调（假）；};img.src='data:image/webp;base64,UklGRiIAAABXRUJQVIA4IBYPKNKwAQCdASoBAAEADsD+JaQAASFRDFGJ';}functionshowlmage(flag){varimgs=Array.from(document.query(img'))imgs.forEach(函数(i){varsrc=i.attributes['data-src'].valueif(flag){i.src=src}else{src=src.replace(/\.webp$/,'.jpg')}})}checkWebp(showlmage)方法二：如果前端图片标签支持WebP格式，则加载a.webp，否则加载a.jpg。方法三：服务器响应时支持不同格式webp图片的浏览器向服务器发送请求，会在请求头Accept中包含image/webp，然后服务器会根据是否包含该头信息来决定返回webp还是其他格式的图片。很多云服务器和CDN都有这种WebP适配功能。seo优化seo（SearchEngineOptimization）即搜索引擎优化，是通过总结搜索引擎的运行规律，对网站进行合理的优化，以提高网站在搜索引擎中的排名。搜索引擎利用爬虫（蜘蛛）程序，按照一定的规则抓取并收录您的网页，经过分析处理后，根据关键词进行索引，为用户提供快速的网页检索服务。SEO就是挖掘用户的搜索习惯，设置用户搜索的关键词，优化网站定位和布局，填充优质的网站内容，使网页符合爬虫的胃口，获得搜索引擎的信任，对网站进行无排名排名。损害用户体验。靠在搜索引擎的前列，从而增加网站流量。怎么办：提高页面加载速度。使用CSS图标，压缩背景图片，使用Sprite图片，减少HTTP请求数等。结构、表现和行为分离。尽量不要把CSS和js放在同一个页面，使用外链。优化网站层次结构，调整页面布局。在每个内页添加面包屑导航，页面内容尽量不要做成flash或视频。为了集中网站的权重，可以使用“rel=nofollow”属性告诉爬虫不要爬这个页面，从而将权重分配给其他链接。strong和em标签强调关键词。强标签在搜索引擎中可以被高度重视。使用a标签的title属性。在不影响页面功能的情况下，尽量在a标签中加入title属性，更有利于爬虫抓取信息。img需要描述alt属性，当图片无法加载时，可以在页面上显示相关的文字信息。H标签的使用，具有自身的权重，被放置在最重要的标题之上。精心设置元标签，如标题、关键词、描述等，以体现网站的定位。内容和关键词要对应，增加关键词密度。增加网站404页面，有助于提升用户体验，主要是防止爬虫丢失。不要用JS输出重要内容，因为爬虫无法识别JS代码中的程序内容。尽量少用iframe框架，爬虫一般不会读取里面的内容。添加外部链接。选择与网站相关性比较高、综合质量较好的网站交换友链，巩固和稳定关键词排名。用高质量的原创内容填充它。base64编码Base64是一种使用64个可打印字符（“A-Z、a-z、0-9、+、/”、'='符号为65）对任意数据进行编码的编码算法。通常用于将二进制数据（如图片）转换成可打印的字符，方便存储和HTTP传输。Base64不是真正的加密算法，任何人都可以编码和解码。可以使用base64在线编解码工具。前端应用：1.html直接嵌入Base64编码的图片，避免不必要的外部资源请求。.bg{background:url(data:image/png;base64,iVBORwOKGgoAAAANSUhEUgAAADIA...)}（颜色不适用对于丰富的大图，编码后的字符串比较大，增加了html/css的大小，影响页面加载速度）2.canvas的toDataURL将canvas内容转成base64编码格式再传给后端，这解码并保存它。3、FileReader的readAsDataURL将上传的文件转换成base64格式提交给服务器，比如用户头像。FontIcon字体图标(iconfont)将svg矢量图标制作成字体，使用字体格式在网页中显示纯色图标。和font的用法一样，都是通过css中的@font-face定义的，通过color、font-size等可以改变图标的??颜色、大小等样式。uni-app使用字体图标先https://blog.csdn.net/qq_4501...然后https://blog.csdn.net/qq_4501...普通项目使用字体图标https://blog.csdn。net/qq_4838...lazy-loadlazy-load（延迟加载）是按需加载图片，等浏览器当前窗口出现图片后再加载，以免一次加载完所有内容，减少首屏请求数，缓解浏览器和服务器压力，节省流量。实现原理：如果在src中填写图片地址，浏览器就可以发起加载图片的请求。要实现懒加载，可以定义一个虚拟的src属性，即data-src，用来存放原图的地址，属性src填充一张低质量的空白占位图片。页面滚动时，遍历图片，判断是否在可见区域，如果在，则将data-src中的真实地址放入src中，实现按需加载。此外，页面滚动是一个频繁触发的事件，可以通过防抖或节流功能进行优化。gzip压缩gzip是一种数据压缩格式，是HTTP协议上的GZIP编码。一般用于服务端压缩静态文件传输给客户端，可以压缩到原来大小的40%，大大节省网络带宽，提高访问速度。启用gzip需要客户端和服务端的共同支持，现在主流的浏览器和常见的服务端都支持gzip。gzip的工作原理如果浏览器支持gzip，那么会在请求头中设置属性ttaccept-encoding:gzip，表示浏览器支持gzip压缩。服务端配置开启gzip压缩，收到请求后解析请求头，判断浏览器是否支持gzip，如果支持则压缩请求的资源并返回gzip文件作为响应给客户端。并在http响应头中设置content-encoding:gzip，表格上使用gzip压缩方式。浏览器收到响应后判断内容是否被压缩，如果是则解压，然后显示页面内容。cdnCDN（ContentDeliveryNetwork，内容分发网络），是一组分布在不同地理位置的WEB服务器（缓存服务器），用于有效地向用户分发内容。主要原理是将源站的静态资源（图片视频、html/css/jss安装包apk等）缓存在位于不同区域的CDN节点服务器上，通常是终端网络提供商的机房。当用户访问网站时，会从离用户最近的CDN服务器上获取，从而避免网络拥堵，提高访问速度，缓解源站压力。具体过程用户输入要访问的url，浏览器通过域名解析（本地DNS系统和CDN专用DNS服务器）获取CDN负载均衡设备的IP地址。浏览器发送对CDN负载均衡器的访问。CDN负载均衡器根据用户的IP地址和URL判断距离，是否有内容，负载，然后返回用户所在区域最好的CDN缓存服务器IP。用户向CDN缓存服务器发起请求，服务器响应用户请求。如果缓存服务器上没有用户想要的内容，缓存服务器就会向源服务器请求。缓存服务器从源服务器获取内容后，一方面缓存在本地，另一方面将获取的数据返回给客户端。light-hourLighthouse是一款由谷歌开源的自动化网站性能评估工具。主要功能是检测网站的性能，分析网络应用程序和网页，收集现代性能指标并给出最佳实践建议。UsingLighthouse已经集成到chrome浏览器开发者工具中，位于'Audits'面板下，chrome高版本直接显示lighthouse项。单击“生成报告”以生成并显示评估结果。结果包括性能、可访问性、最佳实践、搜索引擎优化(SEO)和PWA（渐进式Web应用程序）。部分。或者在项目中安装全局包lighthouse，需要Node8及以上版本。执行lighthousehttp://www.test.com会默认在当前目录下生成HTML测试报告。TreeShakingTreeShaking的意思是tree-shakingoptimization，意思是将所有引入但未实际使用的代码（也称为死代码DeadCode）从包中删除，以减少打包体积。形象的比喻为抖落“废叶”，这是一种DCE（deadcodeelimination）代码清除技术。TreeShaking的由来：当javascript应用程序的体积越来越大时，一种减小体积的方法是将它们拆分成不同的可重用模块，例如CommonJs、A??MD和CMD模块化解决方案。随着模块化的发展，开发者也希望进一步去除冗余代码。ES6模块的出现使之成为可能。打包工具Rollup团队率先提出并实现了TreeShaking。Webpack2.0版本开始对接，目前很多打包工具都支持TreeShaking。TreeShaking原理：ES6模块的静态化和静态分析是TreeShaking的基础。静态分析是指不执行代码，在编译时按字面意思分析代码，正确判断加载了哪些模块。然后分析程序流程，确定哪些变量没有被使用和引用，然后删除相应的代码。早些时候，CommonJS动态需要一个模块，它可以嵌套在函数和if语句中。代码执行后才知道是否需要这个模块，翻译阶段很难通过静态分析进行优化。ES6模块使用静态导入语法import，只能作为模块的顶层语句出现。这种静态在编译阶段就可以高度确定模块之间的依赖关系，不依赖于代码的运行结果，因此可以进行可靠的静态分析。在webpack中，webpack通过静态分析标记出模块的哪些导出值没有被使用，然后使用插件uglify（代码压缩优化工具）清理删除这些未使用的方法。在Webpack中使用TreeShaking：使用ES6模块语法，TreeShaking只支持import，不支持require。新的正式版webpack4，通过在package.json中指定sideEffects属性，给编译器提供提示，指出项目中哪些文件是“纯（pureES6modules），没有副作用”，这样你就可以安全地删除文件中未使用的部分。生产模式配置选项。配置optimization.used导出为true以启动标记功能（默认）。Preloading预加载就是提前在本地请求并加载所有需要的资源，这样以后需要的时候可以直接从缓存中取资源。如果请求的内容太大，没有预加载的页面会长时间空白。使用预加载可以减少等待时间，获得更好的体验。前端容灾是指后端接口由于各种原因（如接口错误、依赖库问题、流量高峰、断电等）无法提供数据，前端仍能保证正常页面信息的展示。主要方式是预先将数据存储在可靠的地方，并在需要时高效便捷地获取数据展示。通常：Localstorage在Localstorage中存储数据，通常以接口路径为key，返回数据为value。如果请求接口失败，则读取Local存储，取出之前的数据显示，并提示错误信息缓冲时间。除了Localstorage，CDN容灾还会将一份静态数据备份到CDN。当接口request和Localstorage中没有数据时，从CDN获取备份数据。ServiceWorker可以使用ServiceWorker离线存储来保存一个html页面。
