微信号:cssmagic_wx

介绍:前端进阶,你我同行.每天迈出一小步,不断收获新技能!

快问快答(第四期)

2016-10-10 09:28 ·
不想错过更多好文?请点击上面的 “CSS魔法” 订阅公众号。

前言

在 “快问快答” 这个栏目中,魔法哥会回答具有普遍性的网友提问,希望这些问答对你也有启发;如果你也想提问,直接在 “CSS魔法” 微信公众号内留言就可以了。

技术答疑

Q 微信网友 小乖 提问:

如果一个项目中需要重复选出 body 节点,有必要把它定义为一个常量吗?

A 如果是操作 DOM 对象,每次直接用 document.body 就可以了;如果是重复使用 body 元素的 jQuery 对象,则是可以做个缓存的,避免每次都生成一个 jQuery 对象。比如我写的 Gearbox 这个工具库就预先定义了 gearbox.dom.$body 这个变量,以便上层代码直接调用。

Q 微博网友 摩羯明天过** 提问:

有一个问题麻烦前辈解释一下,就是你在前端开发中,在微信平台上面做的网页多吗?

A 以我自己的工作内容来看,特意为微信开发的页面不多。但手机站的所有页面都需要测试在微信下的表现。也就是说,前端工程师需要把微信当作主流浏览器来对待。

Q 图灵社区网友 孤傲一** 提问:

对于 CSS 未来的发展方向你有什么独家的见解?CSS 在写法上会有新的发展吗?

A 我几乎不关注 CSS 的新草案,所以我的观点可能缺少前瞻性,我只能从一个 CSS 开发者的角度谈谈期望。

CSS 的发展分为两方面:语言层面和功能层面。如今 CSS 预处理器已经在这两方面对 CSS 进行了不少扩展,似乎预处理器将成为 CSS 未来的形态?但实际上这两者的机制和角色并不相同,因此我认为 CSS 应该不会(或者说 “不需要”)直接吸纳诸如规则嵌套、mixin 等预处理器的功能。对我来说,CSS 静静地作为预处理器的编译目标就好。

在功能层面,原生 CSS 的优势在于运行时的动态能力,所以我认为 CSS 在选择符、内建函数、运算处理等方面会进一步加强,以适应 Web 应用越来越强的交互需求。

在语言层面,CSS 需要保证向后和向前的兼容性(新设备处理旧代码、旧设备处理新代码均不能出现破坏基本体验的严重错误),因此我估计 CSS 在写法上应该不会有巨大的差异出现。

关于 “CSS 的未来” 这个话题,不得不提 Houdini。不过我对它并不看好,因为对开发者和浏览器这两端来说,它的成本似乎都不低。当然,CSS 自诞生以来最大的思维方式的突破也就是它了,所以也不妨静观其变。

对于 Flexbox 布局的发展前景,你怎么看?

Flexbox 是非常重要的 CSS 特性,在《CSS 揭秘》一书中的很多案例中,我们都可以感受到 Flexbox 的独特魅力。它正在成为主流的布局方式,我们在移动浏览器中已经可以放心地使用 Flexbox 的基本特性了。

Q 图灵社区网友 **翔 提问:

为什么基于 Javascript 的 DOM 动画库(比如 GSAP)能比 jQuery 和基于 CSS 的动画库更高效呢?CSS 动画库有何缺陷?什么时候适合用 CSS 动画库而不用 JavaScript 的动画库?

A 首先推荐阅读《Myth Busting: CSS Animations vs. JavaScript》这篇文章(中文翻译在这里: http://t.cn/R7VFf5W )。我在动画性能这个问题上暂时没有深入研究,所以下面只能说说我自己的粗浅理解,难免错漏,仅供参考。

jQuery 动画最大的问题可能是它采用 setTimeout() 这样固定帧率的方式来刷新动画,当资源不足时会出现 “堵车式” 掉帧。不过 jQuery 3 会采用 requestAnimationFrame() 来控制动画帧的刷新,可以有效缓解这个问题。此外 jQuery 动画的内部实现也有可能优化不足,比如它不会有意识地触发硬件加速,跟 GSAP 这样的专业类库相比有较大差距。

关于动画性能之争,从直觉上来看,如果 CSS 的 transition 动画和 animation 动画是由单独的线程来处理的,那么它的性能应该是最优的。但实际上 CSS 动画需要向主线程实时同步元素的状态,有时可能反而没有运行在主线程的 JS 动画快。再次强调,这只是我自己的粗浅理解。

关于 CSS 动画与 JS 动画的选择,还是要看场景。如果是 CSS 可以轻易实现的动画,那应该优先考虑 CSS 动画,毕竟 CSS 的声明式语法门槛更低;如果需求比较复杂,甚至存在多个动画序列延时混合的情况,则只可能采用 JS 动画库来实现。

职业发展建议

Q 微博网友 摩羯明天过** 提问:

我是即将准备就业的前端,想问你一下,目前前端的市场行情是怎样的?

A 各城市和各公司都不一样,建议到各个招聘平台浏览一下,多看些 JD 和对应的薪水,心里应该就有数了。

好的。另外,在真实的开发环境中,前端需要用到后端开发技能的时候多吗?

不同公司的分工都不一样,有些公司完全不需要,有些(比如我所在的公司)通常会要求前端工程师具备一定的后端技能。

Q 微博网友 手浪用户27026614** 提问:

您好,我是去年毕业的本科生,我的专业是生物科学师范类!目前在某某单位见习,见习期结束了,我想找份工作,可是我发现自己没有什么技能,所以我想去商业培训机构学习 UI 设计或者 Web 前端(学期 4 个月)!我想问我在这个行业有前途吗?

A 对于普通毕业生来说,互联网行业是一个很好的就业方向,在未来的十年或更长的时间里,这个行业仍然可能会有旺盛的人力需求。而且可以说这是一个比较公平的行业——不需要拼背景,不需要找关系,只要具备相关技能就可以比较容易地找到工作,薪资待遇基本上也是跟个人的技能和贡献挂钩的。

不过,在上一期 “快问快答” 中我也提到,对于零基础跨专业的同学来说,直接转前端可能会相当困难。建议你先了解一下 UI 设计和 Web 前端这两个方向分别包含哪些工作内容和技能要求、自己更适合(更喜欢)哪条路,再来决定报哪一门课程。毕竟培训费用也是一笔不小的开销,先想清楚再掏钱。

Q 微博网友 Masque-** 提问:

你好,我现在是做 UI 设计的,想转前端能给点建议吗?

A 前些年大家都在说 “设计和前端不分家”,合在一起搞 UED。那时从 UI 设计转到前端岗位是再自然不过的事儿,但最近这两年情况则大不一样。这段变迁的来龙去脉我在这里就不多解释了,简单说说现状:现在由后端转前端或全栈的不少(比较容易),而从设计转前端的则相当少见(相当困难)。

如果你的心意已决,我建议先从当前的这份工作入手,跟公司里的前端同学搞好关系,作用有二。其一,赶紧利用业余时间学习前端技能,有问题多向他们请教。其二,平时在做好份内的设计工作之余,尽可能顺手接一些页面制作的活儿,不仅可以练手,还可以证明自己的能力,为岗位调动做好铺垫:哪天前端团队嚷嚷人手不足,你调过去也就顺理成章了。

反之,如果想通过跳槽的方式硬切,成功率可能比较低。

前端学习建议

Q 微博网友 挨踢小** 提问:

您好,我是一名刚刚步入大四的学生,对前端开发很有兴趣。实话说前三年浪费了两年多,大三才开始学习前端。学校主打 Java 开发,我是自学的 HTML/CSS,翻阅了数遍《JavaScript 高级程序设计》,依旧感觉自己还远远不够。由于学校并不是重点大学,虽然参加了一些面试仍旧得不到合适的机会,觉得自己高不成低不就,希望您给我一些前端学习的建议。另外,学到怎样一个程度才可以找到一份合适的工作?

A 在找工作方面,院校背景是一方面,个人能力也是一方面,而且后者显然更重要。所以不要灰心,机会肯定是有的!而且你没有跨专业的问题,比上面几位同学容易多了。

关于前端技能的提升,我感觉是这样的:在有了一定的 HTML、CSS、JS 基础之后,需要有大量实践来巩固基础,并形成一套你自己的解决问题的方法,从而在面对各种问题时能够快速找到最佳实践。所谓 “最佳实践”,就是尽可能符合规范的、在开发效率和可维护性之间找到平衡的解决方案。在进阶之路上,需要大量的实践和思考,也需要多多输入前人的经验。

当积累了一定经验、能独立解决问题的时候,应该就可以找到合适的工作机会了。在投递简历和面试的时候,重点也是在展示这方面的能力。所以趁着还没毕业,多攒些项目经验(不管是实习项目还是个人项目)吧!

Q 微信网友 你说呢** 提问:

魔法啊,我现在 CSS 和 JS 的基础也觉得学得差不多了,可是不知道该如何去实践,仿什么样的网站才能得到练习,仿成什么样才叫好,感觉自己进入了困境,不知道该如何向前……

A “仿网站” 确实是一种不错的实践方法,但要注意的是,不仅要仿其形,还要注意你的实现方式是不是符合规范、清晰有条理、别人易理解。比如在 HTML 方面,需要有合理的语义,哪怕没有样式的渲染也应该是一篇结构清晰的文档;在 CSS 方面,布局的实现方式要健壮、灵活、可扩展,从容应对需求的变化等等。

所以在仿完别人的网站之后,不妨看看别人原本是怎么实现的;然后再多多思考别人为什么那样实现,跟自己的方案相比有哪些优缺点。多练多思考,逐渐就会有感觉了。

Q 微信网友 被遗弃的小布偶 提问:

你好,魔法哥,现在我学了 HTML/CSS/JS/jQuery,然后面对Node.js/AngularJS/Vue.js 等各种 JS 框架,还有 Less/Sass 等各种语言……面对这么多的内容,我该如何设定学习这些内容的顺序?

A 有两个建议。首先,优先学习现在工作可能用得到的。如果是边学边用,你会比较容易找到最有效的学习路径,进步会比较快。

其次,同类型的框架或工具只需要专攻一项即可。比如 Angular/React/Vue 之间选一项即可,Less/Sass/Stylus 之间选一项即可。

另外关于 Node.js,如果你不打算做全栈,暂时只需要了解基本应用即可——只要常规的开发环境和构建工具可以搭起来,应该就足够了。


往期回顾

(题图作者:mike brown @ Flickr)

 
CSS魔法 更多文章 快问快答(第三期) 快问快答(第二期) 快问快答(第一期) 图灵访谈 CSS魔法:学海无涯,而吾生有涯 [译] Gulp 4 入门指南
猜您喜欢 oracle秘境探索之11g tablespace prellocation MySQL指标采集和监控——OpenFalcon 广州传智播客首期PHP火爆开班----与偶像相会的日子 Flask Signals 入门 一套完整的Android通用框架