事件委托

事件委托（也叫事件代理）利用了事件冒泡，把监听函数绑定在父容器上。在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中蕴含着所有与事件无关的信息。

应用事件委托的长处：

a.缩小DOM操作，使事件处理工夫缩小。
b.缩小内存空间的应用，晋升性能。

简略例子：

let myUl = document. getElementByld("my-ul"); myUl.addEventListener('click',function(e){     if(e.target.tagName == "LI"){        //如果点击的指标的标签名为LI        alert(e.target.innerText)    }})

函数防抖与节流

可见文章：https://blog.csdn.net/qq_3244...

webp

WebP是Google推出的一种同时提供有损压缩与无损压缩的图片文件格式，派生自图像编码格局VP8,反对透明图层和多图片动图。

WebP可对网页图片无效进行压缩而不影响图片清晰度，从而节俭带宽，进步图片下载速度。在品质雷同的状况下，WebP格局图像的体积要比JPEG格局图像小40%，比PNG文件小26%。

Google提供了 WebP文件解码器(libvpx)和 命令行工具(webpconv)，用于JEPG、png等格局图片与WebP格局之间的转换。WebP目前反对Chrome内核、Edgel8+、Safari 14+、Android的WebView等
浏览器，不反对ie。

办法一：前端js判断加载

对浏览器进行判断是否反对WebP，先加载一张base64的WebP格局，依据宽高来判断是否反对。如果反对则加载默认的WebP格局的图片，如果不反对则把img标签里的图片后缀换成惯例的jpg或png即可。

function checkWebp(callback) {     var img = new Image();     img.onload = function () {         var result = (img.width>0) && (img.height>0);         callback(result);    };    img.onerror = function () {         callback(false);    };    img.src = 'data:image/webp;base64,UklGRiIAAABXRUJQVIA4IBYPKNKwAQCdASoBAAEADsD+JaQAASFRDFGJ';}function showlmage(flag){     var imgs = Array.from(document.querySelectorAll('img'))     imgs.forEach(function(i){                 var src = i.attributes['data-src'].value        if(flag){            i.src = src        }else{            src = src.replace(/\.webp$/,'.jpg')        }    })}checkWebp(showlmage)

办法二：前端picture标签

如果浏览器反对WebP格局，就会加载 a.webp，否则会加载a.jpg。

<picture class="pic">    <source type="image/webp" srcset="a.webp">     <img class="img" src="a.jpg"></picture>

办法三：服务端响应不同格局

反对webp图片的浏览器在向服务器发送申请时，会在申请头Accept中带上image/webp，而后服务器依据是否含有这个头信息来决定返回webp或其它格局图片。很多云服务器和CDN带有这种WebP自适应性能。

seo优化

seo(Search Engine Optimization)即搜索引擎优化，就是通过总结搜索引擎的运作规定，对网站进行正当的优化以进步网站在搜索引擎的排名。 搜索引擎通过爬虫(蜘蛛)程序按肯定规定抓取收录你的网页，剖析解决后按关键字建设索引，以便为用户提供疾速检索网页的服务。seo就是通过开掘用户搜寻习惯，设 定用户所搜寻的关键词，优化网站定位和布局，填充优质网站内容，使网页合乎爬虫胃口，取得搜索引擎信赖，在不侵害用户体验的状况下使网站排名靠在搜索引擎前列，从而进步网站访问量。

做法：

  1. 进步页面加载速度。应用CSS图标，背景图片压缩，应用雪碧图，缩小HTTP申请数等。
  2. 构造、体现和行为的拆散。尽量不要把CSS和js放在同一个页面，采纳外链的形式。
  3. 优化网站分级构造，调整页面布局。在每个内页加面包屑导航，页面内容尽量不要做成flash、视频。
  4. 集中网站杈重，能够应用"rel=nofollown"属性，通知爬虫无需抓取此页，从而将权重分绐其余的链接。
  5. strong、em标签强调关键字。strong标签在搜索引擎中可能失去高度的器重。
  6. 利用a标签的title属性。在不影响页面性能的状况下，尽量绐a标签加上title属性，更有利于爬虫抓取信息。
  7. img应应用"alt"属性加以阐明，这个属性能够在图片加载不进去的时候显示在页面上相干的文字信息。
  8. H标签的应用，自带权重，放在该最重要的题目下面。
  9. 精心设置meta标签，如title， keywords，description等，反映网站的定位。内容与关键字要对应，减少关键字的密度。
  10. 减少网站的404页面，利于进步用户体验，次要避免爬虫丟失。
  11. 重要内容不要用JS输入，爬虫不辨认JS代码里的程序内容。
  12. 尽量少应用iframe框架，爬虫个别不会读取其中的内容。
  13. 增加外链。抉择与网站相关性比拟高，整体品质比拟好的网站替换友链，坚固稳固关键词排名。
  14. 填充优质的原创内容。

base64编码

Base64是一种编码算法，应用64个可打印字符（"A-Z，a-z，0-9， +，/"，'='号就是65个）来对任意数据进行编码。

通常用于将二进制数据（如图片）转化为可打印字符，不便存储和http传输。

Base64不是真正的加密算法，能够被任何人编码解码。能够应用base64在线编码解码工具。

前端利用：

1.html间接嵌入Base64编码图片，防止不必要的内部资源申请。

<img alt="logo" src="data:image/png;base64,iVBORwOKGgoAAAANSUhEUgAAADIA..." />
.bg{    background:url（data:image/png;base64,iVBORwOKGgoAAAANSUhEUgAAADIA...）}
(不实用色调丰盛的大图片，其编码后字符串较大，减少html/css体积，影响页面加载速度)

2.canvas的toDataURL

将canvas画布内容转为base64编码格局后传递到后端，后端base64解码保留。

3.FileReader的readAsDataURL

将上传的文件转为base64格局提交到服务器，如用户头像。

字体图标

字体图标（ iconfont） 将svg矢量图标作成字体，采纳字体格局来显示网页中的的纯色图标。同字体应用一样，在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-load

lazy-load（懒加载）就是按需加载图片，等图片呈现在浏览器以后视窗内再去加载，这样不必一次性加载全部内容，缩小首屏时申请数，缓解浏览器和服务器压力，节俭流量。

实现原理：
<img src=""> 若在src中填入图片地址，浏览器就能够发动申请，加载一张图片。要实现懒加载，能够定义一个虚构src属性即data-src寄存原图地址，而属性src填写
一张低质量的空白占位图。当页面滚动时，遍历图片判断是否在可视区域内，如果在则将data-src中实在地址放到src中，实现按需加载。另外页面滚动是一个触发频繁的事件，能够利用防抖或节流函数优化一下。

gzip压缩

gzip是一种数据压缩格局，是HTTP协定上的GZIP编码。

个别用于服务器将动态文件压缩后传输到客户端，可压缩到原大小的4 0% ,大大节
省网络带宽，进步访问速度。

启 用g z i p需 要 客 户 端 和 服 务 端 的 共 同 反对，当初支流浏览器和常见服务器都是反对gzip的。

gzip工作原理

  1. 浏览器若反对g zip ,申请头中会设置属ttaccept-encoding： gzip来标识浏览器支
    持gzip压缩。
  2. 服务端配置启用gzip压缩，收到申请后解析申请头，判断浏览器是否反对gzip ,
    若反对，响应时对申请的资源进行压缩并返回gzip文件给客户端。并在http响应头
    中设置content-encoding:gzip,表可甘萃端应用了 gzip的压缩形式。
  3. 浏 览 器 接 收 响 应 后 判 断 内 容 是 否 被 压缩，如是则解压缩，而后显示页面内容。

cdn

CDN （ Content Delivery Network,内容散发网络），是一组散布在多个不同天文
地位的WEB服务器（缓存服务器），用于无效的向用户散发内容。

次要原理

就是将源站的动态资源（图片视频、html/css/jss安装包apk等）缓存到位于不同区域的CDN节点服务器上，通常是终端网络提供商的机房，当用户拜访网站时，会去离用户间隔最近的CDN服务器上获取，从而防止了网络拥塞，进步了访问速度，缓解了源站压力。

具体流程

  1. 用 户 输 入 要 访 问 的u r l ,浏 览 器 通 过 域名解析（本地DNS零碎和CDN专用DNS服务器）失去CDN负载平衡设施的IP地址。
  2. 浏览器向CDN负载平衡收回拜访醺黑CDN负载平衡依据用户IP地址及URL,判断间隔、有无内容、负载状况后返回用户所属区域的最佳cdn缓存服务器IP。
  3. 用户向cdn缓存服务器发动申请，服务器响应用户申请。
  4. 如果这台缓存服务器上没有用户想要的内容，再由缓存服务器向源服务器申请。
  5. 缓存服务器从源服务器失去内容后，一方面在本地进行缓存，另一方面将获取的数据返回给客户端。

light-hourse

Lighthouse是Google开源的一个自动化的网站性能测评工具。次要性能是检测网站的性能，剖析网络应用和网页，收集古代性能指标并给出最佳实际的倡议。

应用

  1. Lighthouse已集成到chrome浏览器开发者工具中，位于'Audits'面板下，高版本
    chrome 间接显示 lighthouse 项。点击'Generate report'后生成并展现测评后果，后果蕴含了性能(Performance),拜访无障碍(Accessibility),最佳实际(Best Practice),搜索引擎优化(SEO),PWA(Progressive Web App)五个局部。
  2. 或在我的项目中装置全局包lighthouse,须要Node 8及以上版本。执行
    lighthouse http://www.test.com 默认会在当前目录下生成一个HTM L格测评报告。

Tree Shaking

TreeShaking即掩树优化意思是从包中删除所有引入但没有被理论用到的代码 （ 也
称为死代码Dead Code ） 来缩减打包后的体积。形象比喻为将‘废树叶'摇下来，是DCE（ dead code elimination） 代码革除技术的一种。

Tree Shaking由来：

当javascript利用体积越来越大时，一个无利 于 减 少 体 积 的 办 法 是 拆 分 为 不 同 的 可 重用模块，如CommonJs、AMD、CMD模块化计划。
随着模块化的倒退 ，开发人员还想进一步的移除多余的代码 ， ES6模块的呈现使 其成为可 能 ， 打包工具Rollup团队率先提出并实现了Tree Shaking, Webpack 2.0版开始接入 ， 至今不少打包工具都反对TreeShaking。

Tree Shaking 原理：

ES6模块动态化和动态剖析是Tree shaking的根底。
动态剖析就是不执行代码，在编译时从字面量上对代码进行剖析从而正确判断到底加载了哪些模块 。 再分析程序流 ， 判断哪些变量未被应用援用，进而删除对应代码。

新近CommonJS是动静require一个模块 ， 能够嵌套在函数和if语句中 ,只有代码执行后才晓得是否须要该模块 ,很难在译阶段通过动态剖析去做优化。

ES6模块应用动态导入语法import , 且只能作为模块顶层的语句呈现，这种动态化
在编译阶段就能够高度确定模块间的依赖关系 ， 不依赖代码的运行后果 ， 所以能够进行牢靠的动态剖析。

在webpa ck中由webpa ck通过动态剖析标记出模块导出值中哪些没有被用过 ， 然 后利用插件uglify（代码压缩优化工具）进行革除，删掉这些没被用到的办法。

在Webpack中应用Tree Shaking：

  1. 应用ES6模块语法，Tree Shaking只反对import,不反对require。
  2. 新 的webpack 4正式版 ， 通过指定package.json 中的 si de Effects 属性，向compiler提供提醒 ， 表明我的项目中的哪些文件 是“ pure（纯的ES6模块 ） ， 没有副 作用的 ” ， 由此能够平安地删除文件中未应用的局部。
  3. 生产模式配置选项。配置optimization.used Exports 为 true ,启动标记性能（默认有）。

预加载

预加载就是将所有所需的资源提前申请加载到本地，这样前面在须要用到时就间接
从缓存取资源。

如果申请的内容过于宏大，没有应用预加载的页面就会长工夫的展示为一片空白，应用预加载则能够缩小期待的工夫，领有更好的体验。

前端容灾

指因为各种起因后端接口无奈提供数据（如接口出错，依赖库呈现问题，流量顶峰挂了，断电断网等），前端仍然能保障页面信息的失常展现。

次要形式是提前将数据存储在牢靠的中央，在须要时可能高效便捷地获取到数据展现。通常有：

Localstorage

将数据存到Localstorage,通常接口门路作为key,返回数据作为value。若申请接口失败, 就读取L o c a l st orage ,将之前的数据取出来展现，并提醒错误信息，以缓冲工夫。

CDN容灾

除了 Localstorage同时也备份一份静态数据到CDN,在接口申请和Localstorage都没 有数据的状况下，从CDN获取备份数据。

Service Worker

能够利用Service Worker离线存储保个html页面。