- 博客(47)
- 收藏
- 关注
RSS订阅原创 CSS background 属性
background-color与 background设置背景颜色的区别background-color设置的只是背景色，background设置的是整个背景。当元素本身设置了background-image属性时，如果设置了background-color，图片不会被覆盖，background-color会在image底层；如果设置的是background，那么图片会被颜色给覆盖掉。如下图所示，是分别设置了background-image和background-color的效果。如果设置的back
2020-11-07 16:05:55
306
原创 linux 定时执行curl请求
linux定时执行curl请求：1、在服务器某个目录下新建shell脚本文件：例如touch /data/cronTask.sh 新建.sh文件vim /data/cronTask.sh 编辑输入以下指令：curl ‘https://www.zhaodao88.com/message/webhook/send?code=2e0e2152-8c88-4096-8370-25204c87676b’ -H ‘Content-Type: application/json’ -d ‘{“msgtype”: “
2020-10-19 23:56:59
3783
原创 CSS position 定位
CSS positionCSS position属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。常用语法position: static | relative | absolute | sticky | fixed默认值：static，没有继承性。static: 表示指定元素使用正常的布局行为。此时 top, right, bottom, left 和 z-index 属性无效。relative: 相对定位的元素是在文档中的正
2020-10-18 00:32:08
207
原创 PWA的业务价值
渐进式WebApp，在很多公司的发展蓝图上，紧跟现代浏览器的脚步，以适应用户预期。像所有新的概念和技术功能一样，它们会产生问题：这是不是我的客户需要的？它会如何提升我的业务？技术可行性怎么样？为了制定一些数字化的战略，需要几个利益相关者参与：产品经理、CTO，UX调研人员。产品经理关心每一个功能的业务价值，CTO关心技术的可行性和可靠性，UX调研人员关心功能是否可以解决客户问题。这篇文章旨在回答以上三个人的问题，并构建PWA应用。你可以从你的客户需求开始，转换成PWA的功能，聚焦于衡量每一个功能带来的
2020-10-11 21:54:29
1481
2
原创 聊一聊CSS overflow
聊一聊CSS overflowoverflow定义内容溢出框的处理方法，主要有以下几个值：属性值描述visible默认值，元素的内容在元素框之外也可见hidden元素的内容会在边界处被裁减，超出裁剪区域的内容不可见clip完全禁止通过任何机制滚动，此时元素框不属于滚动容器scroll元素的内容会在边界处被裁减，并显示滚动条来适应内容auto如果内容被裁减，则会显示滚动条来适应内容overflow-x 和 overflow-y可以使用over
2020-09-15 01:08:56
142
原创 什么是PWA?
web是一个很神奇的平台，拥有跨设备和跨操作系统的兼容性，拥有以用户为中心的权限模型。它规范是由w3c和whatwg两个组织共同定制，它的实现则是交给各个浏览器厂商。再加上其固有的可连接性，用户可以随时随地搜索到，或者分享一个网页给任何人。不管何时访问网页，都是最新的。WebApp只需要一套代码，就可以触达任何人，任何地方，任何设备。原生App因为可靠而且丰富的功能而著称。它们会一直待在你的设备上，在屏幕、面板、或者任务栏里。通常，它们不依赖网络连接即可使用。它们以自己独立的体验启动。它们可以读写文件，通
2020-09-13 18:40:50
1264
原创 CSS 优化策略之webpack插件压缩CSS体积
CSS 优化策略之webpack插件压缩CSS体积对于CSS文件中包含的不必要的字符，例如注释、空白和缩进，我们可以在生产环境中将其删除，以达到减小文件大小的目的，这种技术也叫minification。而这些可以利用webpack构建工具进行实现。mini-css-extract-plugin提取CSS安装插件：npm install --save-dev mini-css-extract-pluginwebpack.config.js 配置 const MiniCssExtractPl
2020-09-06 00:08:53
1621
原创 离线WebApp之序章
PWA(Progressive Web App) 的概念相信很多人都不陌生，但真正去应用 PWA 的网站确是少之又少，而应用了 PWA 并不等于就是离线WebApp，很多网站虽然用了PWA，但也仅仅是为了加快网站打开速度，并没有完整的实现一个离线WebApp离线WebApp，顾名思义，即使断网也能够正常使用的网页，会有点难以想象，可以亲自体验一下：https://geek4.wuchen.org ，打开过一次之后（iOS的webview暂不支持离线，需要使用safari打开），再次打开不需要网络，使用上也
2020-09-02 00:30:04
153
原创 CSS 优化策略之延迟加载非关键CSS
CSS 优化策略之延迟加载非关键CSSCSS文件是render-blocking resources,必须在浏览器呈现页面之前加载和处理它们,包含不必要的大样式的网页需要更长的时间才能呈现。本文将介绍如何同步加载关键样式，而其他样式则以非阻塞方式加载。如何检测你的网站在Chrome上打开你的网页调出控制台选择 Performance 项在 Performance 页面点击 Reload 分析在分析结果中，浏览器需要等待所有CSS加载并得到处理，然后才能在屏幕上绘制一个像素。你可以通
2020-09-01 23:39:02
2252
原创 页面视觉稳定性之优化CLS
最常见的影响CLS的分数的有：未指定尺寸的图片未指定尺寸的广告、嵌入元素、iframe动态插入内容自定义字体（引发FOIT/FOUT）在更新DOM之前等待网络响应的操作未指定尺寸的图片总而言之：在 <img> 和 <video 标签上始终加上 width 和 height 属性。或者，使用 CSS aspect ratio boxes 来占据空间。这种方法可以确保在图片加载过程中，浏览器可以分配足够的空间。历史在web的早期，开发者会给 <img> 标签.
2020-08-30 23:52:54
1807
原创 CSS 高效优化策略之编写风格
CSS 高效优化策略之编写风格一般谈论到效率、性能问题，我们都很少想到CSS在请求回来之后，在浏览器进行CSS渲染的效率是怎样的。本文来介绍一下对于CSS的一些高效优化策略,可以提高我们页面的CSS渲染效率.从右到左值得注意的是,渲染引擎解析 CSS 选择器时是从右往左解析的,这样做是为了减少无效匹配次数，从而匹配快、性能更优。所以，我们在书写 CSS Selector 时，从右向左的 Selector Term 匹配节点越少越好。因此在编写CSS时就要避免深层次的DOM结构,还有一般不要超过3层的
2020-08-29 23:54:35
142
原创 Cookie之SameSite属性
Cookie之SameSite属性Chrome80之后更新了cookie的携带机制，把原来的SameSite属性，由None改成了Lax，这就导致了一些需要使用到第三方cookie的应用产生了异常。如果你这段时间有经常关注控制台的话，可能会发现一些warning:Cookie的SameStie属性用来限制第三方Cookie，从而减少安全风险（防止CSRF攻击）和用户追踪。具体如何使用cookie来防止CSRF攻击，可以参考使用站点Cookie属性防止CSRF攻击，里面基础地介绍了相关的知识。S
2020-08-27 16:17:20
1419
原创 js正则表达式复习总结-语法篇
关于正则表达式的方法属性分为两种，一个是RegExp对象方法，其中包含exec和test方法，另外一个是string对象方法，包含match，search，replace，split，这些string方法在原本的基础上还支持正则表达式，扩充了更为强大的能力。下面我将分别总结各个方法的特性和示例以供参考总结。RegExp对象属性global是否全文搜索，默认false。ignore case是否大小写敏感，默认是false。multiline多行搜索，默认值是false。lastIndex是当前表
2020-08-26 22:35:07
151
原创 CSS display的多种写法
CSS display的多种写法本文将介绍如何通过定义display属性创建一个 CSS formatting boxdisplay属性值先来看标准文档是怎么描述的吧从大的分类来讲，display可以分为6个大类:display-outside所谓display-outside，就是说这些值只会直接影响一个元素的外部表现，而不影响元素里面的儿子级孙子级元素的表现。display: block：定义最基本的block-leveldisplay: inline：定义最基本的的inline-l
2020-08-24 08:49:47
470
原创 页面视觉稳定性之CLS
你是否曾经在线读一篇文章的时候，页面上突然发生了一些改变？没有任何警告，文字移动了，你不知道读到那里了。或者更糟糕的，你准备点一个链接或者按钮，但就在你手指触摸到屏幕的前一秒，链接移动了，你点到了其他地方。大部分情况，这些体验只会引起你的反感，但有时候，会对你造成无法挽回的伤害。如上图，当你想要点击灰色按钮的时候，突然出现了一个提示，你将点击到蓝色按钮。预料之外的页面内容的移动经常发生，因为资源的异步加载，或者dom元素的动态添加。罪魁祸首有可能是未知尺寸的图片或者视频，或者字体文件（比默认字体大
2020-08-23 23:06:13
719
原创 交互响应性能之优化FID
由于 FID 需要一个真实用户的交互，所以无法用实验数据测试。为了在实验数据下预测 FID，通常会用 TBT(Total Blocking Time)，具体这个指标后面文章会介绍。他们测量的内容不同，但改善 TBT 通常也能改善 FID。一个糟糕的 FID 主要原因是JS执行过长，优化JS的解析、编译、执行可以直接降低 FID。过长的JS执行当JS执行过程中，浏览器无法响应用户交互，因为主线程被占用，为了改善这点，可以:分解长任务优化页面，为交互准备使用 Web Worker减少JS执行
2020-08-18 00:00:13
838
原创 js正则表达式复习总结（一）
前言正则表达式（ Regular expression）是一组由字母和符号组成的特殊文本, 它可以用来从文本中找出满足你想要的格式的句子,是用于匹配字符串中字符组合的模式。正则表达式的强大之处在于在几乎所有语言中都可以使用，所以我们更要学好它。后面将会从基本语法，到被用于正则表达式的 exec 和 test 方法, 以及 String 的 match、matchAll、replace、search 和 split 方法，以及正则进阶知识点来复习总结积累。1.如何创建一个正则表达式使用一个正则表达式字
2020-08-15 22:34:50
210
原创 CSS的inline、inline-block
CSS inline、inline-block本文将介绍内联布局中，内容的布局方式及相关原理。inline box 与 line box对于行框、内联框，标准文档中有个很经典的图。附上自己的一段代码，方便理解。<div style="width: 200px; margin: auto;"> 这是一段代码，又长又好看的代码。 <span style="color: red">这是inline box</span> 这又是一段代码，又长又好看的代码。&l
2020-08-15 21:57:34
388
原创 交互响应性能之FID
众所周知，第一印象很重要，不仅是在与人交流上，在构建web体验的时候也是如此。在web上，一个好的第一印象是决定用户去留的关键。那么问题来了，怎样才能留下好的第一印象，怎样测试你的网站给用户留下的第一印象？在web上，第一印象也分很多方面：站点设计、视觉体验、速度和响应。很难用API去测试一个网站的设计和视觉，但却可以测试速度和响应。测试你的站点给用户的第一印象加载多快，可以通过 FCP 的指标。但在屏幕上绘制像素仅仅是这个故事的一部分，同样重要的，还有你的网站对用户的交互响应有多快。FID(Fi
2020-08-13 00:25:21
944
原创 页面加载性能之优化LCP
影响LCP的四个因素如下:较慢的服务器响应时间渲染阻塞的js和css较慢的资源加载时间客户端渲染较慢的服务器响应时间浏览器获取文档的时间越长，用户看到页面的时间也会越长。较快的服务器响应时间，可以直接改善每一个页面加载相关的指标，包括LCP。可以使用 TTFB(Time to First Byte) 来测试服务器响应时间，你可以通过以下手段来优化 TTFB 这个指标。优化服务器使用CDN缓存资源html页面优先使用缓存提前建立第三方连接优化服务器你是否在服务器上运行一些昂
2020-08-10 00:23:30
2808
原创 页面加载性能之LCP
LCP (Largest Contentful Paint) 是一个以用户为中心的性能指标，可以测试用户感知到的页面加载速度，因为当页面主要内容可能加载完成的时候，它记录下了这个时间点。一个快速的LCP，可以让用户感受到这个页面的可用性。以往，对开发者而言，要测试一个页面主要内容加载并呈现给用户的速度是一个很大的挑战。旧指标，像 load 和 DOMContentLoaded 并不是很好，因为它不一定跟用户屏幕上看到的内容相对应。然而新的以用户为中心的指标，比如 FCP (First Contentfu
2020-08-08 23:48:10
2754
1
原创 iphoneX设计网站适配
为iphoneX设计网站适配几乎所有的前端开发者都会接触到为iphoneX设计H5网页，其中就得为其特有的安全区域做出适配，以便优化用户体验。安全区域布局参考线定义了矩形区域，这些区域实际上不会出现在屏幕上，但有助于内容的定位、对齐和间距。这块区域就是安全区域，安全区域还可以防止内容在状态栏、导航栏、工具栏和选项卡栏的下方重叠，如下图蓝色区域：Safari 原生网页Safari在新款iPhone X已经很好地适配了安全区域，你的H5网页在Safari打开是会在安全区域内的。如果你想要在Safar
2020-08-08 00:36:43
1593
2
原创 CSS 媒体查询any-hover any-pointer
CSS 媒体查询媒体查询为不同设备之间做样式的适配提供了很好的解决方式，也能够提供一些识别不同设备的方式。常规使用媒体查询可以有以下三种使用方式：1、 <link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css">2、 @import url(example.css) screen and (color);3、 @media screen { * { font-family: sans
2020-08-05 23:50:39
327
原创 页面加载性能之Web Vitals
Web Vitals是Google的一项重大举措，旨在为质量信号提供统一的指导，这对于在Web上提供出色的用户体验来说很重要。网站的开发者需要了解自己的网站给用户带来的体验，但不一定要成为性能优化的专家。Web Vitals旨在简化流程，并帮助网站开发者聚焦在核心性能指标上，也称为Core Web Vitals。Core Web VitalsCore Web Vitals是Web Vitals的一个子集，适用于所有网页，应该被所有开发者去进行测量，也将在所有Google提供的工具中浮现。每一个Core
2020-08-03 22:50:04
12701
原创 常见的Web安全攻防（一）
前言XSS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript，但实际上也可以包括Java、 VBScript、ActiveX、 Flash 或者甚至是普通的HTML。攻击成功后，攻击者可能得到包括但不限于更高的权限（如执行一些操作）、私密网页内容、会话和cookie等各种内容。一、XSSXSS (Cross-Site Scripting)，跨站脚本攻击，因为缩写和CSS一样，所以就只能
2020-08-03 12:02:13
720
原创 常见的Web安全攻防（二）
前言XSS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript，但实际上也可以包括Java、 VBScript、ActiveX、 Flash 或者甚至是普通的HTML。攻击成功后，攻击者可能得到包括但不限于更高的权限（如执行一些操作）、私密网页内容、会话和cookie等各种内容。一、XSSXSS (Cross-Site Scripting)，跨站脚本攻击，因为缩写和CSS一样，所以就只能
2020-08-03 11:15:03
210
原创 页面加载性能之常见的性能指标
我们已经知道性能的重要性，但当我们讨论性能的时候，让一个网页变得跟快，具体是指哪些？事实上性能是相对的:一个网站可能一个用户感觉很快，但对其他用户感觉很慢两个网站的loading结束时间是一样的，但其中一个你感觉比另一个要快一个网站加载的很快，但页面长时间不可交互所以在讨论性能的时候，精确的、可量化的指标很重要。虽然说某一个指标可能是客观的，可量化的，但对我们实际去评价性能可能没什么帮助。定义指标以往，开发者都通过 load 事件来衡量性能。load 是页面生命周期中的明确的时刻，但这个
2020-08-02 22:53:06
2014
原创 页面加载性能之禁用document.write
如果你在控制台看到了以下信息，那么这篇文章对你而言应该会有帮助:(index):34 A Parser-blocking, cross-origin script,https://paul.kinlan.me/ad-inject.js, is invoked via document.write().This may be blocked by the browser if the device has poor network connectivity.对于现在的web的开发者而言，docume
2020-07-30 22:41:06
1508
原创 页面加载性能之SPOF
SPOF的简单示例只是在页面上添加一个脚本或者一个样式，也许就会让大部分用户无法正常使用。比起考虑CSS错误或者JS报错的情况，核心问题在于如果这个新添加的资源文件超时，会发生什么？有了这个线索，我们可以构建一个测试用例:<html><head><script src="http://www.snippet.com/main.js" type="text/javascript"> </script></head><body&g
2020-07-30 00:06:49
315
原创 页面加载性能之PRPL模式
PRPL是一种让网页加载变得可交互、更快速的模式，包含以下四个:Push (或者 preload): 给用户推送最重要的资源Render: 尽快的渲染最初始的路由Pre-cache: 提前缓存剩余的资源Lazy load: 懒加载其他路由或者次要资源本文我们将学习这些技术的综合运用，当然也可以单独使用。预加载重要资源 (Preload)Preload 是一个声明性质的fetch request，告知浏览器要尽可能快的请求到该资源。可以通过以下方式预加载重要资源，使用 <link>
2020-07-27 23:05:19
619
原创 页面加载性能之video替换GIF
当我们的网站需要一张动态图的时候，大部分人脑海中第一印象是GIF，当然也有会想到CSS3，通过设置逐帧动画来实现，不过这样的动画在用户的眼里还是不够流畅，所以一般开发还是会选择GIF，但GIF本身过大，如下图：这是加载性能的其中一项，我们可以简单几个步骤就能让性能得到很大的提升，通过将GIF转换成video，就能省去很大的带宽。首先是检测Lighthouse 是我们的最常用的检测手段，如果你的页面出现了这类GIF，检测报告会告知你建议的优化项，如下：创建MPEG格式video有不少方法可以将G
2020-07-25 21:41:24
383
原创 页面加载性能之WebP在项目中的应用
项目中的静态图片，一般有两种使用方式：HTML中的 <img> 标签CSS中的 background-image 属性尽可能的使用CSS的方式去加载图片，当然如果你依赖图片本身的宽高等比缩放的特性，还是使HTML的方式。框架本文将以vue-cli 3.0脚手架搭建的项目为例。转换工具我们选择的是 Imagemin，版本选择6.1.0，因为7.0.0之后的版本在windows上有兼容性问题，目前还未修复。npm install imagemin@6.1.0 --save-dev
2020-07-25 01:00:03
442
转载 页面加载性能之使用图片CDN
什么是图片CDN？与传统CDN的区别在于，它是专门为图片做优化的，通常包含缩放、格式转换等。你可以把它看成是一个API，通过传入尺寸、质量、格式等参数，获取到对应的图片内容。这也使得我们在使用上非常方便，适用于多种不同的场景。图片CDN不同于构建脚本，它不需要提前创建出多种不同格式的图片。和构建脚本相比，图片CDN更适合大量的图片场景，而非固定数量的图片，比如你的站点是为摄影爱好者服务，用户上传的图片，就可以使用图片CDN了。图片CDN的通用URL格式不同的图片CDN会有不同的URL格式，但其基本
2020-07-23 23:13:54
3965
原创 CSS 列表模型之counter计数器
CSS 列表模型之counter计数器计数器是一种特殊的数字跟踪器，通常用于为CSS列表项自动编号。你可以在项目中通过counter-increment、counter-set、counter-reset来创建一个计数器，并在counter()/counters()中使用。在CSS语法中，需要定义一个counter-name作为计数器的唯一标识，这是必不可少的。解析计数器一般有以下几个步骤：当前计数器从父元素继承而来，遵循父元素的计数规则通过counter-reset实例化一个新的计数器通过
2020-07-23 08:25:13
518
转载 页面加载性能之使用正确的图片尺寸
我们总是会忘记缩小图片尺寸，直接应用到项目中。这种图片看上去很正常，但实际上既浪费了用户的流量，也影响了页面性能。找出不正确尺寸的图片Lighthouse是首选，执行一下Performance Audit，根据结果可以找到需要调整尺寸的图片列表。确定正确的图片尺寸此处提供了2种策略：上策和下策。两者都能提升性能，上策需要多花时间去理解和实施，但带来的体验和性能的提升是非常明显的。下策则是可以很快实施的方案。稍微了解下CSS的单位CSS给HTML元素的尺寸定义了两类单位：绝对单位: 在所有设备
2020-07-22 23:14:15
403
原创 CSS 列表模型之marker标记
CSS 列表模型之marker标记本文主要对::master伪元素、list-item下的list-style-image、list-style-type样式属性进行介绍，并介绍了在实际中如何使用。list-item下还有其他不常用的样式属性这里不做介绍。感兴趣的可以自行移步CSS 标准文档::marker 是什么::marker是一个标记伪元素，能够定义内容填充在list-item上代表列表项的标志，先附上一个例子，就能很清楚地看出它的作用。<style>li::marker {
2020-07-22 22:35:54
4814
转载 页面加载性能之使用WebP图片
为什么选择webp图片？WebP比同等质量的JPEG和PNG都要小，一般能减少25%-35%的文件大小，能有效的提升加载性能。YouTube自从使用WebP之后，页面加载速度提升了10%Facebook自从使用WebP之后，JPEG的存储减小了25%-35%，PNG的存储减小了80%WebP是一种绝佳的方式来替代JPEG、PNG和GIF。而且WebP同时支持无损和有损压缩。无损压缩保证质量不降低，有损压缩则可以极大减少文件体积，但相应的质量会降低。把图片转换成WebP一般有两种方式：cweb
2020-07-22 00:02:25
979
转载 页面加载性能之选择正确的图片格式
首先要问一个问题，加载这一张图片是不是达到了你追求的效果？好的设计往往是追求简单，保持最好的性能。对于一个要加载很多资源的页面来说，如果能去掉一个图片资源，对性能的提升是很直观的。当然，有的图片胜过千言万语，是否使用图片还是取决于你自己。然后你要考虑的是，现有的技术是不是可以用更高效的方式满足你的要求。CSS效果（如阴影、渐变），以及CSS动画，是否可以创造出你想要的效果，用以取代图片。优点是：放大无损，体积小。自定义字体 可以让你使用一些很漂亮的字体，同时还能支持选中、搜索、改变字体大小，可用性更
2020-07-20 22:55:25
309
转载 页面加载性能之Lie-Fi
当你的设备处于有网络的情况下，访问网页、打开App都很顺畅，可以随时获取到你想要的信息。但有时候你还是会处于断网的状态，为了让App或者网站能在离线状态下使用，我们经常会把一些数据存在设备本地，这样用户依然可以体验良好。介于 online 和 offline 之间，有这么一种状态: Lie-Fi。Lie-Fi 中文可以翻译成欺骗性网络，你的设备确实连上了无线网，但你依然不能打开网页，相信不少开发者被自己的领导这样吐槽过：“我们网站怎么打不开了，我wifi都连着呢”。试想一下你的领导现在处于办公室的封闭
2020-07-19 22:31:15
208
1
转载 页面加载性能之感知真实世界
虽然我们可以通过开发者工具以及lighthouse等工具来查看网站的加载情况，并按之前我们说的那些方案做好了优化，但真正用户打开是否真的如预期一般快，我们不得而知。一直以来我们都以实验室数据为测试的依据，这些不能代表现场数据，即真实用户的体验。RUM（Real User Monitoring）因此而诞生。RUM依赖于浏览器提供的API来搜集真实用户的性能数据，主要包含2个标准文档，Navigation Timing API 和 Resource Timing API，这两个API都是基于 High Res
2020-07-18 23:52:20
587
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人