前端seo优化怎么做，前端开发注意的6个性能优化？-营销圈

前端seo优化怎么做，前端开发注意的6个性能优化？

用户投稿 • 2022年5月30日 pm2:44 • 未分类 • 阅读 447

1.页面优化
DNS解析时间： domainLookupEnd – domainLookupStart
TCP建立连接时间： connectEnd – connectStart
白屏时间： responseStart – navigationStart
dom渲染完成时间： domContentLoadedEventEnd – navigationStart
页面onload时间： loadEventEnd – navigationStart
2.编码优化和数据读取
通过作用域链 / 原型链读取变量或方法时，需要更多的耗时，且越长越慢；
对象嵌套越深，读取值也越慢；
最佳实践:
尽量在局部作用域中进行变量缓存；
避免嵌套过深的数据结构，数据扁平化有利于数据的读取和维护；
循环
代码的性能问题会再循环中被指数倍放大
最佳实践:
尽可能减少循环次数；
减少遍历的数据量；
完成目的后马上结束循环；
避免在循环中执行大量的运算，避免重复计算，相同的执行结果应该使用缓存；
js 中使用倒序循环会略微提升性能；
尽量避免使用 for-in 循环，因为它会枚举原型对象，耗时大于普通循环
减少 cookie 体积:
减少访问 dom 的次数，如需多次，将 dom 缓存于变量中；
减少重绘与回流
多次操作合并为一次；
减少对计算属性的访问；
例如 offsetTop， getComputedStyle 等
因为浏览器需要获取最新准确的值，因此必须立即进行重排，这样会破坏了浏览器的队列整合，尽量将值进行缓存使用；
大量操作时，可将 dom 脱离文档流或者隐藏，待操作完成后再重新恢复；
使用DocumentFragment / cloneNode / replaceChild进行操作；
使用事件委托，避免大量的事件绑定；
3.css 优化:
层级扁平，避免过于多层级的选择器嵌套；
层级扁平，避免过于多层级的选择器嵌套；
特定的选择器好过一层一层查找: .xxx-child-text{} 优于 .xxx .child .text{}
减少使用通配符与属性选择器；
减少不必要的多余属性；
使用动画属性实现动画，动画时脱离文档流，开启硬件加速，优先使用 css 动画；
使用 <link> 替代原生 @import；

4.html 优化
减少 dom 数量，避免不必要的节点或嵌套；
避免<img src=”” />空标签，能减少服务器压力，因为 src 为空时，浏览器仍然会发起请求
图片提前指定宽高或者脱离文档流，能有效减少因图片加载导致的页面回流；
语义化标签有利于 SEO 与浏览器的解析时间；
减少使用 table 进行布局，避免使用<br />与<hr />;
页面基础优化
引入位置: css 文件<head>中引入， js 文件<body>底部引入
减少请求 (http 1.0 – 1.1)，合并请求，正确设置 http 缓存
小图片合成雪碧图，低于 5K 的图片可以转换成 base64 内嵌；
合适场景下，使用 iconfont 或者 svg

5.使用缓存:
浏览器缓存: 通过设置请求的过期时间，合理运用浏览器缓存
CDN缓存: 静态文件合理使用 CDN 缓存技术
打包后的图片 / js / css 等资源上传到 CDN 上，文件带上 hash 值；
服务器缓存: 将不变的数据、页面缓存到内存或远程存储(redis等) 上；
数据缓存: 通过各种存储将不常变的数据进行缓存，缩短数据的获取时间；

6.首屏渲染优化
css / js 分割，使首屏依赖的文件体积最小，内联首屏关键 css / js
非关键性的文件尽可能的异步加载和懒加载，避免阻塞首页渲染；
使用dns-prefetch / preconnect / prefetch / preload等浏览器提供的资源提示，加快文件传输；
重要的元素优先渲染；视窗内的元素优先渲染；
服务端渲染(SSR)
优化用户感知
利用一些动画过渡效果，能有效减少用户对卡顿的感知；
尽可能利用骨架屏(Placeholder) / Loading 等减少用户对白屏的感知；
动画帧数尽量保证在 30帧以上，低帧数、卡顿的动画宁愿不要；
js 执行时间避免超过 100ms，超过的话就需要做

好了，这篇文章的内容营销圈就和大家分享到这里，如果大家对网络推广引流和网络创业项目感兴趣，可以添加微信：Sum8338 备注：营销圈引流学习，我拉你进直播课程学习群，每周135晚上都是有实战的推广引流技术和网络创业项目课程分享，当然是免费学！

前端seo优化怎么做，前端开发注意的6个性能优化？

相关推荐