web前端

视频标签 video的一些特殊属性详解

HTML5标签video在PC上显示很简单,就一个标签加资源,很少需要关心其它属性。但放到移动设备上,video的标准,Android和iOS有很多区别,另外还有很多各家浏览器特定的属性,本文详细讲了video在移动端的实践。 原文:视频H5 video标签最佳实践 随着 4G 的普遍以及 WiFi 的广泛使用,手机上的网速已经足够稳定和高速,以视频为主的 HTML5 也越来越普遍了,相比帧动画,视频的表现更加丰富,这里介绍一些实践经验。…

    

Web页面子资源完整性校验详细指南

Web页面子资源完整性校验详细指南

cover

时间过得好快,距离上一篇文章动手写一个简单的编译器:在JavaScript中使用Swift的尾闭包语法发布已经过去快半年了,这半年时间也一直在想着按时更新文章;但是因为工作和生活的琐事,没有能够坚持下来。有点惭愧,感觉之前年初立下的计划快要实现不了了。希望接下来的这一段时间能够坚持更新文章吧。…

11s到⚡1s,性能优化之首屏加载

全文共6511字/词,阅读大概需要13分钟,太长不看党请直接移步「开始优化」部分直接查看优化手段

背景

前段时间公司服务器网络波动,网站访问变慢,一些性能问题也随之暴露了出来。纷纷反馈在这样的弱网条件下,访问新项目时,加载了近1分钟都没加载出来,而访问其他页面顶多也就30-40s。

在网络恢复后,尝试访问了下页面,无缓存首次打开需要等待近11s的时间,最大的资源达到了3.7M...

在对项目做了一些优化处理后,再次无缓存打开可以发现网页几乎是秒开,平均耗时在1s以内

在这里总结记录一下,基本上都是一些常规可复制的优化手段,希望能为同样想优化网页性能的你提供思路~

优化效果

Network

Slow3G条件下22-25s加载完成

lighthouse

hiper

关于性能优化

在开始之前,我们需要明白一个原则:性能优化的最终目的是提升用户体验
简而言之就是让用户感觉这个网站很「快」(至少不慢hh),这里的「快」有两种,一种是「真的快」一种是「觉得快」

  • 「真的快」:可以客观衡量的指标,像网页访问时间、交互响应时间、跳转页面时间
  • 「觉得快」:用户主观感知的性能,通过视觉引导等手段转移用户对等待时间的关注

做好这两方面都能提升用户对网站的性能评价。

权衡取舍

另外就是软件工程没有银弹,一种优化方案可能适用于大多数项目,但是某些特殊情况下很可能会起反效果。

举个,由于浏览器有单域名下并发请求限制,通常我们会将依赖统一打成一个vendor包(vue-cli默认策略),减少首屏请求数,且依赖不变动的情况下文件指纹不变,可以有效利用304缓存。在依赖不多的情况这么处理确实有助于提升加载速度,但一旦依赖多起来,vendor就会特别的大,在弱网条件下,会严重拖慢页面显示。这显然不是我们想要的,所以我们根据情况会对vendor进行拆分,比如拆分到CDN,或者直接拆分到页面中

因此,我们在做性能优化过程中,必须根据最终能给用户体验带来的提升权衡后做出适合当前项目的选择

指标和目标

目标会影响我们在过程中的决策
指标则用来度量我们的目标

目标

首先我们需要确定目标,根据场景和项目复杂度不同,制定的目标也不同,比如希望比竞品快20%,或者符合标准的"2-5-10"原则等等

这里我定下的目标是

  • 正常网速下,2s内加载完成
  • 弱网下,30s内加载完成

指标

关于指标这块,简单介绍下常见指标

  • FCP(First
    

谈一谈对 TailwindCSS 的看法

作者:山月
链接:https://www.zhihu.com/question/337939566/answer/1752928891
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

谈一谈对 TailwindCSS 的看法

NPM.DEVTOOL 的标签中可以看出: 每个月 npm 下载量高达 300 万次,jsDelivr 下载量更是高达 900 万次,Star 数也即将突破 38K,依赖于它的 Packge 及 Github Repo 更是成千,足见其受欢迎程度。然而你需要使用它时,Node 的版本最好大于 12.13.0

本人的 CSS 方案常用 TailwindCSS,在这里谈一点感受,并对一些常见的问题解答一下

TailwindCSS 因为一个 class 代表一个 CSS 属性这种原子化 CSS (Atomic

CSS框架:Tailwind的优缺点

Tailwind

Tailwind是一款utility-first的框架,可以被用于快速地构建UI。作为一个utility-based的CSS库,它比那些语义和精益标记(lean markup)更注重实用性和速度。在创建网站时,您只需要确定项目的范围,而无需自行编写CSS。虽然Tailwind并不提供默认的主题,您也找不到任何内置的UI组件,但是您可以使用预设计的部件菜单,来构建目标网站。

TailwindCSS 作者谈开发初衷

知乎问题:如何评价CSS框架TailwindCSS?

原文:CSS Utility Classes and "Separation of Concerns"

最近Tailwindcss频繁出现在我的视野里,从单词拼写中看,多多少少与css有点关系。近几年是JS框架大行其道,CSS方面少有新的框架出现。

昨天突然看到尤大神在Github上的动态,fork了该项目,看来马上要火的节奏啊!

图片

我们来看下这个tailwindcss究竟是个什么东西,有什么独特的功能和优势,最重要的是能否给我们开发者带来显而易见的效率的提升。

首先看官网对它的定义

Rapidly build modern websites without ever leaving your HTML.

tailwindcss 基于比组件更小、更灵活的工具类思想的 CSS 框架。这个思想简单来说就是用 class 保证灵活、便于自定义组件,而不是在组件基础上实现个性化。

图片

可以看到代码的特点是一个Html标签伴随着一堆的CSS类,这种写法好像也不陌生。就是将样式封装的粒度更细。所以很多人看到就说“这不就是原子类吗?”

作者有多年工作经验,其对待 CSS 的心路历程如下:…