f9yx0du 发表于 2024-10-10 05:04:00

谈谈前端性能优化


    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;">#头条创作挑战赛#</a></p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/26ed91fdb46c455eac7055bd88545a7e~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1728744241&amp;x-signature=p4bNssjfBG5sjpaA5XYzBHZUNrQ%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">本文同步<span style="color: black;">自己</span>掘金平台的<span style="color: black;">文案</span>：</p>https://juejin.cn/post/7090351370691149855

    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">做为</span>一个前端<span style="color: black;">研发</span>者，前端性能优化问题是无可避免的。<span style="color: black;">例如</span>，你<span style="color: black;">运用</span> vue 去<span style="color: black;">研发</span>一个运营活动的项目，首屏加载缓慢，你应该怎么办呢？又<span style="color: black;">例如</span>，你<span style="color: black;">研发</span>官网，你<span style="color: black;">选取</span> ssr 还是 spa 呢？</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">本文，<span style="color: black;">咱们</span>来聊聊遇到前端加载缓慢，应该怎么做～</p>
    <h1 style="color: black; text-align: left; margin-bottom: 10px;">框架生命周期<span style="color: black;">熟练</span><span style="color: black;">运用</span></h1>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">此刻</span>前端框架<span style="color: black;">已经是</span>三足鼎立 -- Angular，React 和 Vue。<span style="color: black;">咱们</span>在<span style="color: black;">运用</span>它们<span style="color: black;">研发</span>的过程中，应该<span style="color: black;">认识</span>相应框架的生命周期，而不是似懂非懂讲究用。<span style="color: black;">咱们</span>以 Angular 前端框架为例：</p>编程中，触发更改内容应该在 ngOnChanges 中调用，而不是在 ngDoCheck 中调用订阅操作，应该在组件销毁的时候 ngOnDestroy 取消订阅<h1 style="color: black; text-align: left; margin-bottom: 10px;">接口处理</h1>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">接口方面，<span style="color: black;">能够</span><span style="color: black;">思虑</span>下面的处理<span style="color: black;">方法</span>：</p>避免同个接口多次发起请求避免不必要的接口请求需要缓存的数据，进行缓存，不需要发起二次请求列表接口采用分页处理，避免一次性加载数据，从而<span style="color: black;">导致</span>系统卡顿接口开启 Gzip 压缩接口可按需配置 Etag <span style="color: black;">做为</span>缓存标志浏览器并非请求数量协调：同一时间针对同一域名下的请求又<span style="color: black;">必定</span>数量限制。超过数量限制数目的请求会被阻塞。<span style="color: black;">恰当</span><span style="color: black;">运用</span><span style="color: black;">区别</span>的域名获取请求减少请求数，<span style="color: black;">例如</span><span style="color: black;">运用</span>雪碧图，合并 CSS / JavaScript 文件<h1 style="color: black; text-align: left; margin-bottom: 10px;">静态资源处理</h1>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">所有的文件都有可能是静态资源，<span style="color: black;">例如</span> Json， Image 等。<span style="color: black;">咱们</span><span style="color: black;">能够</span><span style="color: black;">思虑</span>以下处理：</p><span style="color: black;">运用</span> CDN，避免资源放在项目的服务器上，<span style="color: black;">尤其</span>是<span style="color: black;">拜访</span>量大的站点，会容易奔溃<span style="color: black;">或</span><span style="color: black;">导致</span>资源加载缓慢，用户体验不良资源压缩 2.1 <span style="color: black;">照片</span>资源<span style="color: black;">能够</span><span style="color: black;">运用</span> TinyPNG 2.2 视频/音频 <span style="color: black;">能够</span><span style="color: black;">经过</span> FFmpeg 处理 2.3 Html，CSS 和 JavaScript 等资源，<span style="color: black;">能够</span><span style="color: black;">经过</span> Webpack 处理，现代前端框架都会集成，你只需要运行 npm run build <span style="color: black;">就可</span>静态资源<span style="color: black;">是不是</span>有其他的替代<span style="color: black;">方法</span>呢？<span style="color: black;">例如</span>用 CSS 实现三角形总比引入一个三角形的图案要强多了<h1 style="color: black; text-align: left; margin-bottom: 10px;">DOM 处理</h1>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">前端<span style="color: black;">研发</span>，<span style="color: black;">便是</span>以 DOM 为基石进行处理的一门艺术。</p>减少重绘和重排，<span style="color: black;">她们</span>会<span style="color: black;">引起</span>页面重新渲染DOM 节点元素需要<strong style="color: blue;">语义化</strong>，<span style="color: black;">不可</span>都一股脑的<span style="color: black;">运用</span> DIV 元素，<span style="color: black;">这般</span><span style="color: black;">有害</span>于 SEO；起码在对外的系统上要注重语义化的处理老生常谈的点了：样式需要放在 &lt;head&gt; 标签中，脚本需要放在 &lt;/body&gt; 之前引用。样式靠后会使得骨架 HTML 看起来辣眼睛；脚本提前加载会<span style="color: black;">导致</span>页面阻塞。避免 Img 节点元素的 alt 指向为空，为空<span style="color: black;">有害</span>于 SEO<h1 style="color: black; text-align: left; margin-bottom: 10px;">工具处理</h1><strong style="color: blue;"><span style="color: black;">运用</span> Lighthouse 灯塔</strong>：它<span style="color: black;">能够</span><span style="color: black;">经过</span><strong style="color: blue;">谷歌浏览器</strong>去安装<span style="color: black;">运用</span>；<span style="color: black;">亦</span><span style="color: black;">能够</span><span style="color: black;">经过</span>本地全局安装，<span style="color: black;">经过</span>运行命令行去审查指定的页面。<strong style="color: blue;"><span style="color: black;">运用</span> Perfermance 面板</strong>：谷歌浏览器中的 Perfermance 面板<span style="color: black;">能够</span>用于分析站点运行时性能；<span style="color: black;">意见</span>以隐身模式开启，排除其他扩展对性能<span style="color: black;">测绘</span>的影响。Safari 浏览器对应时间轴面板，看个人<span style="color: black;">兴趣</span><span style="color: black;">选取</span>调试。其他浏览器对应的性能分析面板自查。<strong style="color: blue;"><span style="color: black;">运用</span> Perfermance 接口</strong>：<span style="color: black;">经过</span> W3C <span style="color: black;">供给</span>的 Perfermance 接口，监听页面的<span style="color: black;">关联</span>信息。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">不<span style="color: black;">晓得</span>读者平常会怎么进行页面的性能分析和<span style="color: black;">处理</span>呢？<span style="color: black;">能够</span>留言交流交流～</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">【完】✅</p>




4zhvml8 发表于 2024-10-17 21:47:48

你的话语如春风拂面，温暖了我的心房，真的很感谢。
页: [1]
查看完整版本: 谈谈前端性能优化