前端优化部分

标准用户体验

性能标准

预加载

• 预加载js
• 预加载数据

常见的SEO优化措施

• 使用CSS图标，背景图片压缩，使用雪碧图，减少HTTP请求数等。
• 结构、表现和行为的分离：尽量不要把CSS和JS 放在同一个页面，采用外链的方式。
• 优化网站分级结构，调整页面布局。在每个内页加面包屑导航，页面内容尽量不要做成flash、视频。
• 集中网站权重，可以使用"rel=nofollown"属性，告诉爬虫无需抓取此页，从而将权重分绐其他的链接
• strong、em标签强调关键字。strong标签在搜索引擎中能够得到高度的重视。
• 利用a标签的title属性。在不影响页面功能的情况下，尽量绐a标签加上title属性，更有利于爬虫抓取信息。
• img应使用"alt"属性加以说明，这个属性可以在图片加载不出来的时候显示在页面上相关的文字信息。
• 精心设置meta标签，如title， keywords，description等，反映网站的定位。内容与关键字要对应，增加关键字的密度。
• 增加网站的404页面，利于提高用户体验，主要防止爬虫丟失。
• 重要内容不要用JS输出，爬虫不识别JS代码里的程序内容。
• 尽量少使用iframe框架，爬虫一般不会读取其中的内容
• 添加外链。选择与网站相关性比较高，整体质量比较好的网站交换友链，巩固稳定关键词排名。
• 填充优质的原创内容。

途径

1、分析： webpack-bundle-anayzer

2、图片部分

3、ssr部分

4、dns预解析，其他资源预请求****

5、请求合并 js/css

6、图片合并

7、数据请求合并

8、分批加载： ****首要内容、次要内容、弹窗浮层内容

9、渐进式渲染： ****先静态图

10、某些串行**=**》并行

六大优化指标

• 加载优化：资源在加载时可做的性能优化
• 执行优化：资源在执行时可做的性能优化
• 渲染优化：资源在渲染时可做的性能优化
• 样式优化：样式在编码时可做的性能优化
• 脚本优化：脚本在编码时可做的性能优化
• V8引擎优化：针对V8引擎特征可做的性能优化

加载优化

执行优化

渲染优化

样式优化

脚本优化

V8引擎优化

针对业务场景优化

图片优化

• 压缩部分

1、ui已知图片的先进行本地压缩

2、未知的远程（酒店图片）的裁剪和质量等

• 图片优先webp格式
• 图片裁剪和质量

特殊状态

• loading状态

目前并没有默认一张图片

• 网速过慢

方案

渐进式和懒加载一起使用

• 自定义配置loading图: 使用裁剪后w_40,h_40,q_70）的1k图再filter
• 对不能裁剪的：内置友好一点的loading图，不是现在是黑白图
• 原图视情况适当裁剪
• 自定义错误图片

难点：无法裁剪的第三方图片 在线压？

• 优化: 模糊图到高清图的一个更流畅动画

在酒店详情页的页面和banner图片查看器中验证暂无问题

  demo

  <div

    v-lazy-container="{ selector: 'img' }"

    class="img_box"

  >

    <img

      width="300"

      height="300"

      class="test-img"

      :data-src="`https://res.klook.com/image/upload/fl_lossy.progressive,q_85/bottom2x_ft5osi.webp`"

      :data-loading="`https://res.klook.com/image/upload/fl_lossy.progressive,w_40,h_40,q_70/bottom2x_ft5osi.webp`"

      :data-error="`https://res.klook.com/image/upload/fl_lossy.progressive,w_40,h_40,q_85/bottom2x_ft5osi.webp`"

    />

  </div>

      

      

 css部分

  <style>

 .test-img {

  transform: all 0.3s;

}



.test-img[lazy=loading] {

  transform: scaleX(1.05) scaleY(1.05);

  filter: blur(2vw);

}

</style>

图片查看器

互动图形部分

首图或其他重要页面的动态图没有

1、Lottie-web

2、pag pag.io/docs/sdk.ht…

动画部分

• web地图弹窗的出现时候
• 多个地方的查看更多和查看更少的动画部分
• 新版房型展开和收起时候的房型图片尺寸变化的动画
• 选中动画

1、例如搜索列表filter部分选中和取消的按钮状态

• pin部分

1、酒店详情页的pin的导航一级位置点击第一个和第二个时候依然不太准

异步弹窗

弹窗卡顿， 是否弹窗内容异步

c端梳理

各个页面的query梳理

页面公共代码优化和梳理

Node中台部分

先用 egg写个基础版本的 node中台

监控

• 性能监控

pref相关api, window.performance

• 前端错误监控

• errorHandler
• warnHandler
• renderError
• errorCaptured
• window.onerror (不仅仅针对 Vue)

• 接口错误监控

对应egg后台接收数据和图型展示

Mock

• 目前使用whistle mock了所有c端接口

代码优化部分

整和所有状态组件和用户反馈（ui规划待完善）

统一标准的基础ui库

• Tailwind

将common-lib发布成单个包实现方案

例如监控包，例如通用util，用来替换lodash

通用功能

---

打包部分

查找可有优化的代码部分

• Tree Shaking

包中删除所有引入但没有被实际用到的代码

• 分析： webpack-bundle-anayzer

• a/b方案优化

暂无

文档

性能查看

性能部分

juejin.cn/post/711611…

juejin.cn/post/698167…