用户M
获得徽章 1
#挑战每日一条沸点#
前端加载超大图片时，一般可以采取以下措施实现加速：
图片压缩：将图片进行压缩可以大幅减小图片的大小，从而缩短加载时间。压缩图片时需要注意保持图片质量，以免影响图片显示效果。
图片分割：将超大图片分割成多个小图块进行加载，可以避免一次性加载整个图片，从而加快加载速度。这种方式需要在前端实现图片拼接，需要确保拼接后的图片无缝衔接。
CDN 加速：使用 CDN（内容分发网络）可以将图片缓存在离用户更近的节点上，从而加速图片加载速度。如果需要加载的图片是静态资源，可以将其存储在 CDN 上，以便快速访问。
懒加载：懒加载是一种图片延迟加载的方式，即当用户浏览到需要加载的图片时才进行加载，可以有效避免一次性加载大量图片而导致页面加载速度缓慢。
WebP 格式：使用 WebP 格式可以将图片大小减小到 JPEG 和 PNG 的一半以下，从而加快图片加载速度。
HTTP/2：使用 HTTP/2 协议可以并行加载多个图片，从而加快页面加载速度。
预加载：预加载是在页面加载完毕后，提前加载下一步所需要的资源。在图片加载方面，可以在页面加载完毕后提前加载下一个需要显示的图片，以便用户快速浏览。
前端加载超大图片时，一般可以采取以下措施实现加速：
图片压缩：将图片进行压缩可以大幅减小图片的大小，从而缩短加载时间。压缩图片时需要注意保持图片质量，以免影响图片显示效果。
图片分割：将超大图片分割成多个小图块进行加载，可以避免一次性加载整个图片，从而加快加载速度。这种方式需要在前端实现图片拼接，需要确保拼接后的图片无缝衔接。
CDN 加速：使用 CDN（内容分发网络）可以将图片缓存在离用户更近的节点上，从而加速图片加载速度。如果需要加载的图片是静态资源，可以将其存储在 CDN 上，以便快速访问。
懒加载：懒加载是一种图片延迟加载的方式，即当用户浏览到需要加载的图片时才进行加载，可以有效避免一次性加载大量图片而导致页面加载速度缓慢。
WebP 格式：使用 WebP 格式可以将图片大小减小到 JPEG 和 PNG 的一半以下，从而加快图片加载速度。
HTTP/2：使用 HTTP/2 协议可以并行加载多个图片，从而加快页面加载速度。
预加载：预加载是在页面加载完毕后，提前加载下一步所需要的资源。在图片加载方面，可以在页面加载完毕后提前加载下一个需要显示的图片，以便用户快速浏览。
展开
2
3
#挑战每日一条沸点#
Pug 最初是用于服务端的模板引擎，随着一些用于Pug的 loader 出现，它也有了在前端发力的机会。 Pug 可以灵活地生成 HTML 代码，使用方式在一定程度上相似于 JSX ，而又比 JSX 更加强大。
Pug 的能力非常出众。在 Vue3 中，无论是常规的 HTML 形式的 template ，还是 JSX ，在 Pug 面前都显得笨重且冗余。 Pug 支持行内 JS 语法。而且，JS 代码在这里分为 缓冲代码( Bufferd Code ) 、 无缓冲代码 ( Unbuffered Code ) 以及 不转义无缓冲代码 ( Unescaped Buffered Code )
Pug 最初是用于服务端的模板引擎，随着一些用于Pug的 loader 出现，它也有了在前端发力的机会。 Pug 可以灵活地生成 HTML 代码，使用方式在一定程度上相似于 JSX ，而又比 JSX 更加强大。
Pug 的能力非常出众。在 Vue3 中，无论是常规的 HTML 形式的 template ，还是 JSX ，在 Pug 面前都显得笨重且冗余。 Pug 支持行内 JS 语法。而且，JS 代码在这里分为 缓冲代码( Bufferd Code ) 、 无缓冲代码 ( Unbuffered Code ) 以及 不转义无缓冲代码 ( Unescaped Buffered Code )
展开
评论
点赞
#挑战每日一条沸点#
大屏适配方案
vw， vh
按照设计稿的尺寸，将px按比例计算转为vw和vh
1.可以动态计算图表的宽高，字体等，灵活性较高
2.当屏幕比例跟 ui 稿不一致时，不会出现两边留白情况
1.需要编写公共转换函数，为每个图表都单独做字体、间距、位移的适配，比较麻烦
scale
通过 scale 属性，根据屏幕大小，对图表进行整体的等比缩放
优点:1.代码量少，适配简单
2.一次处理后不需要在各个图表中再去单独适配
缺点:1.因为是根据 ui 稿等比缩放，当大屏跟 ui 稿的比例不一样时，会出现周边留白情况
2.当缩放比例过大时候，字体和图片会有一点点失真.
3.当缩放比例过大时候，事件热区会偏移。
rem + vw vh
操作方法:1.获得 rem 的基准值
2.动态的计算html根元素的font-size
3.图表中通过 vw vh 动态计算字体、间距、位移等
优点:1.布局的自适应代码量少，适配简单
缺点:1.因为是根据 ui 稿等比缩放，当大屏跟 ui 稿的比例不一样时，会出现周边留白情况
2.图表需要单个做字体、间距、位移的适配
大屏适配方案
vw， vh
按照设计稿的尺寸，将px按比例计算转为vw和vh
1.可以动态计算图表的宽高，字体等，灵活性较高
2.当屏幕比例跟 ui 稿不一致时，不会出现两边留白情况
1.需要编写公共转换函数，为每个图表都单独做字体、间距、位移的适配，比较麻烦
scale
通过 scale 属性，根据屏幕大小，对图表进行整体的等比缩放
优点:1.代码量少，适配简单
2.一次处理后不需要在各个图表中再去单独适配
缺点:1.因为是根据 ui 稿等比缩放，当大屏跟 ui 稿的比例不一样时，会出现周边留白情况
2.当缩放比例过大时候，字体和图片会有一点点失真.
3.当缩放比例过大时候，事件热区会偏移。
rem + vw vh
操作方法:1.获得 rem 的基准值
2.动态的计算html根元素的font-size
3.图表中通过 vw vh 动态计算字体、间距、位移等
优点:1.布局的自适应代码量少，适配简单
缺点:1.因为是根据 ui 稿等比缩放，当大屏跟 ui 稿的比例不一样时，会出现周边留白情况
2.图表需要单个做字体、间距、位移的适配
展开
评论
点赞
#挑战每日一条沸点#
小程序开源项目
wechat-app-mall 微信小程序商城
github.com
vant-weapp 移动端组件
github.com
iView Weapp UI组件
github.com
Bee 餐饮点餐
github.com
awesome-wechat-weapp 微信小程序开发汇总
github.com
小程序开源项目
wechat-app-mall 微信小程序商城
github.comvant-weapp 移动端组件
github.comiView Weapp UI组件
github.comBee 餐饮点餐
github.comawesome-wechat-weapp 微信小程序开发汇总
github.com
展开
评论
点赞
#挑战每日一条沸点#
github上有趣的小游戏
hextris 六边形俄罗斯方块
github.com/Hextris/hextris
adarkroom 小黑屋 文字冒险类游戏
github.com/doublespeakgames/adarkroom
liferestart 人生重来模拟器
github.com/VickScarlet/lifeRestart
lila国际象棋
github.com/lichess-org/lila
proxx黑洞 类扫雷游戏
github.com/GoogleChromeLabs/proxx
open-golf 迷你高尔夫
github.com/mgerdes/Open-Golf
pinball 弹珠台
github.com/flutter/pinball
github上有趣的小游戏
hextris 六边形俄罗斯方块
github.com/Hextris/hextris
adarkroom 小黑屋 文字冒险类游戏
github.com/doublespeakgames/adarkroom
liferestart 人生重来模拟器
github.com/VickScarlet/lifeRestart
lila国际象棋
github.com/lichess-org/lila
proxx黑洞 类扫雷游戏
github.com/GoogleChromeLabs/proxx
open-golf 迷你高尔夫
github.com/mgerdes/Open-Golf
pinball 弹珠台
github.com/flutter/pinball
展开
评论
点赞
#挑战每日一条沸点#
Auto-gpt本地部署
1.进入auto的github(github.com)
2.按照要求下载python和vscode
3. 申请openai密钥
4.申请松果的密钥
5. 下载压缩包并解压
6. 在解压目录里打开cmd安装依赖项
7. 更改环境文件.env输入自己的密钥
Auto-gpt本地部署
1.进入auto的github(
github.com)2.按照要求下载python和vscode
3. 申请openai密钥
4.申请松果的密钥
5. 下载压缩包并解压
6. 在解压目录里打开cmd安装依赖项
7. 更改环境文件.env输入自己的密钥
展开
评论
点赞