-
666
找到
27
篇与
admin
相关的结果
-
前端性能优化之首屏渲染优化 首屏介绍指用户打开网站开始，到浏览器首屏内容渲染完成的时间。对于用户体验来说，首屏时间是用户对一个网站的重要体验因素。通常一个网站，如果首屏时间在5秒以内是比较优秀的，10秒以内是可以接受的，10秒以上就不可容忍了。超过10秒的首屏时间用户会选择刷新页面或立刻离开。首屏时间计算首屏模块标签标记法统计首屏内加载最慢的图片的时间自定义首屏内容计算法首屏模块标签标记法通常适用于首屏内容不需要通过拉取数据才能生存以及页面不考虑图片等资源加载的情况，我们会在 HTML 文档中对应首屏内容的标签结束位置，使用内联的 JavaScript 代码记录当前时间戳。如下所示：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首屏</title> <script type="text/javascript"> window.pageStartTime = Date.now(); </script> <link rel="stylesheet" href="common.css"> <link rel="stylesheet" href="page.css"> </head> <body> <!-- 首屏可见模块1 --> <div class="module-1"></div> <!-- 首屏可见模块2 --> <div class="module-2"></div> <script type="text/javascript"> window.firstScreen = Date.now(); </script> <!-- 首屏不可见模块3 --> <div class="module-3"></div> <!-- 首屏不可见模块4 --> <div class="module-4"></div> </body> </html>此时首屏时间等于 firstScreen - performance.timing.navigationStart事实上首屏模块标签标记法 在业务中的情况比较少，大多数页面都需要通过接口拉取数据才能完整展示统计首屏内加载最慢的图片的时间通常我们首屏内容加载最慢的就是图片资源，因此我们会把首屏内加载最慢的图片的时间当做首屏的时间。DOM树构建完成后将会去遍历首屏内的所有图片标签，并且监听所有图片标签 onload 事件，最终遍历图片标签的加载时间的最大值，并用这个最大值减去 navigationStart 即可获得近似的首屏时间。此时首屏时间等于 加载最慢的图片的时间点 - performance.timing.navigationStart自定义首屏内容计算法由于统计首屏内图片完成加载的时间比较复杂。因此我们在业务中通常会通过自定义模块内容，来简化计算首屏时间。如下面的做法：忽略图片等资源加载情况，只考虑页面主要 DOM只考虑首屏的主要模块，而不是严格意义首屏线以上的所有内容首屏优化方案项目背景项目较为复杂，模块较多，（当然不比大型电商网站），首页的请求就有8个，并且是精简之后的，稍有不慎，白屏现象就会很严重。体验极差。 首页模块划分分类 2. 轮播图 3. 推荐 4. 收藏数 5. 购买数 6. 案例展示 7. 主内容展示 8. 合作机构展示其中位于首屏的是1、2、3、4、5，对于6在大屏幕上也会展示。请求优化利用prerender-spa-plugin + Skeleton Screen (骨架屏) 对SPA进行预渲染前端的资源动态加载：a. 路由动态加载，最常用的做法，以页面为单位，进行动态加载。b. 组件动态加载(offScreen Component)，对于不在当前视窗的组件，先不加载。c. 图片懒加载(offScreen Image)，同上。值得庆幸的是，越来越多的浏览器支持原生的懒加载，通过给img标签加上loading="lazy"来开启懒加载模式(vue-lazyload)。Promise异步调用，控制首屏请求数量浏览器缓存(localStorage)静态文件缓存方案：这个最常看到。现在流行的方式是文件hash+强缓存的一个方案。比如hash+ cache control: max-age=1年。pwa主要是用了它的离线缓存引入http2.0：http2.0对比http1.1，最主要的提升是传输性能，特别是在接口小而多的时候。开启gzip优化全局WebView（移动spa）部分前端请求改为服务端内网请求.打包优化添加externals，减少vendor.js体积，通过CDN的方式引入tree-shaking：去除没用过的代码UglifyJsPlugin：压缩代码ExtractTextPlugin：提取css出来开启gzip压缩，生成压缩文件静态图片都传到阿里云上了，然后建了一个常量文件，进行管理icon处理渲染优化利用好async和defer这两个属性：如果是独立功能的js文件，可以加入async属性。如果是优先级低且没有依赖的js，我们可以加入defer属性。使用ssr渲染：服务器性能一般都很好，那么可以先在服务器先把vdom计算完成后，再输出给前端，这样可以节约的时间为：计算量/(服务器计算速度 - 客户端计算速度)。第二个是服务器可以把首屏的ajax请求在服务端阶段就完成，这样可以省去和客户端通过tcp传输的时间。拆分接口，页面分批渲染，部分接口数据做localstorage缓存图片优化选择先进的图片格式：使用 JPEG 2000, JPEG XR, and WebP 的图片格式来代替现有的jpeg和png，当页面图片较多时，这点作用非常明显。把部分大容量的图片从BaseLine JPEG切换成Progressive JPEG（理解这两者的差别）也能缩小体积。jpeg 有损压缩，体积小，不支持透明。png 无损压缩，高保真，支持透明。png - 8 2 ^ 8种色彩 256种png - 24 2 ^ 24种色彩 1600w种png - 32 2 ^ 24 ^ 8种 （还有8种透明度色彩通道）颜色支持越多，体积越大svg 矢量图 体积小 不失真，适用于小图标base64 减小http请求，但不宜处理大图片，因为大图片增加页面大小，webpack的url - loader已经支持webP 新兴格式，支持有损和无损压缩，支持透明，体积还特别小，与 PNG 相比，通常提供 3 倍的文件大小，浏览器兼容性低，局限性较大。项目中的支持webp（参照自京东gaea）： 在index.html中判断是否支持webPwindow.supportWebp = false; if (document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0) { document.body.classList.add('webp'); window.supportWebp = true; }css中写两套样式，比如.banner .webp .banner在js中根据window.supportWebp去判断用哪种图片。页面性能测试工具PageSpeed ToolsLighthouseOneAPM -
js防抖和节流 js防抖什么是函数防抖概念：函数防抖（debounce），就是指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。应用场景(1) 用户在输入框中连续输入一串字符后，只会在输入完后去执行最后一次的查询ajax请求，这样可以有效减少请求次数，节约请求资源；(2) window的resize、scroll事件，不断地调整浏览器的窗口大小、或者滚动时会触发对应事件，防抖让其只触发一次；function debounce(fn, delay) { let timer return function(arges) { clearInterval(timer); timer = setTimeout(() => { fn(); }, delay) } }js节流什么是节流规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。应用场景(1)鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；(2)在页面的无限加载场景下，需要用户在滚动页面时，每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据；(3)监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断；function throttle(fn, delay) { let timer; return function() { if (!timer) { timer = setTimeout(() => { timer = null fn() }, delay); } } }和防抖区别是，防抖是间隔时间后最后执行一次，节流是按间隔时间连续执行.时间戳截流——首节流用最新触发的时间减去上一次回调执行的时间，如果大于等于 wait 则会执行回调时间戳节流在第一次触发时会立刻执行。在第一次操作的时候就会执行一遍fn，之后的操作如果时间不超过delay（例如2s）就不会在执行函数，理解为第一次执行，最后一次不执行function throttle(func, wait) { let previous = 0 return function throttled(...args) { const ctx = this const now = Date.now() const remain = wait - (now - previous) if (remain <= 0) { func.apply(ctx, args) previous = now } } } 定时器节流——尾节流指定时间之后执行回调，触发一个定时器之后，即使再次触发节流函数，也不会导致定时器推迟执行（事件循环或者同步阻塞会导致延迟执行，在这里不用考虑）。它不会清除已经开始的定时器，而是等待定时器被执行之后才再开始下一个定时器。理解为第一次不执行，最后一次执行function throttle(func, wait) { let timeout = 0 return function throttled(...args) { const ctx = this // 如果已经是定时器定时阶段，则直接跳过，相当于忽略了触发 // 必须等到定时器到时间之后 if (!timeout) { timeout = setTimeout(() => { func.apply(ctx, args) timeout = null }, wait) } } } 兼顾型节流，就能够在第一次，最后一次都执行代码。function throttle(fn, delay){ let last=0; let timer=null; return function(){ let now=Date.now(); let reming=delay-(now-last); clearTimeout(timer);//不管三七二十一，有定时器都先清除定时器 if(reming<0){ fn.apply(this, arguments); last=now; }else{ timer=setTimeout(()=>{ fn.apply(this,arguments); }, reming); } } }
