default
menu home
Icon library Sign up Login favorite_border message help_outline

- Online notes-page5

styleTags:  All CSS html javascript php/other IT
Demo subject 网页图片CSS进阶篇——优化图片,提升网页加载速度

说到提升网页中图片加载速度,一般立即想到的是给图片瘦身,比如减小图片尺寸,或者通过工具降低图片文件大小,比如png图片,可以利用在线压缩PNG图片网页工具,一般可以减少50%~60%的图片体积,基本保持图片显示质量不变。

现在,除了以往常见的jpg/png图片格式外,webp和avif是更优秀的图片压缩格式,现代浏览器大都已经支持,它可以在jpeg图片基础上进一步减少图片文件体积,并且保持相当优秀的图片质量。比如普通jpeg文件,以可接受同等图片质量为前提,转换成webp可以平均减少约30%左右体积,使用avif格式可以比jpeg平均降低约50%左右体积。webp和avif相比较,建议大家选用avif,因为webp是谷歌家的,avif是免费开源的。

这里推荐一个不错的在线jpg转avif工具网站。

以上所述,减少图片文件物理体积,只是提升网页加载速度的手段之一,还有没有其它方法呢?

当然是有,在某些特定场景下,图片文件本身已经确定是经过优化,但是由于某些原因,浏览器在对页面进行渲染时,却因为不知道图片的具体尺寸,导致渲染后的页面内容位置调整,从而带来额外的时间消耗。

具体来说,例如页面需要展示一张大图片,所谓大图片,是相对小尺寸的图片比如图标、头像、按钮之类,那种基本上占满整个页面宽度的图片,如果想做pc端和移动端自适应网页,就比较麻烦,因为你不能直接指定具体的图片宽度和高度(反正我水平不够,没有找到办法),这个时候,浏览器在渲染页面基本框架时,由于不知道图片的宽高,一般都直接先无视,不安排预留位置,导致等图片文件读取完毕开始显示的时候,造成页面内容的跳动。一方面给用户造成不适,另一方面由于需要重新渲染页面的其余受影响部分,造成页面整体加载时间的增加。

那么我们要如何做呢?可以采用背景图片的方法,因为背景图片可以很方便的按屏幕宽度的百分比指定显示比例,从而使得图片无论在pc的大屏幕上还是手机等移动终端的小屏幕上,都能比较得体的展示。具体做法就是先指定图片要显示的宽度占屏幕宽度的百分比,比如80%、90%等,然后指定图片的宽高比,从而让浏览器知道渲染图片的时候需要预留多大的位置给图片,这样,就避免了图片加载后页面的跳动。

下面以一张大图片为例(1920x1080),avif格式文件只有17.7kB,我们来看看css到底如何实现自适应屏幕。
点击演示按钮看实际效果。

注意:部分浏览器(比如微软的edge)不支持AVIF格式图片,所以演示时无法显示图片。

by: fanshome  visibility 1073
2023-06-03 06:07 (UTC)

Demo subject CSS学习笔记:flex布局做出元素两端对齐效果

很久以前,还没有flex布局方法的时候,想要在同一行内的两个元素分两端左右对齐,应该使用float方法,左边的元素使用float:left; 右边的元素使用float:right;。

现在,flex布局大行其道,要想达到同样的目的,理论上使用flex的方法效果应该更好。

简单记录一下备用。

by: fanshome  visibility 1279
2023-05-28 06:45 (UTC)

Demo subject CSS学习心得:多行文本两端对齐,同时溢出部分自动截断并添加省略号...

在卡片列表式页面展示文章内容时,除文章标题外,经常需要显示文章简介。简单粗暴的做法就是只显示文章的开始部分内容,这时就会要求简介部分固定高度,不能超出,同时尤其是中文,不能轻易使用字符串截断,最好是能够使用CSS来截断,同时添加省略号...,以便在不同屏幕上,卡片宽度自适应的同时,简介部分的内容也实现自适应。

注意:-webkit-line-clamp 不规范的CSS属性,使用时请注意有浏览器兼容性问题。

另外,如果是单行文本截断并加省略号的话,要加white-space: nowrap;

by: fanshome  visibility 1039
2023-06-05 08:01 (UTC)

subject favinavi人性化网络收藏夹与pinbox跨平台收藏工具的简单对比

简体中文世界里的网络收藏夹类网站,我个人观点:pinbox是做得非常用心的一个,看得出来背后有一个专业团队在开发和运营,人数多少不知道,但肯定是比favinavi单枪匹马的强太多了。

印象最深刻的就是pinbox的UI界面,外观非常大气漂亮,要我自己打分的话,基本上中文收藏类网站可以排第一。它的特点是可以收藏几乎网上的任何内容,除了网页书签,还可以收藏文档、图片等,比favinavi.com功能多,这里表示敬佩一下。

favinavi虽然UI算不上一流,但是新版经过努力改进,比旧版的“favii.cn”人性化网络收藏夹进步太多了,现在应该也算能看,要求不是特别高的话,可以算过得去,还行吧。favinavi人性化网络收藏夹主要是侧重于网络书签的收藏以及相关功能,一方面可以减少开发工作量,另一方面可以在界面等诸多方面只考虑书签收藏这一个需求,把话说的漂亮点就是专注,哈哈。

就我自身而言,暂时对收藏文档、图片等需求不是特别突出,所以我还是用favinavi.com来收藏管理书签。假如您不仅有书签收藏的需求,同时也要收藏文章、图片等,那您可以考虑使用pinbox。favinavi的前身favii曾经提供过文档收藏功能,但是迫于监管压力,没有足够精力进行审核,所以后来就不再提供文档收藏功能了,未来应该也不会考虑文档、图片等的收藏功能。

把自身与同类型网站比较,可能有点犯忌讳,但是各自侧重点不同,简单描述对比一下并不过分吧。就此打住,pinbox的各位不要来打我啊!

by: favinavi  visibility 1551
2023-06-09 13:42 (UTC)

subject 为什么会做favinavi网络收藏夹网站?记录一下心路历程

记得最早是在2007年,那时工作需要,经常用浏览器上网查资料、访问工作网站等等。经常遇到一个问题,就是白天工作时看到一个网站的某篇文章很有用,在浏览器设为了书签,方便后续再访问。但是晚上回家后,再想访问时却记不住网址,只能再次使用搜索引擎搜索。但是经常性的,可能使用的关键词不同,或者搜索引擎不同,就再也找不到想要的网页,只能第二天上班后再说了。(当时的浏览器普遍还没有提供书签同步功能)

于是我就想,这肯定不是个别现象,一定有很多人遇到了和我同样的问题,不如我做一个网站,一方面自己可以用,另一方面也可以免费提供给大家使用。于是,favii.cn人性化网络收藏夹诞生了。可惜,注册域名的时候让朋友帮忙,本来想用favii.com,结果朋友一个疏忽,搜索了一下favii.com可用,忘了即时付费拿下,于是就被无良的域名商抢注了,只能退而求其次用了favii.cn。

域名弄好了,说干就干,花了大概半年的业余时间,终于把网站搭起来了,从服务器租用,各种服务器环境的搭建,数据库、前后端代码、美工,全部是一个人。当时国内基本没有同类网站,所以网站上线后算是有点小火,没有宣传的前提下,半年多就有了几万活跃用户。

可惜,当时由于工作比较忙,事情比较多,网站后续运营方面没有花什么心思,并且出于监管方面的频繁关注,把当初网站一个非常重要的板块“文档收藏”给砍掉了。所以,慢慢的,网站影响力不断下滑,用户增长也逐渐减缓,基本就是活跃用户在使用。

现如今,网络收藏夹网站非常多了,那么favii为什么还要改版呢?一方面,随着这些年智能手机的普及和发展,PC使用量下滑,老版favii只适配pc浏览器,已不符合时代发展的需要。二放面,favii还是拥有不少铁杆粉丝用户,这些用户的鼓励(包括指责)是促使我下决心继续做新版favinavi.com的动力来源。

要说favinavi网络收藏夹的最大特点,我自己觉得就是追求极致的“懒惰”。翻译一下,就是尽可能做到鼠标“一次”点击就能访问想去的网站(当然不包含打开浏览器的那一次)。所以,这就是为什么favinavi在用户登录页面要仔细介绍如何把favinavi设置成启动页(或首页)的原因,因为这样,“一次”点击的目标才能达成。这也是为什么favinavi不顾美观的要求,一定要把书签排列得比较紧密、字体也不够大的主要原因。一切的一切,都是为了能够实现打开浏览器,就见到几乎所有经常使用的书签,甚至连鼠标滚动的动作最好都能省掉,鼠标点击一下,直接就访问想去的网页。

favinavi第二个特点,就是从一开始就提供了收藏夹分享功能,方便用户把收集的书签分享给同学、同事、朋友,所以特别适合教师、学生、程序员、工程师、公务员等需要经常上网查资料、收集资料、整理资料的群体使用。老版本没有提供“只分享一部分书签”的功能,新版本网站在这方面做出了改进。

第三个特点,就是我个人始终特别关注的:网页呈现速度。一方面购买使用大牌运营服务提供商的服务器,另一方面在网站代码上绞尽脑汁,充分考虑如何提高用户打开页面的速度,即使一个用户收藏了近两千个书签,加上近两千个需要同时显示的网站图标,都要做到尽量页面“秒开”。

好了,现在新版网站开发基本完成,后面就看大家的反响了。有任何问题请到本站留言板留言,谢谢大家!

by: favinavi  visibility 1023
2023-06-09 13:41 (UTC)

subject MDUI前端框架,表格头position: sticky无效的问题

MDUI前端框架不错,很漂亮、灵活,用起来能省不少时间。

但是有些时候,它也会引入一些意想不到的问题:比如我想做一个统计表格,统计一大堆数据,然后希望页面滚动的时候,表格头部能固定在页面顶端,方便查看数据。本来,这个功能实现起来很简单,css里写上:thead tr{position:sticky;top:60px;} 就能解决问题了。

然而,使用了MDUI的css框架后,预期的效果没有出现,表格头随着滚动一起和表格内容一样被消失了。上网搜索了一堆文章,检查了表格的父容器属性等等,都没有效果。最后没招,使用排除法,确认问题出在MDUI框架的”mdui-table-fluid“样式上,overflow-x:auto这句导致了position: sticky不生效。

本来,使用mdui-table-fluid样式是为了在手机上查看表格时,横向宽度不够,可以用手指左右拖动表格来查看完整内容,非常方便。谁知道会影响sticky属性能。

发现了问题,解决起来就容易了:
@media (min-width:1024px){.mdui-table-fluid{overflow-x:initial;}}

这样,在PC上再查看表格的时候,表格头可以固定住了,手机上不受影响,继续可以左右拖动,完美!

by: fanshome  visibility 1112
2023-05-24 08:27 (UTC)

Demo subject 自用小工具:正则表达式测试是否能匹配字符串

正则表达式写起来不难,但是要做到准确无误却是一个不小的挑战,经常因为一个小疏忽,导致貌似正常而实际上却有bug。

尤其是域名或url相关的,特别容易出错,出错的主要原因是没有考虑到实际情况下的url参数中可能也包含域名。

所以自己做一个小工具,用来测试和检测写的正则表达式是否准确有效。

by: fanshome  visibility 1485
2023-05-29 14:54 (UTC)

subject 网站的页面访问量以及搜索引擎爬虫访问量的统计方法

统计页面访问量的方法有无数种,这里介绍我的“低级”方法:
1、当然是先用数据库建立一张访问统计表,每个需要统计的页面单独需要建一个字段,比如首页就用“index”。
2、区分是否是移动终端访问,这个其实是有难度的,不可能100%精确统计,我们就退而求其次,大概能统计到位就行,采用正则判断User Agent的方法:

$MOBILE=preg_match("/(android|mobi|phone)/i",$_SERVER['HTTP_USER_AGENT'])?true:false;

这个方法肯定不够精确,只能说大致够用,包含了"android"、"MOBI”、"mobile"、"phone"、"iphone”等关键字,基本OK吧。

3、定义需要统计的页面,用一个数组:
$botsArr=array(//常用搜索引擎爬虫识别
["baidu" ,"Baiduspider"],//百度爬虫
["google","Googlebot"],//谷歌爬虫
["bing" ,"bing"],//微软bing爬虫
["360" ,"360Spider"],//360搜索so.som爬虫
["sogou" ,"sogou"],//搜狗搜索爬虫
["yandex","yandex"],//yandex爬虫
["junkBot","(MJ12bot|AhrefsBot)"],//垃圾蜘蛛爬虫
["otherBot" ,"(bot|spider)"]//其它明确标志自己的爬虫
);
其中,每个数组下标0代表爬虫名字,下标1代表爬虫的USER_AGENT必须包含的关键字,基本做到了简单并且够用。

for($i=0;$i<count($botsArr);$i++){
if(preg_match("/".$botsArr[$i][1]."/i",$_SERVER['HTTP_USER_AGENT'])){
$isBot=true;//是个爬虫
//执行sql,数据库插入统计记录;
...
$i++;
break;
}
}


再定义一个数组,包含所有需要统计的页面文件名称:
$statItem=array("文件名1","文件名2",...);

if(in_array($filename,$statItem)){
//执行SQL语句
//数据库插入统计记录
}

by: fanshome  visibility 1018
2023-05-23 15:54 (UTC)

Demo subject 几种CSS字体描边和阴影效果

基本方法:
1、-weblit-text-strok:字体描边,非标准方法,浏览器兼容性存在一些问题。好处是这种方法不扩展字体本身,属于在字体内部描出边界,所以字体完全不走样。
2、text-shadow:字体阴影,符合标准规范,现代浏览器普遍支持。重点:可以用重复多次不同偏移量阴影来实现描边效果。但是假如用这种方法来做纯包围式描边(不模糊blur)的话,效果不完美,如果描边宽度比较大的话,斜边的尖角部分会出现“锯齿、缺角”等。

语法:{text-shadow: h-shadow v-shadow blur color;}
4个参数分别表示:水平偏移、垂直偏移、模糊(扩散)、描边的颜色。

我们可以根据实际需要选择,效果如下图:
[img]

by: fanshome  visibility 1892
2023-05-29 14:57 (UTC)