前端工程师

http://caibaojian.com/some-fe 蒋长浩博士 Facebook 介绍：蒋长浩，祖籍湖南，获清华大学计算机本硕学位、伊利诺伊大学(UIUC)博士学位，在卡耐基梅隆大学(CMU)、谷歌公司从事过“普适计算~大规模计算”的优化研究。在Facebook任研究科学家，他创造BIGPIPE，使大型网站访速翻1倍，举世关注。 钱宝坤 新浪微博 微博：貘吃馍香 博客： http://w3help.org 混迹于IT行业多年的普通程序员，偏好浏览器相关内容研究。w3help.org文章内容主要提供者之一。现就职于新浪微博前端基础架构组，参与微博前端公用组件开发，以及前端工具开发相关工作。 嗷嗷 淘宝网 微博：aoao 博客： http://www.aoao.org.cn 介绍：从事前端开发多年，期间做过设计转过产品，混过后端，写过《Web标准设计》一书。目前就职于淘宝网，主要负责前端性能监控、优化等前端开发相关的工作。 郭润增 腾讯 微博：grzcn 博客： http://grz.qzone.qq.com 介绍：aka郭小帅，08年毕业加入腾讯QQ空间前端团队至今一直在关注Web前端优化，主要负责Qzone Feeds和个人中心的业务特性和性能优化，也是Qzone 6.0的开拓者之一。 李成银 百度 微博：welefen 博客： http://www.welefen.com

比较推荐的学习过程应该是以兴趣为驱动的，用搜索做辅助： 1. 我想做一个个人网站，或者给我们团队或者小组做一些介绍页面。怎么做？搜索发现要学习：HTML、CSS。 2. 发现一个网站设计的好漂亮，交互真赞，动画效果真好。我想在我自己网站上也放上，可是我看不懂它的代码？搜索发现要学习：交互视觉、CSS3 动画等。 3. 他们网站上都有那种点击弹出浮层的功能，还有一些其他的更复杂的交互效果。怎么实现的？学习JavaScript。 4. 有小学同学说我的个人网站错位了，问了下他用的是 IE7 访问的，怎么办？搜索了解一些浏览器兼容性问题（不是很必要）、学习使用 jQuery。 5. 我想在微信朋友圈分享一下我的网站，结果缩放的好小，而且有错位。怎么解决这个问题？搜索发现要学习响应式相关。 6. 分享了之后，发现打开速度好慢啊，要等十几秒才能打开。怎么办？学一下前端性能优化相关。 7. 网站交互功能和效果越来越多，写的 JS 和 CSS 代码越来越多，感觉写起来好慢，出了 bug 很难定位问题。怎么办？搜索发现要学习：Emmet、Less、SCSS 等辅助工具用法，JS 模块化require.js、sea.js 以及对应的 AMD、CMD 以及 CommonJS 模块化规范等。 8. JS 更复杂了，而且要与其他同学合作开发。发现需要学习一些前端框架来提高开发效率，比如React

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> # 前端工程——基础篇 > 喂喂喂，那个切图的，把页面写好就发给研发工程师套模板吧。 你好，切图仔。 不知道你的团队如何定义前端开发，据我所知，时至今日仍然有很多团队会把前端开发归类为产品或者设计岗位，虽然身份之争多少有些无谓，但我对这种偏见还是心存芥蒂，酝酿了许久，决定写一个系列的文章，试着从工程的角度系统的介绍一下我对前端，尤其是Web前端的理解。 只要我们还把自己的工作看作为一项软件开发活动，那么我相信读过下面的内容你也一定会有所共鸣。 ## 前端，是一种GUI软件 现如今前端可谓包罗万象，产品形态五花八门，涉猎极广，什么高大上的基础库/框架，拽炫酷的宣传页面，还有屌炸天的小游戏……不过这些一两个文件的小项目并非是前端技术的主要应用场景，更具商业价值的则是复杂的Web应用，它们功能完善，界面繁多，为用户提供了完整的产品体验，可能是新闻聚合网站，可能是在线购物平台，可能是社交网络，可能是金融信贷应用，可能是音乐互动社区，也可能是视频上传与分享平台…… > 从本质上讲，所有Web应用都是一种运行在网页浏览器中的软件，这些软件的图形用户界面（Graphical User Interface，简称GUI）即为前端。 如此复杂的Web应用，动辄几十上百人共同开发维护，其前端界面通常也颇具规模

web前端工程师是近几年的新兴职业，也是目前火爆而且高薪的职业。不同的公司也有不同的叫法，比如：网页界面开发，网站设计等，要学好web前端开发，需要掌握什么方法与技巧？ 一、div和table 这个是最简单的，也是最基础的。要熟练掌握div、form table、ul li 、p、span、font这些标签，这些都是最常用的，特别是div和table，div用于布局、table也可以用于布局，但是不灵活，基本 table是用来和数据打交道。 二、CSS 这里说的css不包括css3，一般我们看到web前端开发工程师的要求里面，有一个会使用css+html 或者 css+div 来进行界面布局，所以css是用于辅助html来布局和展示的，我们称之为“css样式”。 为什么会说css+div呢? 因为我上面说了div就是 html主要用于布局的东西，所以div就是核心掌握的东西！那么css肯定必须要配合div来使用才好。css要熟练掌握float、 position、width、height，以及对于的最大最小、会使用百分百、overflow、margin、padding等等。 三、JS 可能前两个大家觉得还过的去，看到js就蛋疼了。 其实，js入门很简单的，不需要会很多东西的，只要会根据某个id、或者name拿到网页dom或者样式、或者值，然后会给某个id或者name的元素标签赋值

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 最近遇到一些小萌新，他们经常会问到“Web前端是什么？它能做什么？与后端的关系是什么？”。下面，针对这些问题给大家解答一下。 Web前端工程师是干什么的？ 我们先了解Web前端工程师是干什么的，百度百科的解释： Web前端开发工程师，主要职责是利用(X)HTML/CSS/JavaScript/Flash等各种Web技术进行客户端产品的开发。 完成客户端程序（也就是浏览器端）的开发，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。 得知这个之后，那么什么是Web前端相信各位也就有个大概了解了，就是浏览器和app界面的开发嘛。 Web是什么呢？Web就是万维网，要彻底的解释这个名词就需要些篇幅了，这里就用一句话总结，就是一种全球都公认的协议，一个信息系统，必须遵守这个协议才能上网。 Web前端其实就是前端，或者前端技术，前端开发，这几个名词其实意思都差不多的。 浏览器界面是什么呢，比如你打开百度网站： 以上这个界面全是利用Web前端技术做出来的，比如上方这些： 这些字根据您的上网常识，应该都知道是可以点击的，点击完会跳到一个新的界面，但是有些字又不能点击，这就是用了前端技术实现的。 接着看，这个百度的logo： 不难看出

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 作为新手，出于对风险的担心，不免在学习一项新技能或者转投一个新行业的时候，有所犹豫与徘徊。毕竟，在这场类似冒险的选择中，我们需要投入时间、精力以及承受相关的经济损失。但是，只有勇敢迈出第一步，才能为生活注入新活力，面对机遇，我们要及时抓住。就像现在IT行业火热，其中Web前端无论是发展前景还是就业形势都十分可观。那么作为一名新手怎么才能高效学习这门编程语言呢?3个高效学习方法，不容错过！ **　一、基础要十分重视** 首先建立第一条技能线，前端由html、css、js组成;然后将其细化为第二条线，html是由html4和html5组成;第三条线，css由css2和css3组成;第四条线，js由es5和es6构成。接下来是框架方面的延伸，css方向有les;html方向有bootstrap;js方向有jquery库。 再往下延伸一层，html、css方向，有前端构建工具;js除了jq库之外，还有更全面的前端框架，如react、angular、vue等。再往下细化，react是一个view层方案，为了让它能够全面解决前端需求，需要redux、react-router等作为补充。以上知识，都是一个合格的Web前端工程师应该掌握的。 二、学习要进行发散 Web前端是丰富多彩的，你可以融入其中，但不能只停留在这一块领域

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 前端是什么？ 在回答这个问题之前，我想到了一道面试题： 当我们在浏览器中输入网址并按回车之后，接下来会发生什么？ 我们来简单地看一看 “网页展现” 的整个过程。 比如这里有一个用户，它需要访问 abc.com 这个网址。一般来说，当用户输入一个域名时，是在请求一个 HTML 资源。当他完成域名解析之后，他的浏览器会向 abc.com 这个域名所指向的 Web 服务器发出请求。 有时候 Web 服务器直接就可以返回用户的请求了；有时候 Web 服务器还需要向数据库查询一些数据，然后才能把处理结果返回给用户。 当用户的浏览器拿到服务器返回的 HTML 资源之后，就开始解析并显示 HTML 的内容了。 一般来说，HTML 页面需要 CSS 资源来描述页面的样式。比如浏览器在解析 HTML 时发现了一个 CSS 外链 abc.com/a.css ，它就会去请求这个资源。 HTML 页面往往还需要加载外部的 JS 资源，比如 abc.com/a.js ，此时浏览器同样会向服务器请求这个资源。 当所需的资源都加载完成之后，这个页面就可以提供完整的外观和功能了。整个过程差不多就是这个样子了。 我们看一看这张流程图，可以在中间画一道竖线，把它分成左右两个部分。 我们会发现，这道线左侧的事情发生在浏览器端，我们称之为 “前端”

相对于桌面端浏览器，移动端Web浏览器上有一些较为明显的特点：设备屏幕较小、新特性兼容性较好、支持一些较新的HTML5和CSS3特性、需要与Native应用交互等。但移动端浏览器可用的CPU计算资源和网络资源极为有限，因此要做好移动端Web上的优化往往需要做更多的事情。首先，在移动端Web的前端页面渲染中，桌面浏览器端上的优化规则同样适用，此外针对移动端也要做一些极致的优化来达到更好的效果。需要注意的是，并不是移动端的优化原则在桌面浏览器端就不适用，而是由于兼容性和差异性的原因，一些优化原则在移动端更具代表性。 一、网络加载类 1．首屏数据请求提前，避免JavaScript文件加载后才请求数据 为了进一步提升页面加载速度，可以考虑将页面的数据请求尽可能提前，避免在JavaScript加载完成后才去请求数据。通常数据请求是页面内容渲染中关键路径最长的部分，而且不能并行，所以如果能将数据请求提前，可以极大程度上缩短页面内容的渲染完成时间。 2．首屏加载和按需加载，非首屏内容滚屏加载，保证首屏内容最小化 由于移动端网络速度相对较慢，网络资源有限，因此为了尽快完成页面内容的加载，需要保证首屏加载资源最小化，非首屏内容使用滚动的方式异步加载。一般推荐移动端页面首屏数据展示延时最长不超过3秒。目前中国联通3G的网络速度为338KB/s（2.71Mb/s）

前端工程化 背景 前端工程化的概念近两年来被广泛的提及，究其原因，是前端工程师所负责的客户端功能逻辑在不断复杂化。PC网站、手机应用、桌面应用、微信小程序，前端开发的应用领域越来越广，前端工程师这个职位也不再是几年前被戏称的“切图仔”，在这种背景下，前端工程化应运而生。 聊到前端工程化，必然会有一些问题，本文会带着这几个问题去介绍前端工程化。 什么是前端工程化？ 为什么要做前端工程化？ 前端工程化怎么做？ 现有的前端工程化产品？ 什么是前端工程化？ 要知道什么是前端工程化，先来看看什么是工程化，维基百科对工程化的定义： 工程学、工程科学或工学，是通过研究与实践应用数学、自然科学、社会学等基础学科的知识，来达到改良各行业中现有材料、建筑、机械、仪器、系统、化學和加工步骤的设计和应用方式一门学科。 实践与研究工程学的人叫做工程师。 在前端领域，工程化是根据业务特点，将前端开发流程规范化，标准化。前端工程化包括开发流程、技术选型、代码规范、构建发布、性能优化、前端监控等内容，主要目的在于制定标准和提升效率。 为什么要做前端工程化？ 1990年诞生的网页脚本语言只能用于简单的表单校验，Web开发主要是后端开发。 2005年，AJAX异步请求技术改变了网页的交互模式，用户对网站的需求越来越多，客户端开发稍微重要了一些。 2008年，Google推出V8引擎之后，浏览器性能大大提升

　　前端框架的理解误区 　　网站的价值在于它能为用户提供什么价值，在于网站能做什么，而不在于它是怎么做的，所以在网站还很小的时候就去追求网站的架构框架是舍本逐末，得不偿失的。前端框架同理，如果是一个简单的页面型产品，应用只是依赖服务器来生成Web页面和视图，并且只需要使用一些简单的Javascript或者JQuery来使应用更加具有互动性，那么一个JQuery前端类库就可以了，真的没必要用上一些高大上的框架。 　　当然，框架的确是很有用的，重点是我们要知道什么时候该用什么框架。大公司大项目的经验和成功模式固然重要，值得学习借鉴，但我们不能因此变得盲从。只有深刻去理解前端框架，知道什么时候该用什么什么框架解决什么问题，才能有的放矢，直击要害。 　　前端框架与前端类库的区别 　　使用框架前，我觉得很重要的一点是弄清类库（诸如JQuery）和框架（诸如angularJS)的区别在何处。 　　简单而言，类库，解决的是代码或者是模块级别的复用或者对复杂度的封装问题，例如将一个解决复杂问题的功能模块封装成一个函数，提供一个简单的接口。库它是一种工具，它提供了很多封装好的方法，用与不用取决于我们自身，即使用了也不会影响我们呢的代码结构。 　　而框架，更多的是对模式级别的复用和对程序组织的规范。这里的模式是指比如MVC，为了实现M和V的解耦