xml地图|网站地图|网站标签 [设为首页] [加入收藏]
CSS镂空图片transition过渡初加载背景色块问题解决
分类:web前端

谈谈 Redux 与 Mobx 思想的适用场景

2017/03/11 · 基础技术 · mobx, Redux

本文作者: 伯乐在线 - ascoders 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

CSS镂空图片transition过渡初加载背景色块问题解决

2016/02/25 · CSS · transition

原文出处: 张鑫旭(@张鑫旭)   

一、从哪里说起呢…

数年前写过一篇很实用的文章,介绍了一个很有创意的技术:“CSS背景色镂空技术实际应用及进阶”,讲的图标图形为了更容易控制其颜色,对图片采用了镂空的处理。例如,下面这张图片(点击会有随机的背景色):
图片 1

于是,我们只要一套图片就可以实现各种颜色效果了!
图片 2

而不要类似下面这样,为了各种状态凑齐完整的葫芦七兄弟:
图片 3

除了节约图片资源大小,CSS镂空图片技术还有一个好处,就是由于我们的图标颜色是CSS属性控制的,因此,我们可以渐进使用transition实现过渡效果,让交互更细腻。

说到CSS控制图标颜色,我们自然而然会想到icon fonts, 或者使用SVG sprites技术,或者使用混合模式来实现。

然而,都是有不足的,比方说:
图片 4

SVG的兼容性以及混合模式的理解成本和环境限制等。

因此,转了一圈,会发现,有时候,还是图片来得最实在,且看下面demo实现的效果,虽然使用的是background-image实现的,但是hover态,selected态都和文字hover transition过渡,这是传统背景图片所没法实现的。

您可以狠狠地点击这里:镂空背景图片下的transition过渡效果

一行:

transition: background-color .25s;

1
transition: background-color .25s;

就可以让交互变得细腻!

图片 5

default, hover, selected三种颜色态仅仅一个系列图片就搞定(见下图),看上去很赞,赞到飞起来。

图片 6

然而,这种实现有一个致命的不足,就是CSS的加载和背景图片的加载不是同步的,尤其首次加载的时候,图片是异步的,具有明显的延迟,于是,我们会看到非常丑陋的色块在一瞬间出现了(大家可以强刷demo体验到)! 图片 7

图片 8

正所谓“开发可忍设计不可忍”,这种问题显然是非常严重的,直接导致此看上去很酷的方法濒临夭折的边缘,看上去只适用于默认隐藏的元素。

大家莫慌莫慌,有我在呢!

Web 安全之 XSS

2018/05/25 · JavaScript · 1 评论 · XSS

原文出处: 今日头条技术博客   

函数式 vs 面向对象

首先任何避开业务场景的技术选型都是耍流氓,我先耍一下流氓,首先函数式的优势,比如:

  1. 无副作用,可时间回溯,适合并发。
  2. 数据流变换处理很拿手,比如 rxjs。
  3. 对于复杂数据逻辑、科学计算维的开发和维护效率更高。

当然,连原子都是由带正电的原子核,与带负电的电子组成的,几乎任何事务都没有绝对的好坏,面向对象也存在很多优势,比如:

  1. javascript 的鸭子类型,表明它基于对象,不适合完全函数式表达。
  2. 数学思维和数据处理适合用函数式,技术是为业务服务的,而业务模型适合用面向对象。
  3. 业务开发和做研究不同,逻辑严谨的函数式相当完美,但别指望每个程序员都愿意消耗大量脑细胞解决日常业务问题。

二、base64 url图片与异步色块问题解决

这个很好理解,就是把背景图片转换成base64 url图片,因为是集成在CSS文件中的,因此,基本上是同时呈现,不会出现色块。然而,此方法局限性很明显,就是只适用于一些尺寸很小的小图。类似上面demo的背景图片,有5K多大小,直接内嵌在CSS文件中,就像是身体里长了个瘤子,太笨重了,而且base64渲染是比较烧性能的,图片越大越慢,且IE7浏览器很难支持base64图片。

因此,此方法在这里不适用,难道要天亡我也?非也!

什么是XSS

跨站脚本攻击(Cross Site Scripting),为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆,故将跨站脚本攻击缩写为XSS。恶意攻击者往Web页面里插入恶意Script代码,当用户浏览该页之时,嵌入其中Web里面的Script代码会被执行,从而达到恶意攻击用户的目的。

Redux vs Mobx

那么具体到这两种模型,又有一些特定的优缺点呈现出来,先谈谈 Redux 的优势:

  1. 数据流流动很自然,因为任何 dispatch 都会导致广播,需要依据对象引用是否变化来控制更新粒度。
  2. 如果充分利用时间回溯的特征,可以增强业务的可预测性与错误定位能力。
  3. 时间回溯代价很高,因为每次都要更新引用,除非增加代码复杂度,或使用 immutable。
  4. 时间回溯的另一个代价是 action 与 reducer 完全脱节,数据流过程需要自行脑补。原因是可回溯必然不能保证引用关系。
  5. 引入中间件,其实主要为了解决异步带来的副作用,业务逻辑或多或少参杂着 magic。
  6. 但是灵活利用中间件,可以通过约定完成许多复杂的工作。
  7. 对 typescript 支持困难。

Mobx:

  1. 数据流流动不自然,只有用到的数据才会引发绑定,局部精确更新,但免去了粒度控制烦恼。
  2. 没有时间回溯能力,因为数据只有一份引用。
  3. 自始至终一份引用,不需要 immutable,也没有复制对象的额外开销。
  4. 没有这样的烦恼,数据流动由函数调用一气呵成,便于调试。
  5. 业务开发不是脑力活,而是体力活,少一些 magic,多一些效率。
  6. 由于没有 magic,所以没有中间件机制,没法通过 magic 加快工作效率(这里 magic 是指 action 分发到 reducer 的过程)。
  7. 完美支持 typescript。

三、content url图片与异步色块问题解决

6年前,也就是10年的时候,我在“CSS content内容生成技术以及应用”一文中首次介绍了CSS content url图片内容生成技术,就是before, after伪元素可以直接插入图片,注意,是直接图片,不是元素的背景图,语法如下:

.demo:after { content: url(xxx.png); }

1
.demo:after { content: url(xxx.png); }

OK, 大家如果观察过页面图片的加载,应该注意到这么个现象,就是如果图片没有通过HTML属性或者CSS值限定width/height宽高的时候,在浏览器get到图片的原始尺寸之前,图片占据的空间大小是0. 我们如果刷新浪微博,会发现页面高度蹭蹭蹭地往上涨,就是这么个原因,这种不对图片限定尺寸的做法在网页布局中是不推荐的,因为,会造成页面布局重绘,影响加载性能。

但是,存在必有道理,在这里,我们就可以好好地利用图片为加载时候占据空间为0的特性避免出现色块的问题,怎么解决呢?就是把元素的background-image url值变成伪元素的content url值;同时background-position定位改成其他定位,如relative定位,如下代码示意:

.icon { width: 140px; height: 140px; background: #c8c8c8 url(icon.png) no-repeat 0 -140px; } ↓ .icon { /* 注意,只设高度不设宽度 */ height: 140px; background-color: #c8c8c8; overflow: hidden; } .icon:after { content: url(icon.png); position: relative; top: -140px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.icon {
    width: 140px; height: 140px;
    background: #c8c8c8 url(icon.png) no-repeat 0 -140px;
}
.icon {
    /* 注意,只设高度不设宽度 */
    height: 140px;
    background-color: #c8c8c8;
    overflow: hidden;
}
.icon:after {
    content: url(icon.png);
    position: relative;
    top: -140px;
}

上面绿色注释“只设高度不设宽度”点出了实现的关键:

页面渲染流程如下,1. CSS加载;2. 对应DOM渲染,背景色出现;3.拉取DOM样式对应背景图片。

传统实现就是从2到3的时候出现了问题,图片从服务器重新请求,导致了时间差,出现了色块。而我们这里的实现就不一样,当我们背景色出现,但是图片未加载的时候,由于我们的CSS没有设置元素的宽度,加上图片未加载占据宽度为0的特性,于是,在2完成3即将进行的时候,我们整个元素的高度140px, 宽度0,宽度是0啊!这意味着什么,意味着元素看不见啊,也即是虽然有背景色,无奈尺寸为0,我们是看不出有一丝丝背景色的;然后等图片请求到,自然就填满了元素,背景色也被遮掉了。没有了时间差,于是,完美解决了色块出现的问题!

图片 9

您可以狠狠地点击这里:content url生成的解决色块问题demo

IE7浏览器
什么年代了,还IE7浏览器,要是喜欢,可以使用expression表达式,或者直接JS打个补丁,小弟我现在对这些浏览器不奉陪了!

XSS的攻击场景

  • 反射型

    这类攻击方式主要借助URL来实施。URL的构成分为协议、域名、端口、路径、查询几部分构成。如图所示:

图片 10

  • XSS往往在“查询”部分发现漏洞构造攻击代码实施攻击,所谓“反射”可以理解为hacker并不会直接攻击客户,而是通过URL植入代码通过服务器获取并植入到用户页面完成攻击。攻击流程图如下:

图片 11

  • 存储型

    存储型攻击方式和反射型最大的区别就是不通过URL来传播,而是利用站点本身合法的存储结构,比如评论。任何用户都可以通过站点提供的接口提交评论内容,这些评论内容都被存储到服务器的数据库。当用户访问这些评论的时候,服务器从数据库提取内容插入到页面反馈给用户。如果评论内容本身是具备攻击性内容,用户无一幸免。攻击流程图如下:

图片 12

  • 从上下两个流程图来看,反射型和存储型的攻击方式是本质不同的,前者需要借助各种社交渠道传播具备攻击的URL来实施,后者通过网站本身的存储漏洞,攻击成本低很多,而且伤害力更大。

到底如何选择

从目前经验来看,我建议前端数据流不太复杂的情况,使用 Mobx,因为更加清晰,也便于维护;如果前端数据流极度复杂,建议谨慎使用 Redux,通过中间件减缓巨大业务复杂度,但还是要做到对开发人员尽量透明,如果可以建议使用 typescript 辅助。

打赏支持我写出更多好文章,谢谢!

打赏作者

四、结束语

我测试发现,时间差似乎就Chrome浏览器比较明显,另外后面的content url有一定几率会出现最后一个有色块的情况,按照道理应该不会的,现在太晚了,都2点了,我有时间在研究研究。

图片 13

相关文章

  • CSS背景色镂空技术实际应用及进阶 (0.695)
  • 未来必热:SVG Sprite技术介绍 (0.244)
  • IE6下png背景不透明问题的综合拓展 (0.225)
  • CSS3图标图形生成技术个人攻略 (0.225)
  • javascript HEX十六进制与RGB, HSL颜色的相互转换 (0.169)
  • SVG图标颜色文字般继承与填充 (0.169)
  • SVG-Morpheus实现SVG图标图形间的补形动画 (0.169)
  • CSS1-CSS3 颜色知识知多少? (0.169)
  • 伪类+js实现CSS3 media queries跨界准确判断 (0.136)
  • CSS content内容生成技术以及应用 (0.097)
  • 小tip: 某简单的字符重叠与图形生成 (RANDOM – 0.075)

    1 赞 2 收藏 评论

图片 14

XSS的工作原理

不管是反射型还是存储型,服务端都会将JavaScript当做文本处理,这些文本在服务端被整合进html文档中,在浏览器解析这些文本的过程也就是XSS被执行的时候。

从攻击到执行分为以下几步:

  1. 构造攻击代码
  2. 服务端提取并写入HTML
  3. 浏览器解析,XSS执行

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:CSS镂空图片transition过渡初加载背景色块问题解决

上一篇:没有了 下一篇:30分钟ES6从陌生到熟悉,大前端安全问题
猜你喜欢
热门排行
精彩图文