关于javascript:前端性能优化

39次阅读

共计 5822 个字符，预计需要花费 15 分钟才能阅读完成。

事件委托

事件委托（也叫事件代理）利用了事件冒泡，把监听函数绑定在父容器上。在触发 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 页面。

正文完
javascript
发表至： javascript
2022-04-24
 0
JS每日一题:new Vue()中发生了什么？
关于javascript:前端随笔记跳外链无法返回链接错乱
关于javascript:2021爱智先行者-自动化房屋能源控制核心
关于javascript:凹凸技术揭秘如何服务-toG-项目数字人民币项目前端总结