医程通前端性能优化
做减法
- 去掉对用户影响较少同时耗时较多的请求（如：选择医院定位功能，可移至用户点击地方筛选的时候调用）
- 删除冗余代码
删除冗余代码
一些无用的代码及时去除
图片懒加载与压缩
- 图片延迟加载（适合于多图片加载页面）
- 响应式图片（根据屏幕大小自动加载合适分辨率图片）
限制图片上传
⚠️需求 后续迭代需要限制医院logo的图片大小，目前人手不足可手动更换，可以将图片更换为15KB以内
⚠️注意 ： 目前医院头像后台上传没有限制，合适的尺寸为 分辨率126*126，jpg / png格式
实现懒加载
- 预加载默认图片
<!-- 预加载一个loading动画 -->
<img src="loading.gif" data-src="src/image"
2
- 监听页面滚动，滚动到视窗后，将
data-src替换为真实的src
function landlord(event) {
for (var i = n; i < imgNum; i++) {
if (img.eq(i).offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())) {
if (img.eq(i).attr("src").indexOf('loading')) {
var src = img.eq(i).attr("data-src");
img.eq(i).attr("src", src);
n = i + 1;
}
}
}
}
landlord();
$(window).scroll(landlord)
2
3
4
5
6
7
8
9
10
11
12
13
14
webp图片格式
技术来源：Google开发的有损和无损压缩的图片格式，支持透明度，同时支持动图。
根据 Google 的测试，无损压缩后的 WebP 比 PNG 文件少了 45％ 的文件大小，即使这些 PNG 文件经过其他压缩工具压缩之后，WebP 还是可以减少 28％ 的文件大小。
测试结果
在无损的情况下，肉眼几乎看不出区别，经过png无损压缩后依然能大小减少了33%左右的体积，确实如google的测试相近。
而且使用有损压缩90%下更是夸张地减少了84%的体积，不过过于鲜艳的颜色会有所丢失，肉眼查看差距不大，相比下能减少如此之多的图片大小绝对值得使用。
兼容性问题
⚠️注意：万年不支持Webp的苹果在今年推出的新系统也默认支持该格式。 Apple Adds WebP Image Support in Safari 14. iOS 14 and macOS 11 Big Sur.
绿色标记为支持版本，其中安卓4以上原生支持。现在市面上几乎全面支持webp格式，即便不支持也可以使用替换方案去保底。
<picture>
<!-- source都不支持，img才会显示 -->
<source type="image/svg+xml" srcset="pyramid.svg">
<source type="image/webp" srcset="pyramid.webp">
<img src="pyramid.png">
</picture>
2
3
4
5
6
使用腾讯智图gulp插件
智图pc端下载，可手动压缩和转格式应用
==压缩最优选择「原图压缩」，经过其他工具压缩或转格式效果并不是最好的==
智图API接入，由于需要node服务的支持，目前项目的技术栈无法实现。
小结
响应式图片
- 可应用于体积较大页面，如：康众/健康会员的切图。
- 大胆使用
webp格式减少图片体积，同时使用png作为候补 - 简单图形使用SVG替代（如：「我的」页面）
懒加载应用
- 预加载默认图片，用户通过滑动后再加载图片
规范HTML、CSS、JS
- 嵌入在表头的
style将其分离到样式表中，减少阻塞 - 使用
flexbox布局，减少多标签div+p+span嵌套
改造：利用查询表循环生成DOM
案例：布局
.flex {
display: flex;
justify-content: space-between;
}
.flex p {
white-space: nowrap;
width: 50%;
}
.flex li span {
text-align: justify;
/* 英文与数字换行 */
word-break: break-all;
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
JS可配置化生成DOM
const array = [
{ "姓名": data[0].name },
{ "卡号": data[0].bankCard },
{ "手机号码": data[0].phone },
]
/** jq方法更简单
* $('<li class="flex"><p>${Object.keys(data)}</p><span>${Object.values(data)}</span></li>').appendTo(#39;#list')
*/
let html = ''
array.map(data => {
html += `<li class="flex"><p>${Object.keys(data)}</p><span>${Object.values(data)}</span></li>`
})
window.list.innerHTML = html
2
3
4
5
6
7
8
9
10
11
12
13
14
实现效果 ↓
减少意大利面条代码
随着状态增多，代码量翻倍增长
相比ftl <#if><#else>页面更清晰，代码数量更少。
增加==哈希表 / 数组 / 对象==形成查询表可有效减少状态判断的复杂性，思路更加清晰。
end.