计算出的图像大小对于100 * 100像素的图像，图像中有10，000个像素。如果每个像素的值都存储在RGBA中，那么就意味着每个像素有4个通道，每个通道有1个字节(8位= 1个字节)，所以图像大小约为39kb(10000 * 1 * 4/1024)。 如何优化图片，减少像素数，减少每个像素能显示的颜色，加载图片，优化不用的图片。 经常使用许多装饰图像。其实这些装饰性的图像完全可以用CSS来代替。 对于手机来说，屏幕宽度这么小，完全没有必要加载原图浪费带宽。 一般图像都是用CDN加载的，所以可以计算出自适应屏幕的宽度，然后请求对应的裁剪图像。 小图片使用base64格式将多个图标文件整合成一张图片(Sprite图片)。选择正确的图片格式:能显示WebP格式的浏览器尽量使用WebP格式。 因为WebP格式有更好的图像数据压缩算法，可以带来更小的图像体积，在肉眼识别的图像质量上没有区别。缺点是PNG与小图像不兼容。其实对于大部分像图标这样的图片，可以用SVG代替照片，用JPEGDNS预解析DNS需要时间。通过预解析可以提前获得域名对应的IP。 & ltlink rel = " DNS-prefetch " href = "//yuchengkai . cn " & gt；网络请求将在滚动事件期间发起，但是我们不希望客户在滚动过程中一直发起请求，而是每隔一段时间发起一次。在这种情况下，我们可以使用节流。 // func是客户调入的需要防抖的函数。// wait是等待时间const throttle = (func，wait = 50)= >；{//上次执行函数的时间let last time = 0返回函数(...args){//当前时间let now = +new Date() //将当前时间与上次执行函数的时间进行比较//如果差值大于设置的等待时间，则执行函数If(now-last time >:wait){ last time = now func . apply(this，args)} } } setInterval(throttle(()= & gt；{console.log(1) }，500)，1)lodash还提供了API https://lodash.com/docs/4.17.15 # throttle _。throttle (func，[wait = 0]，[options={}])防抖(防止重复点击)有一个按钮点击会触发网络请求，但是我们不想每次点击都发起网络请求，但是当客户点击按钮一段时间没有再点击的时候，我们可以使用防抖。 // func是客户调入的需要防抖的函数。// wait为等待时间常数去抖= (func，wait = 50)= >；{//缓存一个定时器id let timer = 0 //这里返回的函数是客户每次实际调用的防抖函数。//如果已经设置了定时器，则清除最后一个定时器。//启动新的计时器。方法returnfunction的延迟执行(...args){ if(timer)clear time out(timer)timer = settimeout(()= >；{func.apply (this，args)}，wait)}} Lodash还提供了API https://lodash.com/docs/4.17.15 _。去抖(func，[wait = 0]，[options = {}])来预载一些不需要立即使用的资源。但如果想尽快拿到，可以用preload。预加载实际上是一个公告获取，它迫使浏览器在不阻塞onload事件的情况下请求资源。您可以使用下面的代码开始预加载 预渲染可以通过预渲染在后端预渲染下载的文件。您可以使用以下代码打开预渲染 懒惰执行懒惰执行意味着延迟一些逻辑直到它被使用。 这项技术可以用来优化第一屏。对于一些耗时的逻辑，不一定要在首屏使用，也就是可以使用懒执行。 懒惰执行需要被唤醒，通常可以通过调用定时器或者定时器事件来唤醒。 延迟加载延迟加载意味着延迟非关键资源的加载。 懒加载的原理是只在自己设定的区域(通常是可见区，但也可以是即将进入可见区的那个)加载需要加载的东西。 对于图片，先将图片标签的src属性设置为位图，将真实图片资源放入一个自己设置的属性中。当你进入自设区域时，你会把自设属性替换成src属性，这样图片就会下载资源，从而实现图片的懒加载。 懒加载不仅可以用于图片，还可以用于其他资源。 比如进入可视区域就开始播放视频等等。 CDN的原理是将机房缓存数据尽可能分布在各个地方，这样即使我们的根服务器远在国外，国内的客户也可以通过国内的机房快速加载资源。 所以我们可以尽量使用CDN加载静态资源，因为浏览器对单个域名的并发请求有上限，所以可以考虑使用多个CDN域名。 而且对于在CDN上加载静态资源，需要注意的是CDN域名要和主站不同，否则每次请求都会带主站的Cookie，会无故消耗流量。 性能测试工具Audits (Chrome已经提供了一个庞大而全面的性能测试工具)image.png点击Audits后，可以看到如下image.png界面。在这个界面中，我们可以选择想要测试的功能，然后单击Run audits。该工具将自动运行，帮助我们测试问题并给出完整的报告。image.png的报告分别对性能、体验和SEO进行了评分，并对每个指标进行了详细的评估。image.png的工具也提供了一些建议来帮助我们提高这个指标的分数。性能工具image.png，每个时间段浏览器解决的是什么，哪个进程花费的时间最多，让我们更详细的了解性能瓶颈。 JS性能优化JS到底是编译型还是解释型语言，其实没有定数。首先，JS需要一个引擎来运行，不管是浏览器还是在Node，这是解释型语言的特点。 在V8发动机下，引入了涡扇编译器，它会在特定情况下对代码进行优化，将代码编译成执行效率更高的机器码。当然这个编译器对于JS来说并不是必须的，只是为了提高代码执行的性能，所以一般来说JS更喜欢解释性语言。 JS代码首先会被解析成通用语法树(AST)，然后由解释器或编译器转换成字节码或机器码。对于函数，应该尽可能避免宣告嵌套函数(类也是函数)，因为这样会造成函数的重复解析。 如果一个函数被重复调用，参数总是传入数字类型，V8会认为这个代码可以编译成机器码。因为你已经固定了类型，所以不需要进行大量的判断逻辑。 如果我们传入的参数的类型改变了，机器码将被反优化为字节码，所以性能会有损失。 所以要想让代码更多的编译成机器码，减少去优化的次数，就要尽量保证传入的类型与const {performance，Performance observer } = require(' perf _ hooks ')函数test(x){ return x+x }//Performance observer只在Node 10中可用//Node在此之前的版本可以直接使用API const OBS = new Performance observer((list，observer)= >:{ console . log(list . get entries())observer . disconnect()})OBS . observe标记(“结束”)性能。Measure ('test '，' start '，' end ')编译器还有个骚操作Lazy-Compile。当一个函数没有被执行时，它会对它进行预解析，直到代码被执行，它不会被解析和编译。 那么有什么办法可以让代码不被预解析呢？(函数test(obj) { return x + x})
