补充:
前端分页缺点:如果想排序所有页的数据还是比较麻烦,element ui 表格数据排序功能只能排序当前页。
前端分页:数据量比较小的情况下适合前端分页,数据量太大,前端一次性取出来在页面渲染,页面会卡死的。
别回头,别人随时有可能赶上你
Any fool can write code that a computer can understand. Good programmers write code that humans can understand.
没有足够的数据
tina666 回答了问题 · 3月4日
补充:
前端分页缺点:如果想排序所有页的数据还是比较麻烦,element ui 表格数据排序功能只能排序当前页。
前端分页:数据量比较小的情况下适合前端分页,数据量太大,前端一次性取出来在页面渲染,页面会卡死的。
补充:前端分页缺点:如果想排序所有页的数据还是比较麻烦,element ui 表格数据排序功能只能排序当前页。前端分页:数据量比较小的情况下适合前端分页,数据量太大,前端一次性取出来在页面渲染,页面会卡死的。
关注 3 回答 2
tina666 回答了问题 · 3月4日
也才没工作多久,趁年轻,多学习,多学习下基础,看看同事们写的项目多问多学。
也才没工作多久,趁年轻,多学习,多学习下基础,看看同事们写的项目多问多学。
关注 5 回答 4
tina666 回答了问题 · 3月4日
这个简单的样式,直接自己写都可以了
或者使用element-ui divider分割线+tag标签 +table表格
这个简单的样式,直接自己写都可以了或者使用element-ui divider分割线+tag标签 +table表格
关注 2 回答 2
tina666 回答了问题 · 3月4日
存在跨越问题,一般我们项目都是后端配置运行跨域就可以了
前端也可以配置,不过我之前跟着网上配置,都不行不知道为什么
存在跨越问题,一般我们项目都是后端配置运行跨域就可以了前端也可以配置,不过我之前跟着网上配置,都不行不知道为什么
关注 4 回答 3
tina666 回答了问题 · 2月25日
随便搜搜就 有一大堆,你自己筛选下呗
https://www.cnblogs.com/Maryd...
https://blog.csdn.net/tangcc1...
随便搜搜就 有一大堆,你自己筛选下呗[链接][链接]
关注 5 回答 4
tina666 提出了问题 · 2月24日
https://antv.vision/zh 官网这个可收起展开的图是用什么做的,有谁知道的吗,
又或者谁做过拓扑图,如果数据过多,可展开或者收起,有啥好建议的吗?
[链接] 官网这个可收起展开的图是用什么做的,有谁知道的吗,又或者谁做过拓扑图,如果数据过多,可展开或者收起,有啥好建议的吗?
关注 2 回答 1
tina666 发布了文章 · 2月24日
在这里我将列出8种图片加载优化技术来减少宽带使用和cpu占用。我将使用html例子来更好的重现这个结果。其中一部分技术已经相当稳定,而另外一些则有些新颖。理想情况下,您最喜欢的发布Web文档的机制(例如CMS,静态站点生成器或Web应用程序框架)可实现所有这些现成的功能。
在本文结尾处,我将使用提供了此处概述的所有优化的技术更新列表。
Google's Core Web Vitals通过以下方案来优化所有的元素
查看此实例图片的代码,来了解这些技术吧:
这是一种众所周知的技术,可以使图像使用可用的水平空间直到其最大尺寸,同时保留宽高比。
2020年的新功能是,如果为img元素提供了width和height属性,则网络浏览器将在图像加载之前为其保留正确的垂直空间。
这样可以避免累积布局偏移(CLS)。
<style>
img {
max-width: 100%;
height: auto;
}
</style>
<!-- Providing width and height is more important than ever. -->
<img height="853" width="1280" … />
第二种技术是更前沿。
新的CSS属性content-visibility:auto指示浏览器在图像靠近屏幕之前不要烦扰布局。
这具有各种好处,但最重要的好处可能是,浏览器将不会费心地解码我们模糊的占位符图像或图像本身,除非必须这样做,这样可以节省CPU。
这篇文章的早期版本介绍了如何使用contain-intrinsic-size来影响content-visibility: auto,但是从Chromium 88开始,图片不在需要提供width和height。
其他浏览器引擎(01/27/2021)尚未实现content-visibility: auto,并且在这种特殊情况下可能会追随Chromium的发展。
所以,是的,这现在要简单得多!
main img {
/* Only render when in viewport */
content-visibility: auto;
}</style>
AVIF是已在Web浏览器中采用的最新图像格式。
Chromium浏览器目前支持该功能,并且在Firefox中带有标记即可使用。
尚不支持Safari,但考虑到Apple是该格式的支持者,我们可以期待将来
的支持。
AVIF值得注意,因为它以非常重要的方式始终胜过JPEG。
这与WebP有所不同,WebP并不总是产生比JPEG小的图像,并且由于缺乏对渐进式加载的支持而实际上可能会产生净损失。
要实现AVIF的渐进增强,请使用picture元素。
实际的img元素嵌套在picture中。
这可能会非常令人困惑,因为对于没有picture支持的浏览器,有时会将img做为回退,但基本上,picture元素仅有助于src选择,而本身没有布局。
绘制的元素(以及要设置样式的元素)是img元素。
直到最近,在服务器端实际对AVIF图像进行编码仍然相对困难,但是对于像Sharp这样的最新版本的库,现在变得微不足道了。
<picture>
<source
sizes="(max-width: 608px) 100vw, 608px"
srcset="
/img/Z1s3TKV-1920w.avif 1920w,
/img/Z1s3TKV-1280w.avif 1280w,
/img/Z1s3TKV-640w.avif 640w,
/img/Z1s3TKV-320w.avif 320w
"
type="image/avif"
/>
<!-- snip lots of other stuff -->
<img />
</picture>
您可能已经注意到上面的代码段中的srcset和size属性。
使用w选择器,它会根据基于sizes属性(媒体查询表达式)计算得出的宽度,根据将图像绘制到用户设备时将使用的物理像素,来告诉浏览器使用哪个URL。
这样,浏览器将始终下载尽可能小的图像,从而为用户提供最佳的图像质量。
或者,例如,如果用户选择了某种数据保存模式,它可能会选择较小的图像。
如果浏览器不支持AVIF,可以使用如下fallbacks
为仅支持旧版图像格式的浏览器提供更多带有srcset的源元素。
<source
sizes="(max-width: 608px) 100vw, 608px"
srcset="
/img/Z1s3TKV-1920w.webp 1920w,
/img/Z1s3TKV-1280w.webp 1280w,
/img/Z1s3TKV-640w.webp 640w,
/img/Z1s3TKV-320w.webp 320w
"
type="image/webp"
/>
<source
sizes="(max-width: 608px) 100vw, 608px"
srcset="
/img/Z1s3TKV-1920w.jpg 1920w,
/img/Z1s3TKV-1280w.jpg 1280w,
/img/Z1s3TKV-640w.jpg 640w,
/img/Z1s3TKV-320w.jpg 320w
"
type="image/jpeg"
/>
在图像的URL中嵌入图像中字节的哈希值。
在上面的示例中,我使用图像URL中的Z1s3TKV进行了此操作。
这样,如果图像更改,URL就会更改,并且您可以分别对图像应用无限的缓存过期。
您希望缓存头看起来像这样的cache-control:public,max-age = 31536000,immutable。
immutable是在语义上正确的缓存控制值,但不幸的是,它在浏览器中并未得到广泛支持(我在用Chrome浏览器查看)。
max-age = 31536000是要缓存一年的后备时间。
public对于使您的CDN缓存图像并从边缘传递图像很重要。
但仅在从隐私角度考虑合适的情况下才使用它
在img中添加loading =“ lazy”会指示浏览器仅在图像离屏幕更近且可能会实际呈现时才开始获取图像。
<img loading="lazy" … />
在img中添加decoding =“ async”可以使浏览器具有从主线程解码图像的权限,从而避免了用户对用于解码图像的CPU时间的影响。
这应该没有明显的缺点,除了由于遗留原因不能总是默认值。
<img decoding="async" … />
模糊占位符是一种内联图像,它向用户提供了一些图像概念,这些图像最终将加载而无需从网络中获取字节。
<img style="
…
background-size: cover;
background-image:
url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg'
xmlns%3Axlink='http%3A//www.w3.org/1999/xlink' viewBox='0 0 1280 853'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='.5'%3E%3C/feGaussianBlur%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1'%3E%3C/feFuncA%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cimage filter='url(%23b)' x='0' y='0' height='100%25' width='100%25'
xlink%3Ahref='data%3Aimage/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAGCAIAAACepSOSAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAs0lEQVQI1wGoAFf/AImSoJSer5yjs52ktp2luJuluKOpuJefsoCNowB+kKaOm66grL+krsCnsMGrt8m1u8mzt8OVoLIAhJqzjZ2tnLLLnLHJp7fNmpyjqbPCqLrRjqO7AIeUn5ultaWtt56msaSnroZyY4mBgLq7wY6TmwCRfk2Pf1uzm2WulV+xmV6rmGyQfFm3nWSBcEIAfm46jX1FkH5Djn5AmodGo49MopBLlIRBfG8yj/dfjF5frTUAAAAASUVORK5CYII='%3E%3C/image%3E%3C/svg%3E');
"
…
/>
英文原文:https://www.industrialempathy...
张鑫旭 AVIF图片格式简介
和使用https://www.zhangxinxu.com/wo...
在这里我将列出8种图片加载优化技术来减少宽带使用和cpu占用。我将使用html例子来更好的重现这个结果。其中一部分技术已经相当稳定,而另外一些则有些新颖。理想情况下,您最喜欢的发布Web文档的机制(例如CMS,静态站点生成器或Web应用程序框架)可实现所有这些现成...
赞 0 收藏 0 评论 0
tina666 发布了文章 · 2月23日
很少能完整看完长篇大论的文字,这篇文章写的观点真的都很赞同,写的特别好,适合当前比较迷茫的你。
得出的结论是:
文章摘录
如果大家再生活中发现自己睡眠不太好,精神状态也不好,很消极,啥也不想干,这个不一定是脑子有问题,可能单纯就是身体虚。
https://mp.weixin.qq.com/s/AX...
查看原文随着年龄的增长,生活的琐碎确实是越来越多,没有大多精力投入到工作中,激情也会越来越少。只想赚更多的钞票,只要有更多的钱,生活琐碎才会待我们相对好点。
赞 0 收藏 0 评论 0
tina666 回答了问题 · 2月22日
不需要刷新,直接就 更新了,你用localStorage.getItem("a")获取下就知道了
不需要刷新,直接就 更新了,你用localStorage.getItem("a")获取下就知道了
关注 3 回答 2
查看全部 个人动态 →
(゚∀゚ )
暂时没有
(゚∀゚ )
暂时没有
注册于 2019-05-17
个人主页被 1.2k 人浏览
推荐关注