default
menu home
Icon library Sign up Login favorite_border message help_outline

- Online notes-page3

styleTags:  All CSS html javascript php/other IT
Demo subject 无法明确指定大图的宽度width和height时,如何避免累计布局位移CLS?

累计布局偏移: Cumulative Layout Shift, 简称CLS,是一项web性能的重要指标,旨在避免页面渲染时,某些元素(比如图片、字体等)加载前后占位不同导致页面呈现的内容发生突然变化,降低用户使用感受。比如图片未加载前,原来是某个链接的位置,突然被加载后的图片取代,页面发生了“跳动”,用户点下去的时候就不一定是用户想要的去处。

但是,某些情况下,我们又无法直接明确指定图片的宽度和高度,比如为了自适应不同的屏幕大小,我们需要图片按屏幕宽度的百分比来呈现,这时候,就无法简单地直接明示图片的宽/高。一旦不指定图片的宽/高,那么我们就容易遇到CLS问题,因为浏览器在读取图片并加载前,不知道该预留多大位置给图片。

那么我们如何避免这个两难的局面呢?

一种比较简单的做法是给图片加上一个包围元素,指定这个包围元素的宽高比,比如宽度80%,高度40%(根据图片的宽高比计算得出),与图片的实际宽高比一致。然后把图片放入其中,指定图片宽度100%。这样,浏览器就会预留相应的并且正确的图片位置,从而避免CLS问题。

下面我们以一张大图(1920*1080,16:9)为例,演示如何具体实现。(点击页面红色“演示”按钮查看效果)

by: fanshome  visibility 1834
2023-07-26 09:32 (UTC)

subject favinavi为什么会选择微软的bing搜索作为默认的搜索引擎?

这个选择初看有点奇怪,因为论搜索,谷歌是当然的第一选择,而中文搜索,百度又是当仁不让的中文搜索老大,微软的bing虽然做得还不错,但无论从哪方面说,它似乎都不该是最佳选择。

然而,毕竟favinavi网络收藏夹最初是纯中文网站,主要用户都集中在中国大陆。中国的特殊国情决定了选择谷歌作为默认搜索引擎毫无意义,大家都懂的。那为什么不选百度呢?嗯...这话说起来有点不好意思,favinavi从favii改版后,增加了英语界面,打算把全世界两大使用量最多、通用性最强的语言都支持起来,而说实话,在英语搜索方面,百度可能做的就不是特别优秀了。所以,折衷一下,选择bing作为默认搜索引擎就合情合理了。一方面,用户假如不喜欢这个默认搜索,随时可以更换;另一方面,无论在中文还是英文搜索方面,bing都还做得不错,所以,把bing作为默认是一个中庸之道的解决方案,万一用户懒得选择搜索引擎,那么bing的搜索结果算是仅次于最佳的结果。

说到这里,允许我脱离一下前面的主题,说说不同搜索引擎的个性特征。

不得不提一嘴,由于开发这个网络收藏夹的原因,开始关注起了SEO和搜索引擎蜘蛛的表现,将近一个月观察下来,得出一个并不意外的结论,就是谷歌当搜索界的一哥,那是当之无愧的。这里先不说谷歌后台的技术有多强大,对页面内容的分析、提炼、权重处理等等这些,相信每家搜索引擎都有各自的独门秘籍。咱们就说说爬虫对网站自主规则的尊重,那谷歌做得绝对是有板有眼,并且有人情味(意思是允许网站程序员在一定时间、范围内犯错,因为这无法避免)。网站的robots.txt、网站地图、页面是否跳转,怎么跳转?是临时的还是永久的?等等等等,谷歌都会按规则处理。话说这些为什么对搜索引擎很重要?因为尊重的规则的结果是双方受益的,对网站有利,对搜索引擎也有利。

上面说的有点啰嗦,咱把话讲得明白点,结果就会是:假如网上出了一个新建的网站(假设某些前提会满足,确保各大搜索会发现这个新站。),网站开发人员只是按规则写了一些必要的技术规则,没有针对搜索引擎做专门的工作,那么最终,谷歌会把这个网站的内容整得明明白白,该收录的收录,该无视的无视、该惩罚的惩罚。而反观某些二、三流的搜索引擎,在某些情况下,假如你不主动到他家网站上去提交一些东西(甚至提交了也不一定有用),那么可能在相当长的时间里(半年、一年甚至更长),它都不会来主动瞧你一眼。

我个人的结论是:谷歌的蜘蛛爬虫,聪明,按章办事,但是又不失人情味儿;百度的表现也不错,难怪能在中国当老大;微软的bing,中规中矩,像班上的好学生,少了点灵活性和烟火气;俄罗斯的yandex,就像他们战斗民族的个性,有时候会表现得有点简单粗暴,比如一天就来访几千次,但不失可爱;而有些爬虫,不够聪明,不一定按规则行事,并且毫无人情味。

这里说个真实的笑话,话说某家搜索(真记不起来具体是哪家),每天来报到一次,但是坚决不肯多光顾。但是他们家有站长服务网页,可以要求蜘蛛多来光顾,于是我就主动要求提高蜘蛛爬取量。搞笑的事情来了,他家规定最多提高50%每天,可由于是基数太小,等于1,所以就变成了我最多要求1.5次/天,然后他偏偏还向下取整,所以提高50%还是1次/天,我变成了白忙!

二、三流之所以是二、三流,首先不一定是输在技术上,而是输在了“发现”!

by: fanshome  visibility 1529
2023-06-10 04:31 (UTC)

Demo subject javascript捕获缺省的组合快捷键,比如CTRL+F

有时候我们需要在网页上捕获用户的按键动作,然后避免执行缺省动作,替换成我们想要执行的程序。

下面我们以拦截并接管“ctrl+f”组合键为例,代码如下:

by: fanshome  visibility 1577
2023-06-09 06:22 (UTC)

subject 把favinavi网络收藏夹的书签搜索功能做到最好

在此先感谢“changanluan”用户的建议,是他(她)提出了这个问题,favinavi怎么还没有书签搜索功能呢?

是啊,我不属于那种要收藏几千个书签的收藏爱好者,所以平常自己并不是特别有搜索书签的需求。但是我不需要不代表没有人需要,favinavi的典型粉丝几乎都是拥有大量书签搜藏的人,所以,这个搜索书签的功能必须有,不然,怎么在几千个书签中快速锁定一个不那么常用的书签到底在哪里呢?

说干就干,先喝杯咖啡,想清楚要怎么做。

目标:要方便、要准确、要醒目、要尽可能自动化。

目标细化下来,决定借鉴浏览器自身的ctrl+F页面搜索功能,这样用户习惯程度最好,培训成本几乎为零。
然后给自己提要求,一定要做到自己能力范围内的极致,最大程度满足用户的想法。

当天熬到凌晨4点,终于把书签搜索功能第一版给做出来了。假如我自己打分的话,至少给自己8分,哈哈!

其中考虑了与书签搜索相关得不少细节:
1、用户键入可能有停顿,所以稍微延迟几百毫秒再进行搜索,避免做无用功,还打扰到用户视觉;
2、搜索结果不仅要醒目,并且主动猜测用户的需要,假如只有一个结果,就直接自动滚动页面到搜索目标,并高亮提示,省得用户动手;
3、如果有多个结果,突出全部匹配的书签,高亮聚焦到第一个,并且同时提供上下选择;
4、上线按钮选择也同样提供自动滚动,永远自动聚焦在当前的匹配书签上;
5、在favinavi网络收藏夹自己的主页面取代浏览器的ctrl+f快捷键功能,直接敲这个组合键可以快速调出favinavi的书签搜索功能。

第一版基本上就是这样,我想满足用户的一般性书签搜索的需求没有啥大问题了吧?

假如还有什么意见和建议,欢迎到留言板写下您的宝贵意见。

by: fanshome  visibility 1331
2023-06-10 04:34 (UTC)

subject An example of increasing productivity with the Favinavi web favorites sharing feature

Favinavi’s humanized network favorites provides a sharing function, that is, users can share their favorite and organized bookmarks with their classmates, colleagues or friends.

A leader who works in a local government department (let's call him "Director Zhang" for convenience), works for the quality management and supervision department of the local government. In order to ensure the legal compliance of their work, their departments need to frequently check the laws, regulations, and systems related to their profession. This content is distributed across different types of websites, including national, provincial, prefectural, municipal, and others. And the specific content of these regulations will continue to change over time, and if you do not follow up immediately, it may cause mistakes in work.

So the enthusiastic and willing to use his brains "Director Zhang" thought that if he built a web page, the commonly used legal websites and other commonly used website bookmarks in the work were brought together, and he was responsible for updating, editing, and combing, so that all colleagues in his government department, as long as they had the need to query relevant content, could directly visit this web page and quickly query the latest, most comprehensive and authoritative content.

However, building a website/page that everyone can access may not be easy or necessary. "Director Zhang" thought of his commonly used favinavi network favorites, which can be used to solve his work needs. So he specially registered a new Favinavi account to collect, categorize, organize relevant URL bookmarks, and then published the work-specific favorite sharing URL he created to hundreds of his colleagues. As a result, a set of dynamic 'laws and regulations' that can be adjusted at any time has been created, and colleagues can visit this sharing website at any time if they need to work, which greatly improves work efficiency. If necessary, colleagues can also use the 'one-click to my favorites' feature to add a bookmark directly to their Favinavi favorites for future access.

In addition to sharing your favorite bookmarks as a whole, favinavi can also choose some bookmarks at will to generate a special sharing set, which is more flexible and convenient.

If you have similar needs, consider using https://favinavi.com.

by: demo  visibility 1425
2023-06-13 17:36 (UTC)

subject Comparing the mobile adaptability of several Chinese web favorites

In the era of mobile phones, a website is still good to use, and whether you can get a good browsing experience on mobile phones is very critical.

In recent days, I have focused on the screen adaptation of my Favinavi website page, optimizing very, very much detail. Now that the optimization of screen adaptation has come to an end for the time being, I feel that I have done a good job, and then I tested it all with a few terminals (including PC/pad/mobile phone), well... The conclusion is really good, it can be said that it has achieved "humanization".

A little time, out of curiosity, I also want to see how other people do with this aspect of online favorites, hehe.

I won't mention the specific website name, in short, in addition to a relatively professional team to do a special focus on UI favorite websites, most of them can be said to be miserable, basically did not consider the automatic adaptation of the mobile phone, or it is more troublesome, need to download the app. It's really a little unexpected, I don't know if it's the era of mobile phones now?

After a slight turn, I felt very relieved in comparison. I have worked so hard to make the favinavi, of course, I dare not say that I have done the best, but I found that it is actually very unique. I believe that doing your own actual needs as the universal needs of users, although not a very market-oriented good method, is in line with the scientific outlook on development.

Personally make a summary to cheer myself up: compared with the seven or eight Chinese network favorites in the rough test, in terms of mobile terminal interface friendliness, if Favinavi claims to be the second, will anyone dare to claim the first?

by: fanshome  visibility 1418
2023-06-14 02:56 (UTC)

subject What should the best web favorites look like?

What should the best web favorites look like? Let's clarify the premise of the discussion here, see: What is a web favorites/online bookmarking.

I am afraid that everyone's answer to this question is different. But in the understanding of favinavi, in addition to the basic functions of general network favorites (such as adding, editing, deleting, importing, exporting), it is to see the convenience of use.

What is convenience? The ultimate convenience is called convenience. What are web favorites used for? Of course, it is used to surf the Internet, translated into the vernacular, that is, you can use the fastest speed to access your favorite website.

How fast can it be fastest? Favinavi's understanding is just one click! One click in the true sense of the word.

Some people will say, this is nonsense! Which bookmark link is not a one-click jumper?

That's right, but I mean: after opening the browser (this time the click is not counted, because everyone uses a browser or browser-like software, so it is not counted), just one click. Specifically, if a certain prerequisite is met, the browser is opened, and the favorite website can be immediately accessed with another click.

It sounds like nothing, let me give you another example: the browser's own bookmarks bar, in the case of chrome, even if you have the Show bookmarks bar turned on in your settings, in general, you need at least 2 clicks to access specific bookmarks. Even if some browsers can directly display bookmarks below the address bar, have you ever thought about it, assuming that there are more bookmarks in favorites? For example, 50, it is impossible to display in one line, if multiple lines are displayed, and it takes up too much of the browser's own screen space, the space used by the browser to display the real web page content is crowded.

One or two clicks worse seems to be nothing, but for heavy Internet users, it seems that most people are still lazy, always hoping to do everything as convenient as possible, the faster the better.

This need for extreme laziness in human nature is the focus of Favinavi's attention. If the user sets the https://favinavi.com as the browser launch page, then you can truly achieve "one-click to fly", because the home page of favinavi is the user's favorites, open the browser, favinavi will try to display the user's favorites directly as much as possible, and the number of bookmarks displayed is pursued as much as possible, the more the better, and at the same time automatically count and display the most frequently visited bookmarks by users. In this way, basically, frequently visited websites are "one hit away", and even scrolling pages are basically not used.

The difference is not very important for light browser users. However, favinavi is mainly intended for those heavy Internet users, for those Internet users who have at least dozens of bookmarks in their favorites, and for lazy cancer patients who want to be lazy in everything.
[img]

Intuitive display, the more the merrier, one-click direct, is the characteristic of Favinavi.

Are you impressed? Register Favinavi right now to feel it

by: demo  visibility 1253
2023-06-12 10:15 (UTC)

subject 最好用的网络收藏夹应该是什么样?

最好用的网络收藏夹应该是什么样?我们这里先明确一下讨论的前提,参考:什么是网络收藏夹/网络书签。

这个问题恐怕每个人的答案都不尽相同。但是以favinavi的理解,除了一般网络收藏夹的基本功能(比如添加、编辑、删除、导入、导出)书签外,就是看使用起来的方便性。

什么叫方便?最极致的方便才叫方便,会让人用着用着就上瘾的方便才叫方便。网络收藏夹是用来干什么的?当然是用来上网的,翻译成大白话,就是可以用最快的速度,访问到你收藏的网址。

最快可以有多快?favinavi的理解,就是一次点击!真正意义上的一次点击。

有人会说,这不是废话嘛!哪个书签链接不是一次点击就可以跳转访问的呢?

没错,但是,我指的是:打开浏览器之后(打开浏览器的这次不算哦,因为上网总是要用浏览器或者类似浏览器的软件的么,所以不计入),就一次点击。具体而言,在满足一定前提条件的情景下,打开了浏览器,就真正再用一次点击就可以立即访问到收藏的网站。

听起来好像没有什么,我再举个例子:比如浏览器自己的书签栏,以chrome为例,即便你设置中打开了显示书签栏,一般而言,想访问到具体的书签,还需要至少2次点击。即便部分浏览器可以直接把书签显示在地址栏下方,但是大家想过没有,假设收藏的书签比较多呢?例如50个,甚或500个以上,就不可能一行显示完毕,假如显示多行,又太占用浏览器的自用屏幕空间,浏览器用来显示真正网页内容的空间就被挤占了。

差一、两次点击好像没什么,但是对于重度网络用户来说,好像大部分人还是比较懒的吧,总希望干什么事都越方便越好,越快速越好。

这种人性中极致懒惰的需求,就是favinavi关注的重点。如果用户把https://favinavi.com 设置成了浏览器启动页,那么就可以真正意义上实现“一键起飞”,因为favinavi的首页就是用户的收藏夹,打开浏览器,favinavi就尽可能把用户收藏夹内容直接展示,并且显示的书签数量上追求尽可能多,多多益善,同时自动统计并展示用户最常访问的书签。这样,基本上,常去访问的网站就实现了“一击即达”,甚至连滚动页面都基本不用。

其中的差别,对于轻度浏览器使用者来说,不是很重要。但是,favinavi主要是想给那些重度网络使用者用的,是给那些收藏夹里至少有大几十个书签的网络使用者用的,是给那些凡事都想偷懒的懒癌患者使用的。
[img]
直观展现,多多益善,一键直达,追求最极致的用户体验,就是favinavi的特色。心动了没有?马上注册favinavi开始享受吧!
还没决定?那么就先登录demo演示账户感受一下吧。

by: fanshome  visibility 1728
2023-06-23 01:51 (UTC)

subject 对比一下几个中文网络收藏夹的实用性之手机适配篇

手机满天下的时代,一个网站还好不好用,能否在手机上得到良好浏览体验非常关键了。

最近几天自己重点关注了一下自己的favinavi网站页面的屏幕自适应效果,优化了非常非常多的细节。现在屏幕自适应的优化工作暂时告一段落,感觉自己做得很好了,然后就用手头几个终端(包括pc/pad/手机)全部测试了一下,嗯...结论是真的很不错了,可以说是做到了“人性化”。

有点时间,出于好奇心,就同样想看看别人做的网络收藏夹这方面干的怎么样,呵呵。

具体网站名称啥的我就不提了,总之除了一个相对专业的团队做的一个特别注重UI的收藏夹网站,绝大部分可以说是惨不忍睹,基本没有考虑手机自动适配,要不就是比较麻烦,需要下载app。真是有点意想不到,不知道现在已经是手机时代了吗?

稍微转了一圈,对比下来,感觉非常欣慰。自己费了这么多心血做的favinavi,当然不敢说已经做到最好,但发现其实原来还是非常有独到之处的啊。我相信,把自己的实际需求当成是用户的普遍需求来做,虽然不是一个非常市场化的好办法,但却是符合科学发展观的做法。

个人做个小结给自己打打气:就粗略测试的七八个中文网络收藏夹来比,在移动终端界面友好度方面,favinavi人性化网络收藏夹自称第二的话,会不会有人敢号称第一呢?

by: fanshome  visibility 1500
2023-06-10 06:08 (UTC)