前端开发实习生培养体系的探索:前端开发实习生织梦计划

前端开发实习生培养体系的探索:前端开发实习生织梦计划 v 0.1.0

谨以此名称『织梦』致敬 15 年前在初中第一次接触“前端”时用的编辑器: Dreamweaver

前言:

由于意识到目前的前端团队趋于稳定,可以适当加入一些实习生为团队注入活力。于是这段时间主动积累了一些相关经验,决定就前端技术团队的实习生培养这一主题,进行概念梳理以及雏形规划,顺便文末整理了一些优质学习资料和学习社群。另外,受限于 XX 的前端水平只有中级左右,文中对知识体系的整理可能不够深入和全面,也欢迎大家提提建议!

XX 的价值观 —— 80%+ 完美主义:当意识到重要性的时候,就应该充分利用已有资源,做到当前迭代的最好状态,或者至少是最好状态的 80%

强烈推荐: 姬光大佬的 gitchat《怎样实习才能成长最快》,非常感谢姬光大佬的这篇文章

注意:

此版本未经过任何实践!有待验证,仅供参考。

此版本未经过任何实践!有待验证,仅供参考。

此版本未经过任何实践!有待验证,仅供参考。

设定

定位(角色)、要求(输入)、愿景(输出)

以某 MMORPG 游戏为参考系,结合实习生系统(实习荣耀??),分别描述主要角色的定位、要求(输入)、愿景(输出)

尝试站在不同角色,不同角度思考各种问题,并简要概括

公司

定位:游戏世界

要求:

  • 实习薪资、下午茶(补给、金币、回血、回蓝)
  • 提供办公设备(游戏装备)
  • 公司氛围(buff、赠送 VIP 会员)
  • 公司文化(mutation @elona)
  • 公司理念、愿景(我司:减法新生活~)

愿景:

  • 实习生 => 公司
    • 树立、传播公司良好形象
    • 公司文化的传承
  • 公司 => 实习生
    • 公司文化的影响
    • 物质

业务

定位:游戏任务

要求:

  • 安排合适的业务任务(游戏主线任务)
  • 鼓励发现、提出业务问题(游戏支线任务)

愿景:

  • 实习生 => 业务
    • 提出业务的改进意见
    • 不强求解决业务问题,但如果能,再好不过。
  • 业务 => 实习生
    • 了解公司业务

团队

定位:NPCs、可爱的小姐姐们、帅气的大叔们(雾

要求:

  • 交流(提供任务线索)
  • 知识点、概念指点(buff、治疗)
  • 学习方向引导(buff、T)

愿景:

  • 实习生 => 团队
    • 沉淀团队技术、整理文档(经验包)
    • 储备新鲜血液、给团队注入活力(欢迎新 dalao……)
    • 打造技术学习小社区(战队、公会)
  • 团队 => 实习生
    • 熟悉团队开发模式(通用技能)
    • 团队技术知识库 wiki(各类技能书、经验包)

导师

定位:新手村村民(头上带问号的?王者农药主界面右下角的妲己?)

要求:

  • 理性维度
    • 技术指导、方法指导(讲清楚的程度、通通透透)
    • 善于观察(了解实习生的长处与短板)
    • 客观评估:对事不对人
    • 代价:额外占用时间(蛤?-1s)
  • 感性维度
    • 真诚待人
    • 认真负责
    • 谦虚谨慎
    • 乐于助人
    • 充分沟通
    • 忍耐能力

愿景:

  • 实习生 => 导师:
    • 成就感
    • 教学相长:基础知识梳理、深入理解、剖析、总结(经验包)
    • 沟通能力(带团能力)
    • 团队贡献积分(DKP)
  • 导师 => 实习生
    • 个人成长
      • 知识、技能(经验、技能)
      • 学习方向、职业规划(职业进阶路线)
    • 人脉(游戏好友)
    • 激励(buff)
    • 评估(战斗力估算?游戏解说???)

实习生

XX 注:人无完人,对于小公司而言,千里马难觅。要善于挖掘实习生的亮点,借助团队这个小社区引导实习生各方面成长。

定位:勇者

要求:

  • 理性维度 (能力 ability)
    • 学习能力
      • 知识记录、梳理、总结、抽象
      • 学习方法
      • 学习态度
    • 解决问题能力
      • 提问技巧
      • 思考、针对性练习、反思
    • 自我管理 & 效率
      • 碎片时间
      • 专注
      • 能量管理
    • 业务能力
      • 负责、谨慎、细心
  • 感性维度(特质 traits)
    • 心态、自信、耐心、不浮躁
    • 认真、积极、主动
    • 沟通能力
    • 友善、虚心、正直

愿景:

  • 实习生 A => 实习生 B
    • 竞争(排行榜)
    • 协作(队友、基友)
  • 实习生 A <=> 实习生 A
    • 个人成长(经验、技能、职业进阶选择)
    • 个人经历(成就、称号)

监督人

定位:新手村村长(隐藏 BOSS?大龙???)

要求:

  • 理性维度
    • 中立、客观
    • 观察力
  • 感性维度
    • 包容但不偏袒

愿景

  • ???

方案

总共招 1~2 个实习生

人员安排

1 监督人: XX 1 导师:老员工(2 年+经验) 1~2 实习生

实习生任务列表

师傅领进门,修行靠个人

注:实际安排的任务因人而异,可选择性增加或加强……:)

任务标准:SMART 任务 + 主动汇报

  • 主动汇报
    • 每日日报:产出(工作内容)、收获(知识)
      • 主动、认真
      • 审视、自省、回顾
      • 规范
    • 每周周报
      • 一周总结
  • SMART 任务
    • 【SMART】
  • 隐藏任务
    • GitHub
      • 鼓励分享、鼓励创新

任务内容

  • 个人成长线(高经验值主线)
    • 综合
      • 【SMART】博客文章(每周一篇)
      • 优秀源码学习
        • Bootstrap
        • jQuery
        • Element UI
        • Vue.js、lodash
    • 实践
      • 学习型项目
        • 【SMART】phodal growth 系列
        • 【SMART】导师自定义任务
    • 理论
      • 通用技能
        • 《暗时间》
        • 《On Managing Yourself 自我发现与重塑》
        • ……
      • 专业技能
        • 相关工具
        • 推荐书单
        • 编程基础
          • 软件构建
            • 《代码大全 2》
          • 算法
            • 【SMART】leetcode 刷题
          • 设计模式
            • 《Head First 设计模式》
          • 编码规范
            • 迭代 wiki 的“编码规范”
        • 前端理论
          • HTML、CSS、Javascript
            • 《CSS 揭秘》、《Javascript 高级程序设计》
            • 【SMART】freecodecamp、codewar 练习题
            • MDN 文档
          • Vue.js
            • Vue.js 官方文档
          • 前端工程、组件化、前端服务化
      • 前端应用
        • 团队相关
        • 业务相关项目
          • 根据实习生实际情况,安排合适的任务量、任务复杂度
  • 团队贡献线(高 DKP 支线)
    • 综合
      • 协作
        • 与前端
        • 与后端
        • 与测试
        • 与设计师
        • 与产品
    • 理论
      • 更新团队知识库 wiki
        • 维护团队插件、组件说明文档
        • 经验分享、bug 记录……
      • 撰写团队技术博客文章
      • 参与每周前端组周会
    • 实践
      • 学习型项目(团队 wiki 站点、团队技术博客站点维护迭代等)
  • 业务线(高 DKP 支线)
    • 综合
      • 发现、提出业务问题,尝试解决
    • 实践
      • 【SMART】解决导师布置的业务需求
    • 理论
      • 梳理业务流程图
      • 梳理网站功能

导师任务列表

  • 传道
    • 前端的 what、why、how
    • 开阔技术视野
    • 解决问题的套路
    • 愿景(vision)
  • 授业
    • 介绍团队
    • 工作流程
    • 学习方法
    • 文档说明
    • 安排工作
  • 解惑
    • 告知所以然
    • (若导师无法解答,很正常,毕竟闻道有先后、术业有专攻。重点在于)
  • 评估
    • 认真审查实习生的 ① 日报 ② 周报 ③ 文档、代码、文章并积极、客观反馈
    • 定期与实习生交流
      • 主动挖掘实习生存在的问题,予以引导
      • 主动挖掘实习生的长处,并加以培养
  • 激励
    • 适当的团队活动
    • 正面引导
    • 不要吝啬表扬
  • 负责
    • 对实习生的代码负责
      • Code Review
      • 追踪代码质量、产品上线后的质量
      • 跟踪项目进度,把控风险
    • 对实习生负责
      • 真诚
      • 正面引导
    • 对自己负责
      • 不断提升自己的姿势水平
      • 共同成长

举例

背景

1 个本科大三暑期实习生,2 个月的工作时长,每周来 4 天。

已知

  • 实习生
    • 协作 专业能力 无工作经历
    • 专业能力 能使用 jQuery 较为熟练地写带有简单交互的静态页面
    • 专业能力 只照官网写过 Vue.js demo,没有写过具体项目
    • 协作 代码不规范
    • 专业能力 会一些 PHP
    • 通用能力 性格偏外向、求知欲强、不够细心、略微有点浮躁
  • 任务痛点
    • 团队 团队编码规范不完善、未统一
    • 团队 团队的知识库不完善
      • 缺少组件库说明文档(Vue.js 组件库,总共约 20 个 UI 组件)
      • 缺少公共方法说明文档
    • 团队 项目代码注释不完善
    • 业务 偶尔有紧急的市场活动小需求插入
    • 公司 培养储备人才

方案

注:方案中,专业能力 表示此任务对于 专业能力 有要求或能带来提高,即任务目的(why)

第一个月

  • 整理团队组件库使用说明文档(每周至少完成 1+ 个组件说明文档;最坏情况在指导下可能需要 24 天,熟悉后预计工时 0.52 天)
    • 专业能力 阅读组件源码
    • => 通用能力 学习能力 技术视野 导师指导(最坏情况在指导下可能需要 12 天,熟悉后预计工时 00.5 天)
    • 代码规范 专业能力找出源码中难以阅读、理解的代码块
    • 文档沉淀 代码规范 编写说明文档
    • => 通用能力 学习能力 技术视野 导师审查文档 => 反馈
  • 应对紧急的市场活动页面(预计工时 1 天)
    • 业务需求 编写静态页面
    • => 通用能力 学习能力 技术视野 导师审查代码 => 反馈
  • 【待定】团队知识库站点搭建(预计总工期 2 个月,每周安排 1~2 个工作日开发)
    • 团队 专业能力 代码编写
  • 阅读推荐资料
    • 专业能力 Vue.js 官方文档阅读、《某书》
    • => 通用能力 学习能力 导师指导答疑
  • 每天日报 (预计工时 0.5~1 小时,合计 0.5 天)
    • 通用能力 专业能力 知识收获
    • 通用能力 专业能力 工作内容
  • 每周周报(预计工时 1~2 小时,合计 0.25 天)
    • 通用能力``专业能力 知识收获
    • 通用能力 专业能力 工作内容

未完待续……

推荐资料

以下仅收集 XX 读过的资料或者经常参与讨论的社群。也欢迎大家推荐~

书单

通用能力

《暗时间》、《On Managing Yourself 自我发现与重塑》

专业能力

《代码大全 2》 《CSS 揭秘》 《Javascript 高级程序设计》 《Head First 设计模式》

博客

学习社群

引用庄表伟大佬的一段话……

求知欲不能教授 但可传染 学习能力无从教 却能修炼

  • 群(吹水少、禁广告)
    • 豪情大佬 QQ 群
    • 前端之巅微信群
  • 组织
  • gitchat 、知乎 live 活跃大神
    • 专业技能
      • 姬光、hax、小爝、justjavac、phodal……
    • 通用技能
      • Lachel、Warfalcon……
  • 小密圈
    • T 型学院
    • 前端早读课
    • 小胡子哥
  • 微信公众号
    • 前端早读课(起床第一件事……看前端早读课……肯定有更新……)
    • 前端大全
    • ……
  • github 学习项目

参考资料

  • 强烈推荐:姬光大佬 gitchat《怎样实习才能成长最快》
  • 姬光大佬 gitchat《老司机导师陪你聊聊带新人的那些“套路”》
  • ZoomQuite 大佬 gitchat 《初学者如何通过技术社区加速成长?》
  • 刘未鹏 《暗时间》

版本规划

本文和上次写的《前端开发负责人修炼指北》一样,会在 GitHub 上持续维护,欢迎大家提 issue ~

本文地址是:https://github.com/xunge0613/front-end-growth/blob/master/team-growth/weave-dreams-for-interns.md

v 0.1.1

  • 完善举例
  • 导师任务优化
    • 加入【SMART】 类型任务
  • 完善监督人模块内容
    • 增加监督人任务
    • 完善监督人描述
  • 推荐资料更新
  • 考虑是否要在后续版本更新“公司”、“业务”相关内容

结语

v 0.1.0 版本主要是理论的规划,由于自己 80%+ 的完美主义特质,希望能借此规划团队的实习生体系,并不断优化,对团队的实习生负责,对团队负责。也希望这篇文章能给大家带来一些思考。接下来会在实践的过程中思考、反思,不断迭代该计划。

最后,以《云图》全书最后一段结尾:

“要和人性的九头蛇进行斗争的人必须以经受巨大的痛苦为代价,而且他的家人必须跟他一起为此付出代价!不见棺材不落泪,你要明白,你生命的价值不过像是无边无垠的海洋里的一滴水!”

“但是如果没有众多的水滴,哪会有海洋呢?” *“What is any ocean but a multitude of drops?” *

鸣谢

感谢姬光大佬的两篇文章…… 强烈建议大家读一读……

感谢提出宝贵意见的大伙伴们~

感谢大家抽出时间来围观我这篇文章……

感谢马克飞象这款性价比超高的记录工具~

最后,感谢自己~

如果有帮助,欢迎打赏~

提高阅读效率的技巧:提问式导读、引导式目录、引导者作者

纯英文读书会|《On Managing Yourself》,5.29

首先感谢哈比同学推荐的这个活动,这篇文章里有一大段关于《On Managing Yourself 自我发现与重塑》的导读,在回答了一半导读问题,之后在洗澡的过程中,突然来了灵感,以下是脑洞时间,见笑了。

就技术类、科普类书籍来说,如果内容质量高,为了方便读者理解,那么该书作者最好是一个好的“引导者”,并且有一个好的引导式目录,或者有一篇好的提问式导读。

关于好的目录,私以为一级目录至少需要蕴含 how 和 why,或者具有一定抽象,而不单单只有 what。借助于 how 和 why ,那么能帮助读者更快理解相关知识的作用、目的及原理。举个例子:《代码大全 2》的第一部分、第二部分目录的标题是:打好基础、创建高质量的代码。这样读者可以更有选择性地并且带着目的性地去了解相关内容。

【划重点】关于好的导读,而我更欣赏“提问式导读”,就像是小时候做英语考卷的阅读理解题,先快速记下全部问题的关键点,若能当场解决就直接做掉,若不能,就带着问题(目的)去阅读文章,这样可以大大提高阅读的速度。就如同这篇文章中,有十分详尽的导读问题。虽然还没看这本书,但凭感觉认为回答了这些问题后,就好像是换位思考,将自己置于作者的角度,去进行思考,同时也深刻了解了书籍的范畴、关键点、核心内容。这样再去阅读这本书可以大大提升自己的阅读效率并且加深理解和记忆。

而为了做出如此详尽的“提问式导读”,那么必然也需要对原文进行深入的理解,或者说自身具有较高的抽象能力,对于一本高质量的书,写下这些问题的过程也是十分有价值的。

以上,一些脑洞。非常兴奋,感觉发现了如何阅读一本好书的新技巧。(前提是有高质量的“提问式导读”)

 

from 吃土小2叉

2017-05-29

 

 

前端知识问答整理

本文主要整理一些我回答别人的前端问题……

如何写博客文章

答:可以学习下这篇文章:http://blog.jobbole.com/91942/ 。“写”的套路。
最开始初学前端时候写的:http://xuxun.me/blog/2012/03/word-press-problems-met-solved/ 。这是我写的第一篇技术文…………现在看特别low
其实很简单,就是记录一下自己学到了什么知识点。第一步做到这个就可以了。
然后写博客的好处就是,如果有别人看到你的博客,如果他们同样感兴趣,并且看到你文章中的不足,会帮你指正出来。这一个交流的过程就是一个很棒的学习过程。
第一步如果说是你学到的 what,那么接下来就尝试写写 how,甚至 why。知其然,知其所以然。在这个过程中你会发现你为了记录一个问题,会学习到更多相关的知识。这样你会发现你进步速度会有质变。

JavaScript 新手问题

A:知道思路就是不知道用代码怎么写。
B:举个例子?
A:就是简单的都不会:(

答:https://freecodecamp.cn/challenges/learn-how-script-tags-and-document-ready-work。我觉得你可以试试这个。由浅入深教你怎么写前端,通过一个个demo,从基础教起。我觉得光看视频还是不够的,还是要自己多写,多积累写的经验,多遇到难题然后想办法解决。

 

对于 > 750 设备宽度,设置 rem 作为字体单位;
对于 小于 750 设备宽度,设置 px 作为字体单位。

问:为什么是大于750用rem啊,不是小于750用rem么,我是新手。麻烦讲一下,我做的手机端的都是用rem啊。小屏幕的……

答:布局之类的用 rem 没问题的~
主要问题出在文字上,开发时候遇到一些问题。
当小屏的时候使用 rem 可能会导致文字过小,而用 px 可以保证文字显示正常.
但是 px 对于大屏幕就不友好了,屏幕大的时候使用 px 因为字体不会随屏幕放大,所以在超大屏幕上可能会使得页面文字有些空。
大致是以上这个情况 -。-

地址:http://www.ruanyifeng.com/blog/2017/05/css-variables.html

CSS 样式失效?

问:
但是 方框二 跟 方框三 咋效果一样呢?
我没查出来,难道它是默认 p 段落吗?

答:

首先,如果说效果一样的话,含义就是指,最终应用到元素上的 css 是一样的
如果说结构不同的话,那么有可能就是 p 元素的默认样式和浏览器对 body 元素的默认css样式是一样的
因为上面一个方框内容,实际上 Click here for 是 body 的子元素
over

md 与 html

好好理解一下每个标签的语义还是很有必要的
所以 md 其实也可以理解为另一种形式的 html
往深里说,这个就涉及到浏览器的渲染原理
简单来说,不管html还是md,对于开发者来说,都只是一种标记而已
不同的是他们的目的。 md 是为了出于写作方便而生

html 是浏览器能直接识别的语言
md 是对 html 的一层封装

【译】解密 Quantum:现代浏览器引擎的构建之道

解密 Quantum:现代浏览器引擎的构建之道

2016 年 10 月,Mozilla 公布了 Quantum 项目 —— 旨在开创下一代浏览器引擎。现在这一项目已然步入正轨。实际上,我们在上个月刚更新的 Firefox 53 中首次包含了 Quantum 的部分核心代码

但是,我们意识到对于那些不从事浏览器开发的人来说(而且是大多数人),很难明白这些改动对于 Firefox 的重大意义。毕竟,许多改动对于用户来说是不可见的。

意识到这点后,我们开始撰写一系列博客文章来深度解读 Quantum 项目正在做什么。我们希望这一系列的文章能够帮助大家理解 Firefox 的工作原理,以及 Firefox 是如何打造一款下一代浏览器引擎,从而更好地利用现代计算机的硬件性能。

作为这系列文章的第一篇,最好还是先说明一下 Quantum 正在改变哪些核心内容。

浏览器引擎什么?它的工作原理又是什么?

那么,就从头开始说起吧。

Web 浏览器是一种软件,它首先加载文件(通常这些文件来自于远程服务器),然后在本地显示这些文件,并且允许用户交互。

Quantum 是项目的代号,Mozilla 启动这个项目是为了大幅度升级 Firefox 浏览器的某个模块,这个模块决定了浏览器如何根据远程文件将网页显示给用户。这一模块的行业术语叫“浏览器引擎”,如果没有浏览器引擎,用户就只能看看网站源代码而不能浏览网站了。Firefox 的浏览器引擎叫 Gecko。

可以简单地把浏览器引擎看作一个黑盒(有点类似于电视机),灌入数据后由黑盒来决定展示在屏幕上的数据形态。现在的问题是:浏览器引擎是如何呈现页面的?它是通过哪些步骤将数据转化为我们所看见的网页?

网页数据通常有许多类型,但总的来说可以划分为三大类:

  • 用于描述网页结构的代码
  • 用于提供样式的代码,描述了网页结构的视觉外观
  • 用于控制浏览器行为的脚本代码,包括:计算、人机互动以及修改已初始化的网页结构和样式。

浏览器引擎将页面结构和样式结合从而在屏幕上渲染出网页,同时确定可以互动的内容。

这一切要从网页结构说起。浏览器会根据给定的地址去加载一个网站。这个地址指向的是另一台电脑,当它收到访问请求时,会返回网页数据给浏览器。至于这个过程的具体实现可以查阅这篇文章,反正最后浏览器拿到网页数据了。这个数据以 HTML 的格式返回,它描述了网页的结构。那么浏览器又是如何读懂 HTML 的呢?

浏览器引擎包含一类称为解析器的特殊模块,它将数据从一种格式转换为另一种可以存储在浏览器内存中的格式。举个例子,HTML 解析器拿到了以下 HTML 内容:

<section>
 <h1 class="main-title">Hello!</h1>
 <img src="http://example.com/image.png">
</section>

于是,解析器开始解析、理解 HTML,下面是解析器的独白:

嗯,这里有个章节。在这个章节里有个一级标题,这个标题包含的文本内容是 “Hello!”。另外在这个章节中,还有一张图片。这个图片的数据从这里获取:http://example.com/image.png

网页在浏览器内存中的结构被称为文档对象模型,简称 DOM。DOM 以元素树的形式来表示页面结构,而非长文本形式,包括:每个元素各自的属性以及元素间的嵌套关系。

A diagram showing the nesting of HTML elements

除了用于描述页面结构,HTML 同样包含指向样式文件和脚本文件的地址。浏览器发现这些后,就开始请求并加载数据。然后浏览器会根据数据的类型,指定相应的解析器来处理。脚本文件可以在 HTML 文件解析的同时,改变页面的结构和样式。而样式规则,CSS, 在浏览器引擎中发挥以下作用。

关于样式

CSS 是一门编程语言,开发者可以借助 CSS 描述页面元素的外观。CSS 全称 Cascading Style Sheets (译注:层叠样式表),之所以这样命名是因为多个 CSS 指令可以作用在同一个元素上,后定义的指令可以覆盖之前定义的指令,权重高的指令可以覆盖权重低的指令(这就是层叠的概念)。下面是一些 CSS 代码。

section {
  font-size: 15px;
  color: #333;
  border: 1px solid blue;
}
h1 {
  font-size: 2em;
}
.main-title {
  font-size: 3em; 
}
img {
  width: 100%;
}

大部分 CSS 代码被分割在称为规则的一个个分组中,每条规则包含两个部分。其中一个部分是选择器,选择器描述了 DOM 中需要应用样式的元素(上文说过,还记得吗?)。另一部分则是一系列样式声明,应用于与选择器匹配的元素。浏览器引擎中包含一个名为样式引擎的子系统,用于接收 CSS 代码,并将 CSS 规则应用到由 HTML 解析器生成的 DOM 中。

举个例子,在上述 CSS 中,我们有一条规则指定了选择器 “section”,这会匹配到 DOM 中所有 section 元素。接着,浏览器引擎会为 DOM 中的每一个元素附上样式注解。直到最后每个 DOM 元素都应用了样式,我们将该状态称为元素样式计算完毕。而当多个选择器作用在一个元素上时,源代码次序靠后的或者权重更高的 CSS 规则最终会应用到元素上。可以认为样式表是层叠的薄透写纸,上层覆盖下层,但同时也能让下层透过上层显示出来。

一旦浏览器引擎计算好了样式,接下来就要派上用场了!布局引擎接下来会接手 DOM 和已计算的样式,并且会考虑待绘制布局所在的窗口大小。然后布局引擎会分析该元素应用的所有样式,并通过各种算法将每个元素绘制在一个个内容盒子中。

页面布局绘制完毕后,是时候将页面蓝图转化成你所看见的实际页面了。这一步骤称为 painting(绘制),这也是先前所有步骤的最终整合。每个由布局定义的内容盒子都将被绘制,其内容来自 DOM,其样式源自 CSS。最终,从代码一步步重组而成的页面,展现在用户眼中。

以上就是以前的浏览器引擎所做的事情。

当用户滚动页面的时候,浏览器会进行重绘来显示原先在可见窗口外的页面内容。然而,显然用户都喜欢滚动页面!浏览器引擎清楚地意识到自己肯定会被要求展示初始窗口以外的内容(也称视口)。现代浏览器根据这个事实在页面初始化的时候绘制了比视口更多的页面内容。当用户滚动页面的时候,这部分用户想要看的内容早就已经绘制完毕了。这样的好处就是页面滚动变得更快更流畅。这种技术是网页合成的基础,合成是一种减少所需绘制量的技术术语。

另外,我们有时候也需要重绘部分页面内容。比如用户有可能正在观看一个每秒 60 帧的视频。也可能页面上有一个图片轮播或者滚动列表。浏览器能够检测出页面上哪一部分内容将要移动或者更新,并且会为这些更新的内容创建一个新的图层,而非重新渲染整个页面。一个页面可以由多个彼此重叠的图层构成。每个图层都可以改变定位方式、滚动位置、透明度或者在不触发重绘的前提下控制图层的上下位置!相当方便。

有时候一些脚本或者动画会修改元素的样式。这个时候,样式引擎就需要重新计算这个元素的样式(可能页面上许多其他元素也要重新计算),重新计算布局(产生一次回流),然后重绘整个页面。随着计算量的增加,这些操作会耗费很多时间,但只要发生的频率低,那么就不会对用户体验产生负面影响。

在现代 web 应用中,文档结构经常会被脚本改变。而哪怕只是一点小改动,都会或多或少地触发整个渲染流程:HTML 解析成 DOM、样式计算、回流、重绘。

Web 标准

不同浏览器解释 HTML、CSS 和 JavaScript 的方式也不一样。这就产生了各种影响:小到细微的视觉差异,大到用户无法在某些浏览器上正常浏览网站。近年来在现代互联网中,大多数网站在不同浏览器下似乎都表现的不错,而且也没有关注用户具体使用的是什么浏览器。那么,不同浏览器又是如何达到这种程度的一致性体验呢?

网站代码的格式,以及代码的解释规则、页面的渲染规则都是由一种由多方认可的文件定义的,即 Web 标准。来自浏览器厂商、Web 开发者、设计师等行业成员的代表组成的委员会制定了这些标准文档。他们一起确定了对于给定的代码片段,浏览器引擎应该显示的明确行为。Web 标准包括 HTML、CSS 和 JavaScript 标准以及图像、视频、音频等数据格式的标准。

为什么说 Web 标准是重要的?因为只要保证遵循了 Web 标准,就可以开发出一个全新的浏览器引擎,这个引擎可以处理互联网上数以亿计的网页,并绘制出和其它浏览器一样的结果。这也意味着在某些浏览器中才能运作的“秘密配方”不再是秘密了(译者注:例如,不再需要 CSS 私有前缀)。另外,正因为 Web 标准的存在,用户可以凭自己的喜好挑选浏览器。

摩尔定律的终结

过去,人们只有台式电脑。曾经有一个相对保守的假设:计算机只会变得更快更强大。这个想法是基于摩尔定律的推测:集成电路上可容纳的元器件的数目,约每隔 2 年便会增加一倍(因此半导体芯片的性能也将提升一倍、体积也将缩小一倍)。令人难以置信的是,这种趋势一直持续到了 21 世纪,并且有人认为这一定律仍然适用于当今最前沿的研究。那么为什么在过去十年中,计算机的平均运算速度似乎已经趋于稳定了?

顾客买电脑的时候不单单考虑运行速度,毕竟速度快的电脑很可能非常耗电、非常容易发热还非常贵!有时候人们想要一台续航时间良好的笔记本电脑。有时候呢,人们又想要一个微型的触屏电脑,带摄像头,又小到可以塞进口袋,并且电量足够用一天!计算能力的进步已经让这成为可能(真的很惊人!),不过代价就是运行速度下降。正如你在飙车的时候无法有效(或者说安全)地控制行车路线,你也无法让电脑超负荷计算的同时处理大量任务。现在的解决方案都是借助于单 CPU 多核。因此,现在智能手机普遍都有 4 个较小、较弱的计算核心。

不幸的是,过去的浏览器设计是基于摩尔定律(性能提升)会继续有效的假设。另外,编写能够充分利用多核 CPU 的代码也是极为复杂的。所以,我们该如何在这个到处都是小型计算机的时代,开发一款高速又高效的浏览器呢?

我们已经想到了!

在接下来的几个月中,我们将更进一步关注 Firefox 的变化,以及这些变化将如何更好地利用现代硬件来实现一个更快更稳定的浏览器,从而让网站更加多姿多彩。

皮皮虾,我们走!

Growth CSS

Growth CSS

@(Front End Growth)[前端开发, Vue.js, JavaScript, github]


Front End Growth 系列文章。记录 XX 前端成长过程的点滴。仅供参考,也许不具备通用性,请结合自身实际,切勿强行模仿~
Growth CSS 介绍了 XX 对 CSS 的认知以及学习、应用上的建议。


What is CSS

是一门面向交互设计、视觉设计的声明式语言

  • 视觉
    • 布局 (display、margin、padding、width)
    • 字体排印 (font、text、color)
    • 装饰 (background、box-shadow、gradiant)
    • 动画 (animation、transistion、transform)
  • 交互
    • 反馈 (:hover, :visited)
    • 引导 (position: fixed)
    • 互动 (:hover .show)

也是一门需要一些技巧或工具来优雅编码的伪 OO 语言

  • 面向对象
    • 继承 .parent{styleA: xxx;} .child { styleA: inherit; } / .parent() {} .child { .parent(); }
    • 扩展 .classA.classB / .classA() {} .classB() {} .classC() {} .classFinal {.classA(); .classC(); style:xxx;}
    • 重载 .classA.classB .classA { xx: oo} .classB { xx: xx}
  • 代码规范
  • 代码复用 DRY (Less)
  • BEM
  • 变量、函数命名
  • 权重控制
  • 语义性

How I learn CSS

  • 概念(flexbox 布局)
  • demo(动手调试一下所有 flex 属性)
  • 应用(使用所学技术,实现一个页面 or 模块 or 方案)
  • 融汇(与已有知识体系进行关联,梳理知识、归纳、分类)
  • 贯通(结合已有的相关联知识点,头脑风暴,例如:实现垂直居中的 N 种不同方案 )
  • 初心(根本目的是为了实现视觉效果,所以心中永远有一个当前场景最合适方案)

How I Code CSS

Consideration

  • 视觉还原度
  • 兼容性
  • 性能
  • 开发效率
  • 可维护性
    • 语义性
    • 权重控制
    • 嵌套层级
  • 可控颗粒度
  • 调试技巧

CSS Code Standards

BEM

Less

Learning Tips

毕竟 CSS 是一门“面向视觉”的语言,所以学习资料尽量以图像为主,可以加深记忆效果。

@Design

与设计师的沟通

设计理念

一致性 可用性 易用性 反馈

这里不一定实时更新,可以关注 github 地址获取最新内容:

https://github.com/xunge0613/front-end-growth/blob/master/tech-growth/growth-css.md