⑴ 前端工程师有哪些价值
个人认为前端工程师正慢慢演变为产品工程师。wap app, 响应性UI等以html5技术为基础的开发将成为前端工程师的主要工作内容,解决产品跨平台跨设备的实现问题。Javascript, HTML, CSS这些前端工程师熟悉的,多年使用的语言,作为开放标准将被各种平台所支持。产品形态和数据的分离是形势所趋。移动时代对产品形态多元化的要求虽然可以靠不同技术分别实现,但要付出巨大的成本。这也是html5这个04年就提出来的标准,直到前两年才火爆的原因。
现阶段的价值也很大。web产品交互越来越复杂,用户使用体验和网站前端性能优化,这些都需要专业的前端工程师来解决。另外,在项目中还要弥补设计师在交互设计上的不足,前端工程师在开发过程中起着重要的承上启下的作用。一两个前端工程师就可以让整个开发并行起来,让设计到实现的转换更顺利。明智的公司应该贮备前端工程师资源。
我不认为前端工程师和产品经理有什么关系。好的前端工程师一定会成为好的交互设计师。前端工程师对信息架构的理解应不亚于专业的交互设计师。
⑵ 前端工作流程是什么
公司性质决定流程,不过一般大体都是需求--设计--页面制作--效果制作--添加程序。
假设 sys 级的规范和标准模块已经完成(包括全局样式、布局规范、标准盒模型等),这时需要开发一个项目,假设为淘江湖 SNS 项目。理想中的开发流程为:
a). PD 产出 PRD.
b). 交互统揽全局,将 PRD 中的可复用部分,拎取出来,产出 base-prototype.
c-1). 视觉根据 base-prototype,产出 base-mockup.
c-2). 前端根据 base-prototype 和 base-mockup 产出 app-dpl(该项目的 DPL)。
c-3). 交互继续具体页面的 page-prototype 产出工作。
以上三步是并行和迭代进行的。
d-1). 视觉根据 page-prototype 产出 page-mockup.
d-2). 前端根据 page-mockup 产出 page-demo.
以上两步迭代进行。
流程的核心是迭代、是敏捷、是短周期。
最重要的一步是 base-prototype 的产出。交互要避免一个页面一个页面的产出顺序,而应该先有一个统揽全局、拎取通用部分的步骤。
以上流程可以简述为:sys -> app -> page. app 层的抽取很重要,可以提高团队的开发效率和协作程度,让团队更融合、更高效。
感觉 LSM 强调的是前端工程师实现 demo 时的微流程。告诉我们做一个页面时,需要 html 整体 -> 局部模块的 css/js, 逐层开发,先整体后局部,先框架后细节。这是非常好的最佳实践。
⑶ IT前端开发流程
一般的网站开发流程包括四个方面:
1、 总结需求
2、 设计界面
3、 前端开发
4、 后端开发
开发完成后会进行内部测试以及后续的优化等,其中2,3,4可以并行开发。
⑷ 前端和后端是并行开发的么
前端开发和后端开发的区别在于 依、前端开发主要做的是用户所能看到的前端展示界面 贰、后端开发主要做的是逻辑功能等模块,是用户不可见的 三、前端开发用到的技术包括但不限于 html5 css三 javascript jquery Bootstrap Node.js AngularJs等技术 四、后端开发 以java为例 主要用到的 是包括但不限于Struts spring springmvc Hibernate Http协议 Servlet Tomcat服务器 等技
⑸ 如何对前端性能进行优化
前端开发代码优化、可维护性、浏览器兼容性是非常重要的课题。从实际的工程应用角度出发,最常遇见的前端优化问题。前端性能进行优化规则,基本可以涵盖现在前端大部分的性能优化原则了,很多更加geek和精细优化方法都是从这些原则里面延伸出来的。
前端性能进行优化都有哪些规则
减少HTTP请求次数
尽量合并图片、CSS、JS。比如加载一个页面有5个css文件的话,把这个5个文件合成一个的话,就只需要发出一次http请求,节省网络请求时间,加快页面的加载。
2. 使用CDN
网站上静态资源即css、js全都使用cdn分发,包括图片
3. 避免空的src和href
当link标签的href属性为空、script标签的src属性为空的时候,浏览器渲染的时候会把当前页面的URL作为它们的属性值,从而把页面的内容加载进来作为它们的值。所以要避免犯这样的疏忽。
4. 为文件头指定Expires
Exipres是用来设置文件的过期时间的,一般对css、js、图片资源有效。 他可以使内容具有缓存性,这样下回再访问同样的资源时就通过浏览器缓存区读取,不需要再发出http请求。如下例子:
新浪微博的这个css文件的Expires时间是2016-5-04 09:14:14.
5. 使用gzip压缩内容
gzip能够压缩任何一个文本类型的响应,包括html,xml,json。大大缩小请求返回的数据量。
6. 把CSS放到顶部
网页上的资源加载时从上网下顺序加载的,所以css放在页面的顶部能够优先渲染页面,让用户感觉页面加载很快。
7. 把JS放到底部
加载js时会对后续的资源造成阻塞,必须得等js加载完才去加载后续的文件 ,所以就把js放在页面底部最后加载。
8. 避免使用CSS表达式
举个css表达式的例子
font-color: expression( (new Date()).getHours()%3 ? “#FFFFFF" : “#AAAAAA" );
这个表达式会持续的在页面上计算样式,影响页面的性能。并且css表达式只被IE支持。
9. 将CSS和JS放到外部文件中
目的是缓存文件,可以参考原则4。 但有时候为了减少请求,也会直接写到页面里,需根据PV和IP的比例权衡。
10. 权衡DNS查找次数
减少主机名可以节省响应时间。但同时,需要注意,减少主机会减少页面中并行下载的数量。
IE浏览器在同一时刻只能从同一域名下载两个文件。当在一个页面显示多张图片时,IE 用户的图片下载速度就会受到影响。所以新浪会搞N个二级域名来放图片。
下面是新浪微博的图片域名,我们可以看到他有多个域名,这样可以保证这些不同域名能够同时去下载图片,而不用排队。不过如果当使用的域名过多时,响应时间就会慢,因为不用响应域名时间不一致。
11. 精简CSS和JS
这里就涉及到css和js的压缩了。比如下面的新浪的一个css文件,把空格回车全部去掉,减少文件的大小。现在的压缩工具有很多,基本主流的前端构建工具都能进行css和js文件的压缩,如grunt,glup等。
12. 避免跳转
有种现象会比较坑爹,看起来没什么差别,其实多次了一次页面跳转。比如当URL本该有斜杠(/)却被忽略掉时。例如,当我们要访问http:// .com时,实际上返回的是一个包含301代码的跳转,它指向的是http:// .com/(注意末尾的斜杠)。在nginx服务器可以使用rewrite;Apache服务器中可以使用Alias 或者 mod_rewrite或者the DirectorySlash来避免。
另一种是不用域名之间的跳转, 比如访问http:// .com/bbs跳转到http:// bbs..com/。那么可以通过使用Alias或者mod_rewirte建立CNAME(保存一个域名和另外一个域名之间关系的DNS记录)来替代。
13. 删除重复的JS和CSS
重复调用脚本,除了增加额外的HTTP请求外,多次运算也会浪费时间。在IE和Firefox中不管脚本是否可缓存,它们都存在重复运算JavaScript的问题。
14. 配置ETags
它用来判断浏览器缓存里的元素是否和原来服务器上的一致。比last-modified date更具有弹性,例如某个文件在1秒内修改了10次,Etag可以综合Inode(文件的索引节点(inode)数),MTime(修改时间)和Size来精准的进行判断,避开UNIX记录MTime只能精确到秒的问题。 服务器集群使用,可取后两个参数。使用ETags减少Web应用带宽和负载
15. 可缓存的AJAX
异步请求同样的造成用户等待,所以使用ajax请求时,要主动告诉浏览器如果该请求有缓存就去请求缓存内容。如下代码片段, cache:true就是显式的要求如果当前请求有缓存的话,直接使用缓存
$.ajax({ url : 'url', dataType : "json", cache: true, success : function(son, status){ }
16. 使用GET来完成AJAX请求
当使用XMLHttpRequest时,浏览器中的POST方法是一个“两步走”的过程:首先发送文件头,然后才发送数据。因此使用GET获取数据时更加有意义。
17. 减少DOM元素数量
这是一门大学问,这里可以引申出一堆优化的细节。想要具体研究的可以看后面推荐书籍。总之大原则减少DOM数量,就会减少浏览器的解析负担。
18. 避免404
比如外链的css、js文件出现问题返回404时,会破坏浏览器的并行加载。
19. 减少Cookie的大小
Cookie里面别塞那么多东西,因为每个请求都得带着他跑。
20. 使用无cookie的域
比如CSS、js、图片等,客户端请求静态文件的时候,减少了 Cookie 的反复传输对主域名的影响。
21. 不要使用滤镜
IE独有属性AlphaImageLoader用于修正7.0以下版本中显示PNG图片的半透明效果。这个滤镜的问题在于浏览器加载图片时它会终止内容的呈现并且冻结浏览器。在每一个元素(不仅仅是图片)它都会运算一次,增加了内存开支,因此它的问题是多方面的。
完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式来代替,这种格式能在IE中很好地工作。如果你确实需要使用AlphaImageLoader,请使用下划线_filter又使之对IE7以上版本的用户无效。
22. 不要在HTML中缩放图片
比如你需要的图片尺寸是50* 50
那就不用用一张500*500的大尺寸图片,影响加载
23. 缩小favicon.ico并缓存
⑹ 前端怎么并行开发
解决方案:多分支开发系统
服务端环境:SVN
客户端软件:小乌龟TortoiseSvn
分支、主干和标记:用于并行开发,当分支的功能完成后就可以合并到主干,而
利用标记就可以在任何时间创建一个发布版本。
注意,你可以建多个分支,但主干只能有一个
创建分支步骤:
1、首先,你应该在本地有一个需要创建分支的工作目录,如:E:\test
2、点击右键选中这个文件夹,选中TortoiseSVN->分支/标记(branches/tag)
接下来,会弹出对话框,要求你添加创建分支或标记的目标路径
三个版本选项:
最新版本 – 直接从版本库中最新创建,创建过程最快。
版本库中指定的版本号 – 可以通过指定的版本号进行创建。这种创建方式不需要从你的工作目录拷贝数据,速度较快。
工作副本 –
这种方式会依据当前工作拷贝的版本状况(无论是你做了本地的修改,或是将其中的某些文件更新到了一个历史版本)来创建分支拷贝。这种创建方式会根据工作副本中每个文件的版本情况来决定是否要从工作拷贝向版本库中传输数据。切换工作副本至分支/标记:
如果选中这个选项,顾名思义你用来创建分支或标记的工作拷贝就会自动切换到指定创建的版本或标记的。当然你可以通过Switch(重新定位)和Checkout(检出)功能来完成切换的工作。
版本切换:找到工作目录,点击右键展开菜单,点击switch(切换)
⑺ 前端是啥呢
前端到底是什么?
我们通俗一点的说,web前端就是我们可以直接查看的内容,包含用户可以看到和体验的一切,比如你浏览网站或使用 APP 的时候,各种各样的页面布局、图片、按钮、菜单、文字、视频等等,而后端是程序中无法被用户看到的这部分,进行数据交互及网站数据的保存和读取,它包含着所有的逻辑功能支撑着前端。
前端和后端在项目开发过程中都起着至关重要的作用,它们就像同一个硬币的两面,都起着重要的作用。
前端开发涉及到的技能主要有:Html、CSS、JavaScript、Java或kotlin(Android开发)、Object-C或Swift(iOS开发;当然也有很多前端的开发框架:Vue、React、Angular 等等;
后端开发语言比较多,现在 Java 占了大半壁江山,常用的框架或中间件诸如 Spring 全家桶、关系型数据库 MySQL、Oracle等、非关系型数据库 Redis、MongoDB、ES 等、消息中间件等等。
可以看到前端开发和后端开发的差别还是比较大的。
现在有一个非常流行的词儿叫做“前后端分离”,也就是前端工程和后端代码分开部署,前后端通过接口的方式进行连接,这样前后端的开发人员在约定好接口之后,就可以并行开发,并且一套后端可以支持不同的前端,实现后端代码的复用。
⑻ web前端,并行就必须发生在多核处理器上面吗注意这个词:必须。
1、不是的,并行是一种逻辑概念,指的是同时执行两个以上的任务(进程或线程)。这里的同时并不是绝对意义上的同时,比如你开两个桌面程序,这就叫并行。同理,前端上开两个以上任务(比如页面)也叫并行。
2、而多核处理器是物理意义上的东西,说的是一个CPU有2个以上的核心,这个与编程里的概念是完全无关的,也压根不应该放到一起来讨论。
⑼ 前端工程师的价值体现在哪里呢
前段工程师的作用非常大,在他们的努力下把所有呈现出来的东西都是最美的。
⑽ web前端和后端有哪些区别
前端和后端之间的区别
1、前端与后端的含义的区别
前端是用户可以看到和交互的网站的一部分,例如图形用户界面(GUI)和命令行,包括设计,导航菜单,文本,图像,视频等。相反,后端是部分用户无法查看和互动的网站。一切都是关于一切如何运作的。
2、前端与后端的作用的区别
两者都在网络开发中起着至关重要的作用,尽管它们有相当大的差异,但它们就像是同一枚硬币的两面。前端是关于用户可以看到和体验的网站的视觉方面。相反,在后台发生的所有事情都可归因于后端Web开发。它更像是前端Web体验的推动者。
3、前端与后端开发上的区别
前端也被称为“客户端”而不是后端,后端基本上是应用程序的“服务器端”。后端Web开发的基本要素包括Java,Ruby,Python,PHP,.Net等语言。最常见的前端语言是HTML,CSS和JavaScript。
如果您对前端和后端之间的差异仍然有点困惑,请始终记住前端与浏览器以及发送给它的所有内容相关。如果它与数据库有关,那么它与后端相关。
(10)前端并行扩展阅读:
web前端与后端解耦的好处
前端 - 后端解耦是相关的,特别是在Web应用程序和移动应用程序的情况下,因为开发和发布的速度非常快。在这些域中,用户体验优先于其他方面,包括功能深度。让我们看一下解耦架构提供的一些关键优势。
1、快速开发和测试:作为最大优势,解耦架构允许前端和后端开发人员独立工作。由于开发是并行进行的,因此减少了整个项目的时间。业务团队通常对项目的UI / UX部分的进展非常感兴趣,从而导致更快的前端部署。这有助于后端开发人员创建适合前端的数据结构。解耦架构允许项目团队独立并行地测试他们的构建,进一步优化项目持续时间。
2、敏捷性:作为另一个好处,UI团队可以对前端设计进行适当的更改,而无需担心依赖性和/或对后端进行相应的更改。以同样的方式,后端开发人员可以修改他们的代码,而无需冒险进入前端领域。例如,后端开发人员不必确切地考虑特定数据点将如何在屏幕上显示(反之亦然)。这提高了组织的运营效率,使其能够以更高的灵活性响应不断变化的市场需求。
3、开发人员自由:由于应用程序的后端和前端组件与API的谨慎使用松散耦合,因此可以最大限度地降低架构的整体复杂性。复杂性降低使开发人员可以自由地对代码进行更改,从而提高更新发布频率。