Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

快问快答(第四期) #68

Open
cssmagic opened this Issue Oct 19, 2016 · 0 comments

Comments

Projects
None yet
1 participant
@cssmagic
Copy link
Owner

cssmagic commented Oct 19, 2016

快问快答(第四期)

前言

在 “快问快答” 这个栏目中,魔法哥会回答具有普遍性的网友提问,希望这些问答对你也有启发;如果你也想提问,直接在 “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 基础之后,需要有…………

……

……


完整文章已收录到 “CSS魔法” 微信公众号,扫码立即订阅:

weixin-qrcode


往期回顾


© Creative Commons BY-NC-ND 4.0   |   我要订阅   |   我要打赏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.