CSS揭秘

原版《CSS Secrets》是由 LEA VEROU 编写,主要介绍网页设计中比较经典的 CSS 实现方案及编写技巧。中文版由“CSS 魔法”翻译,在阅读过程中个人感觉翻译的还是很到位的,这里点个赞。 CSS Secrets: Better Solutions to Everyday Web Design Problems 这篇文章是对《CSS 揭秘》一书的总结,以思维导图的方式将书中脉络梳理出来,在过一遍书中知识点时做到查漏补缺。另外,通过一次梳理就记住 CSS…

关于linear-gradient()你需要知道的事儿

是一个 CSS 函数,它能创建一个在多个颜色之间根据已知路径进行线性渐变的 图片 。没错, 是 类型的 图片,因此渐变函数无法应用于 的场景,比如:background-color。 此外, 没有内在维度、尺寸或者比例,它的具体尺寸将和对应元素尺寸匹配,如果希望创建能重复渐变的特性,可以使用 函数。 线性渐变是如何合成的? 我们需要清楚的一点是, linear-gradient 是一个 css…

关于Module

CommonJS 和 AMD 模块都只能 在运行时 才能确定模块导出的 对象 。因此运行时才能得到整个对象,也就无法做到静态优化。而 ES6 从语法层面支持模块功能,其设计初衷就是就是尽量的静态化,使得代码在编译时就能确定模块的依赖关系。 ES6 关于 Module 的介绍参考阮一峰的 ES6 教程: ECMAScript 6 入门-Module 的语法 。下面是平时用到比较少的部分,使用时应该注意的地方。 ES6 模块使用时的注意点 模块转发时,当前模块不能使用转发的变量 default…

关于class

这篇文章总结 class 相关,并辐射出周边需要了解的知识点,便于形成巩固自己的心理表征。 如何编写一个类? 在 ES6 还没出来之前,前端在编写 class 时,相比去其他设计成熟的语言会显得很诡异,比如使用 JS 原生的方式实现一个类继承,这个我在之前的文章中有说明。 第六章 面相对象的程序设计(简单实现一个最理想的继承范式?) 第六章 面相对象的程序设计(new 操作符执行的过程?) 下面是 UML 说明: 传统的基于原型的实现: ES6 出来之后,关于 class…

刻意练习

书中的训练方法自己还在上学期间就在大脑中有些印象,比如归纳总结找出共同点或者规律,便于以后相同问题能快速解决等。但是,我把“刻意练习”的方法使用的比较局限。我觉得在生活的方方面面都能刻意的使用“刻意练习”的方法来做,而不只是爱好或者工作。 下面是我的读书总结,希望能对你有用:

如何高效阅读

在读这本书的同时也是在进行高效阅读的实践,因为我性子比较急,做事强调结果,有很强的目的性。这样的性格特点和书中的一些观点结论不谋而合,下面进行总结回顾。 读书目的 带着目的或者问题看书,重点部分只占 2…

CSS新世界

本书是著名博主张鑫旭的呕心沥血之作,涵盖了 CSS2.1 版本需要注意和知道的常用知识,我这里在看书总结时对以往不太清楚的地方做个深入整理,理清自己的知识体系树。 知识应该成体系 才能方便我们日后工作中对内部信息进行快速检索,所以我在看这本书的同时会画一些结构树(思维导图),以便让我能更深入的理解 CSS 中的一些 “怪异、特殊” 的行为。 需要重点说明的是 :本书是对 CSS2.1 的介绍与总结,最新的 CSS3 的内容需要从别的地方获取资料学习。 前言 了解“流” HTML+CSS…

如何处理滚动优化

解决题述的问题需要清楚用户在滑动页面时,Chrome 在背后的工作过程,了解了工作过程解题就会水到渠成。 基础:Chrome 线程化渲染框架 之前提到过这样的一个浏览器渲染线性流程,这里简单说下: 在传统浏览器中,主线程的执行是 单线程渲染模式 ,JS 执行及页面布局渲染在一个线程中串行执行(根据修改的 CSS 元素不同会跳过部分执行阶段)。为了保证 UI 流畅需要每一帧上述的处理时间小于 10ms。 为了优化上述过程,Chrome 浏览器内核对 Composite…

CSSConf 总结

PDF 下载地址: CSSConf.pdf 这个 Slides 是参加 CSS 大会的总结,因为要对小伙伴们分享,因此这个总结会比较“大”。是的,我搜集了 四届 的大会报告做了总结,引用的文章在每个 Slide 的页脚。 所谓 一通百通 ,我希望这个 Slides 能帮到你理清 CSS 的脉络! BigMap 根据我搜集的 21 个报告做的如下分类。根据 CSS 展开,包括:组件库中 CSS 的位置、响应式、CSS 编译器、动画及性能、CSS…

SSR相关

1. 什么是 SSR?什么情况下需要使用 SSR? SSR(Server Side Render) 服务端渲染 ,这里主要是为了解决 SPA 应用首屏 加载缓慢、白屏 的问题。用户在访问 SPA 应用时,服务端(Nodejs)先获取页面需要的数据 生成 HTML 字符串 传递给客户端用于首屏显示,随后再加载其余资源进行 渲染结果比对 和 后渲染 流程。 2. 传统 SPA 渲染过程和 SSR 渲染过程有何不同? 下面是两种方式的时序图: 客户端渲染 服务端渲染 注意: SSR…