前端工程师 订阅
Web前端工程师是一种职业,主要职责是编写网页标准优化代码,并增加交互动态功能,开发JavaScript以及Flash模块,同时结合后台开发技术模拟整体效果,进行丰富互联网的Web开发,致力于通过技术改善用户体验。 [1] 展开全文
Web前端工程师是一种职业,主要职责是编写网页标准优化代码,并增加交互动态功能,开发JavaScript以及Flash模块,同时结合后台开发技术模拟整体效果,进行丰富互联网的Web开发,致力于通过技术改善用户体验。 [1]
信息
外文名
Web front-end developer
核心技术
HTML、CSS、JavaScript、jQuery [2]
主流框架
React.js、Vue.js、Angularjs等 [2]
中文名
Web前端开发工程师
内存管理技术简介
后台技术Node.js是一个Javascript运行环境(runtime)。实际上它是对Google V8引擎进行了封装。V8引 擎执行Javascript的速度非常快,性能非常好。Node.js对一些特殊用例进行了优化,提供了替代的API,使得V8在非浏览器环境下运行得更好。 Hybrid App(混合模式移动应用)是指介于web-app、native-app这两者之间的app,兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。主要采用JavaScript语言作为中间语言开发。因此,前端工程师所涵盖的职责范围,已经包含后端、跨平台等多种职能,不能简单地认为只是Web前端工程师。
收起全文
精华内容
参与话题
问答
  • 前端工程师的修真秘籍(css、javascript和其它)

    万次阅读 多人点赞 2014-05-05 11:02:24
    以我的经验,大部分技术,熟读下列四类书籍即可。  入门,用浅显的语言和方式讲述正确的道理和方法,如head first系列全面,巨细无遗地探讨每个细节,遇到疑难问题时往往可以在这里得到理论解答,如Definitive ...

    以我的经验,大部分技术,熟读下列四类书籍即可。 

    1. 入门,用浅显的语言和方式讲述正确的道理和方法,如head first系列
    2. 全面,巨细无遗地探讨每个细节,遇到疑难问题时往往可以在这里得到理论解答,如Definitive Guide/Programming xx系列
    3. 实践,结合实际中经常遇到的情景环境,来描述如何设计和解决问题,如cookbook系列
    4. 深入,讲解一些文化,思路,甚至于哲学上的东西,真正做到深入一种语言去编程,如unix编程艺术,程序员修炼之道等等

    那么,目前为止我认为最好的书是: 

    css: 

    1. 入门: Head First HTML and CSS, XHTML (中文版,第二版)这本2005年底的书依然是最易懂,清晰和正确的入门读物,去看看amazon排名就知道了
    2. 全面: CSS, The Definitive Guide (3th Edition) (《CSS权威指南(第3版)》)Meyer可能是css领域最权威和知名的作者,他在这本书里讲解了每个细节的实现和原理,更详细的东西恐怕只能从w3c那几乎不可读的文档中去寻找了
    3. 实践:CSS Mastery (2th Edition) (《精通CSS:高级Web标准解决方案(第2版)》)Andy budd恐怕是英国最出色的css作者,这本书用简单直接的方式论述了很多实践中组件的正确实现以及可替代方法,包括css3
    4. 深入:很遗憾,css在这方面还没有一本必读著作,也可能并不需要,因为到了这个程度,多是用户体验和视觉设计了,目前最接近的是 Transcending CSS (《超越CSS:Web设计艺术精髓(修订版) 》), 但不断的技术进化使得书中某些部分感觉有些落伍。


    关于css3, 她是一个模块化的渐进式增强,且以2.1为基础,因此,请学好css2再学习css3,这方面我认为只需要一本实践书即可,告诉你css3能做到什么,毕竟,原理是共通的。 

    The Book of CSS3 推荐这本,一个技术人员写的组织清晰的css3模块描述和实践指南,还包括浏览器的实现情况,2011年5月出版,是目前为止最好的。 

    javascript: 

    1. 入门:Eloquent Javascript 一位hacker写的编程入门,书中向hacker,open source, free software的欣赏和痴迷比比皆是, 比如官网下边那个向emacs致敬的console。作者很聪明,这本书的目标读者,beginners, 是不会因为这些小细节而向他叫好的。他想要的,只是把在其中浸淫多年的,真正意义上的编程精神,传达给初学者们而已。 少见地打败了对应的HeadFirst系列(Headfirst Javascript)
    2. 全面:Javascript, The Definitive Guide(6th edition) (《JavaScript权威指南(第6版)》)伴随我们web开发者成长的一本javascript圣经,一直以来都是无可争议的最好与最全面的js书籍,2011年出版了最新版。
    3. 实践:在目前的web开发环境中,我们都是在使用各种js框架,很少自己写框架来开发,因此这本书的位置,应该留给你所使用的框架。如果是jquery,我推荐 Jquery: Novice to Ninja (《JQUERY从菜鸟到忍者(第2版) 》)这本,框架方面的书,经常一本入门的就够了,因为更新实在太快,之后的研究学习只能全靠网络了。
    4. 深入:与css不同,js是一种真正的编程语言,所以对他的深入研究是一个长期的过程,css的深入更偏向技艺/工匠,而js更偏向设计/架构/艺术,我推荐以下几本从不同方面深入js的书,他们都是业界最顶级的js开发团队(yahoo)的成员和同事,因此思路是很统一的,著名的高性能网站建设指南1和2都出自这个团队。
    • Javascipt, The Good Parts (《JavaScript语言精粹(修订版) 》)由JSON的发明者撰写
    • Javascript Patterns (《JavaScript模式》)YSlow的合作开发者撰写
    • High Performance Javascript 最好的zakas的书,虽然我不太喜欢他

    附上一些即将出版,我非常想看的书,有先睹为快的朋友可以分享一下心得: 

    • Secrets of Javascript Ninja (好像没有中文版)Jquery作者John Resig最新著作
    • Node: Up and Running 认识一下流行的no-block js server
    • Javascript Web Applications (《基于MVC的JavaScript Web富应用开发》)这本号称是对当下js landscape的总结
    展开全文
  • 前端工程师

    2017-12-14 20:49:53
    前端工程师是做什么的?  前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色。从狭义上讲,前端工程师使用 HTML、CSS、JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品,涵盖用户PC...

    前端工程师是做什么的? 

    前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色。从狭义上讲,前端工程师使用 HTML、CSS、JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品,涵盖用户PC端、移动端网页,处理视觉和交互问题。从广义上来讲,所有用户终端产品与视觉和交互有关的部分,都是前端工程师的专业领域。

    2005年的时候大多数网页长这样: 

    现在的网页一般是这样的: 

    前端工程师的发展之路和前景是怎么样的?

    前端是一个相对比较新的行业,互联网发展早期(1995年~2005年)是没有专业的前端工程师的。随着互联网的发展,大约从2005年开始,正式的前端工程师角色被行业认可,到了2010年,互联网开始全面进入移动时代,前端工程师的地位越来越重要,前端领域的技术发展也越来越快,各种新的思想、设计模式、工具和平台都快速发展,对前端工程师的技能要求也越来越高。


    有一些数据可以说明前端行业的发展迅速。

    在2010年之后最流行的新编程语言中有相当部分和前端有关,比如 Dart、Clojure、CoffeeScript 和 TypeScript。

    作为前端最重要的编程语言 JavaScript,在最近几年里不论是代码量还是关注数都稳居 Github 平台热门编程语言榜。

    行业对前端需求量持续增加,前端程序员薪水在行业里面处于较领先的位置。


    近年来最流行的编程语言很多都是JavaScript替代语言


    JavaScript在最热编程语言 TOP10


    近几年互联网公司前端团队每年扩张一倍


    JavaScript工程师平均薪水排名在程序语言工程师收入前10

    前端工程师需要什么样的知识和技能?

    有人说前端工程师的技术栈是这样的: 

    还有人说是这样的: 

    实际上前端工程师最核心的技能还是: 

    在一个典型的互联网公司的产品研发流程中,前端工程师和其他角色的关系大致上是这样的: 

    前端是最接近产品和设计的工程师,起到衔接产品和技术的作用,前端为用户可以看到的部分负责,所以也是最接近用户的工程师。 
    在多终端的时代,如果一个产品同时支持PC、移动端,前端工程师还需要和更多的角色打交道: 

    JavaScript 对于前端是最重要的技能,所以优秀的前端工程师要有扎实的JavaScript基本功。而JavaScript这门编程语言也是目前程序设计领域炙手可热的宠儿,如今的它不仅仅只是用来开发Web,还可以用在各个方面。 

    JavaScript 可以用在“树莓派”这类智能硬件芯片开发

    前端工程师也是软件工程师,所以软件工程师的基础知识也是非常重要的,这些基础知识包括: 
    - 数学

    • 计算机体系
    • 操作系统
    • 数据结构和算法
    • 编译原理

    HTML和CSS也是前端工程师非常重要的基本功,很多同学,尤其是喜欢写代码的同学容易忽视 Markup Language,实际上 ML 也是 UI 相关的领域里面很重要的内容,不应该被忽视。

    • HTML: The Living Standard
    • HTML & CSS

    有同学问说:“前端工作需求很多,老是改来改去,实际的技术点并没有多少,产品决定业务逻辑,从事底层基础服务会不会更有挑战和职业未来?”

    的确,越贴近业务和产品层面上的工作,需求差异性越大,可能改动越频繁。不仅仅是前端改来改去,PHP服务端做业务的同学也面临这样的问题,业务逻辑改来改去。越底层通用性越强,改动相对较少。

    不过事情都是有两面性的,首先可以这么想想,是底层基础服务的市场大还是互联网业务和产品的市场大。其次,基础服务的通用性很容易达成,而产品层面上如何通用化,如何在业务驱动的产品研发中利用工程化和工具化提升开发效率,这其实是一个很难的问题。丰富的互联网产品已改变和正在改变着我们的生活,然而作为产品的创造者,工程师们怎样让自己过得更好,这个领域值得研究。

    另外,不要觉得实际的技术点没有多少,举几个例子:实现曲线和曲面动画,计算地图的最短路径,让png静态图片类似于gif图一样做局部的运动,抽奖游戏,物理效果的HTML5游戏,3D图表,增强现实的WebGL视频流处理等等,这些都是在前端领域中遇到的实际问题。

    就 JavaScript 来说,在实际项目中设计最合适的模型高效率解决现实问题本身就很有挑战。作为一种典型的新生代编程语言,JavaScript 特性丰富,使用灵活,性能优良。面向对象、函数式编程、各种设计模式、MVC 和 MVVM,这些本身就有足够的吸引力。

    前端要解决界面和交互问题,实际上UI层面上的问题一直是软件工程方面的一个难题,因为UI不停地在变化。浏览器各个版本的兼容性、Web 标准、移动设备、多终端适配,给了前端工程师很大的挑战,对前端工程师的能力也有很高的要求。许多UI问题有不只一种解决方法,许多问题有非常巧妙的思路和精彩的解决办法,前端在工程师群体里是属于非常有创造力的一个群体,因为这个行业需要丰富的创造力和想象力。

    前端工程师还是Web标准的制定者、实践者和推动者,而现在的W3C标准不仅仅局限于浏览器,还包括各种手持智能设备,车载设备、智能家居等等。在未来万物互联的时代,前端将不仅仅是网页上的工程师,而是所有人机交互领域的工程师。

    前端工程师的学习和成长

    前端领域发展很快,各种新技术新思想不断涌现,这是一个好现象。但是前端发展太快也带来一些问题,比如有同学就问到我究竟应该学些什么,Angular.js、React、Node.js、ES6、ES7、CoffeeScript、TypeScript……似乎永远有太多东西需要学习,有些东西好像还没学明白就被另一些新的技术取代而“过时了”。

    其实还是那句话,前端工程师首先是软件工程师,基础是最重要的,如果基础不扎实,一切应用技能就都是“浮云”。前端的基础是什么?HTML、CSS、JavaScript基本功数学、算法、数据结构、操作系统、编译原理基本功

    一个优秀的前端工程师必须要有自己擅长的领域,并且钻研得足够深入,同时要有眼界,能“跨界”。可以以前端作为职业,但千万不要把自己的技能限制在前端领域,因为有很多东西,只有站在前端之外,才能看得更清晰,更透彻。

    学东西千万别盲目跟风,大家都在谈AngularJS就立即跑去学习,过几天大家都谈React了,就又放下AngularJS去学习React。前端领域知识点很多,值得学的东西也很多,聪明的同学懂得花时间学习成体系的知识并且研究得足够深入,因为只有这样才能从中总结出规律,形成方法论,这样才能最大化学习的价值。

    知识的正确用法 —— 一个领域里面的大师永远不会是另一个类似领域的菜鸟

    这次前端星计划布置的一个实现带有农历和节气的万年历,有些同学卡在农历计算上,大约70%的同学懂得去网上找代码,但只有不到1%的同学真正弄明白农历计算的原理。

    在面试的时候,面试官问到如何做前端性能优化,有的同学能够拿雅虎的性能优化军规回答得头头是道,反复强调使用工具压缩静态资源,但是自己搭建的博客的nginx服务却没有开启gzip。都知道说要合并静态资源,要减少HTTP请求,然而为什么要减少HTTP请求,减少请求之后预计能改善多少性能,获得多少收益呢?需要弄明白这些问题,也需要深入了解HTTP协议本身。

    还有一个更有趣的问题,大家都说写HTML的关键是语义化,那么到底什么是语义化呢?这个问题难住了不少同学。标签要符合语义,这个答案看似简单标准,但什么样的标签才是符合语义?强调用 strong 不用 b?那如果有个外星文明,它们的语言里 strong 相当于地球的 bold,bold 相当于地球的 strong,那么它们究竟该用 strong 还是用 b?我们说 i 标签是斜体的意思,那为什么fontawesome.io 拿它做 icon font 的标签,这是不是“反语义”的?

    过去很多地方农村有一种民间的染坊,制作染布的染料。这种染房里面有一口很大的铁缸,通常都要有一个身体非常强壮的工人拿一根很长的铁棒在染缸里面用力地敲击,敲得越响,制作出来的染料颜色越鲜艳。 为什么越用力敲打铁缸染料就越好?染坊的人说这是祖祖辈辈传下来的经验,而事实上也是如此,真的染料的颜色和敲打用力有很大关系。直到有一天,一位从村里走出去学化学的大学生,弄明白了原来只需要在染料中加适当比例的铁屑,就能让染料和含铁元素氧化物产生化学反应而变得更鲜艳。原来祖祖辈辈传下来的“仪式”实际上在真实原理面前只是一种信仰和宗教。同样,如果我们不去了解技术的本质而止步于应用,那么我们就只是技术宗教的信徒。所以在周爱民老师的《JavaScript 语言精髓与编程实践》中说,计算机语言如同祭司手中的神杖,神杖换了,祭司还是祭司,世人还是会把头叩得山响。祭司掌握了与神交流的方法,而世人只看见了神杖

    由兴趣选择前端

    在我学程序设计的最初,我学习的是C语言,然而整整一本书除了教我如何在黑洞洞的控制台上输出 Hello World 和各种其他字符或者用键盘输入一些什么然后依然是字符输出外,就没有什么其他的内容了。学习了一段时间之后,我的内心一度是崩溃的,因为我觉得这和我想得不一样,学了那么多知识,我都不知道自己究竟算不算是“学会”了C语言,因为在我看来,那些丰富多彩的操作系统和各种应用软件和黑洞洞的控制台之间明显还有着非常巨大的鸿沟。

    事后回想起来,当时的想法当然是幼稚可笑的,那时候的我并不知道程序语言和运行环境之间的区别,对操作系统、用户API、硬件接口、网络服务等等都完全不了解。然而这并不能怪我,因为C语言的教程并没有任何一言半语来告诉我这一点,我也不知道学习了C语言的语法之后接下来还应该学习些什么。

    相对来说,Web开发更吸引我,因为不需要安装任何环境,只需要在文本编辑器里面输入一些字符,保存后打开浏览器,马上就能看到丰富的视觉效果,这就是前端的优势,你所做的努力立即就能看得见。

    相对于死板的输入输出,Web开发在界面可见的一层要丰富多彩得多,这一点吸引了我,如果这一点也能吸引你,让你着迷,那么你就适合学习前端。

    在选择前端作为职业之前,要明确判断自己对前端开发的确感兴趣,选择做前端,应该是确认自己喜欢和适合做前端,而不是为了一份看起来体面而且薪水不菲的工作。如果你对构建丰富多彩的界面、处理各种交互逻辑不感兴趣,甚至厌烦,那么最明智的选择是放弃成为前端工程师的想法 —— 因为选择一个自己不喜欢的职业,为之忍受数十年直到退休,实在是一件很悲催的事情。

    对在校学生,我们看重哪方面能力?

    有同学问,360前端是否一定要求实际经验的学生,在这里我可以回答:否。

    对于学生,我们比较关心的是:

    • 基础:包括数学、算法、数据结构、计算机相关基础的掌握。 
      学习能力和学习方法:如何学的前端,学了多久,学到什么程度,遇到过什么问题,是如何尝试解决这些问题。

    • 兴趣:对前端的兴趣如何,这一点可以体现在很多细节上。有一个反面的例子比较常见,一般来说我会问学生最近在关注什么前端新知识,有的学生会说我关注某某某,但当我再问他究竟关注到什么程度,会发现他实际上根本没有在这项新知识上花费多少时间。如果你对感兴趣的问题都不花费时间,如何证明你自己对前端的“兴趣”呢。

    • 解决问题的能力:遇到难题如何解决的,遇到没接触过的问题是如何思考和最终解决的。从这里可以判断出同学有没有前端思维,这些问题没有标准答案,我们不追求某些“官方思路”,看重过程而不是结果。

    关于简历,有同学提到说现在似乎很多公司都希望学生会点 Node.js,会点 React,我自己不会该怎么办。

    我想说的是,我们并不要求学生必须会这些。相反,我个人更鼓励学生利用时间打好基础。简历上写自己真正擅长的内容即可,我们不会因为在你的简历上看不到 Node.js 或者 React 就忽略你。只要你真心热爱前端并用心学了,你应该明白如何用前端基础来打动我。有的学生喜欢在简历上堆砌词汇,实际上这一点不见得好,因为如果你写了一个你自己一知半解的东西,最后在面试中被面到了,一定会得负分的。

    技术本身是有深度的,A 同学说“我知道React但没用它做过东西”, B 同学说“我用AngularJS写过一些个人的小项目”, C 同学说“我上个月使用弹性布局的思路来写我的博客,结果在Android系统4.1版本的Webkit浏览器下出现了一个显示bug,最后我是这样这样解决的”。你们说 A、B、C 三个同学我们会选择哪个同学?

    面试是一个彼此交流的过程,我们希望看到大家在前端领域的能力和潜力,“知道”一件事,并不是一种有价值的能力,尤其是在知识廉价的互联网时代。我们的同学千万不要像背书一样去死记硬背一样东西,而应该真正用心去学。我们的高等学校不仅仅教授大家知识,还有如何真正学习和做研究,不是吗?

    如果你对前端真的感兴趣并有潜力,花点小心思,你该知道如何学习它。

    最后,祝愿大家都能成为优秀的前端工程师。

    我有一个前端学习交流QQ群:328058344 如果你在学习前端的过程中遇到什么问题,欢迎来我的QQ群提问,群里每天还会更新一些学习资源。禁止闲聊,非喜勿进。

    展开全文
  • 初级前端工程师课程导航

    千人学习 2017-12-25 13:30:38
    本课程是《初级前端工程师系列课程》的导学目录,需要适配相应的课程才能融汇贯通
  • 前端工程师知识体系

    千次阅读 多人点赞 2015-08-02 09:55:07
    前端知识体系

    (自己收藏一份)

    这里写图片描述

    (网易推荐的课程)

    这里写图片描述

    展开全文
  • 前端工程师之jquery实战案例大集合

    万人学习 2015-07-20 10:07:47
    详细介绍了一个js类库的实战应用,这里主要讲解jquery。是一个可以很容易就做各种网页特效的面相对象的方法函数集合类库。
  • 每个前端工程师都应该懂的前端性能优化总结:

    万次阅读 多人点赞 2020-04-02 10:57:44
    文章目录采用css雪碧图(css sprite/css图片精灵)技术在项目中,我们最好把css或者js文件进行合并或者压缩,尤其是在移动端开发的时候,如果css或者j s内容不是很多,我们可以采用内嵌式,以此减少http的请求次数,...

    采用css雪碧图(css sprite/css图片精灵)技术

    采用css雪碧图(css sprite/css图片精灵)技术,把一些小图合并到一张大图上,使用的时候通过背景图片定位,定位到具体的某一张小图片上
    css代码如下:

    .pubBg{
    	background: url('././img/sprit.png') no-repeat;
      background-size: 0 0 /*和原图大小保持一致*/
    }
    .box {
    	background-position: x y; /*通过背景定位,定位到具体的位置,展示不同的图片即可*/
    }
    


    html代码:

    <div class="pubBg box"></div>
    

    优点:减少HTTP的请求次数或者减少请求数据的大小,因为页面中每发送一次http请求,都需要完成请求+响应这个完整的http事务,会消耗一些时间,也可能会导致http链接通道的阻塞,为了提高页面加载速度和运行的性能,我们应该减少http的请求次数和减少请求内容的大小(请求内容越大,消耗的时间越长)。

    在项目中,我们最好把css或者js文件进行合并或者压缩,尤其是在移动端开发的时候,如果css或者j s内容不是很多,我们可以采用内嵌式,以此减少http的请求次数,加快页面加载速度

    1. css合并成一个,js也最好合并
    2. 首页通过一些工具(例如: webpack)把合并后的css或者js压缩成x xx.min.js减少文件大小
    3. 服务器开启资源文件的GZIP压缩
    4. 通过一些自动化工具完成css以及js的合并压缩,或者再完成less转css,es6转es5等操作,我们这种自动化构建模式,称之为前端“工程化”开发

    采用图片懒加载技术,在页面开始加载的时候,不请求真实图片地址,而是用默认图占位,当前页面加载完成后,在根据相关的条件依次加载真实图片(减少页面首次加载http请求的次数)

    在实际项目中,我们开始图片都不加载,页面首次加载完成后,先把第一屏幕中可以看见的图片进行加载,随着页面滚动,再把下面区域中能够呈现出来的图片进行加载。
    根据图片的恶懒加载技术,还可以扩充出,数据的懒加载

    • 开始加载页面的时候,我们只把首屏或者前两屏的数据从服务器端进行请求(有些网站首屏数据是后端渲染好,整体返回给客户端呈现的)
    • 当页面下拉,滚动到某个区域,再把这个区域需要的数据进行请求,(请求回来做数据绑定以及图片延迟加载等)
    • 分页展示技术采用的也是数据的懒加载思想实现的:如果我们请求获取的数据是很多的数据,我们最好分批请求,开始只请求一页的数据,当用户点击其他页的时候,再请求那页的数据

    对于不经常更新的数据,最好采用浏览器的304缓存左处理,主要由服务器处理(减少http请求次数)

    例: 第一个请求css和js下来,浏览器会把请求的内容缓存起来,如果做了304处理,用户再次请求css和js,直接从缓存中读取,不再请求服务器获取(减少http请求次数)
    当用户强制刷新页面,或者当前缓存的css和js发生了变动,都会重新从服务器获取
    对于客户端来讲,我们还可以基于localStorage来做一些本地存储。

    使用字体图标代替一些页面中的位图(图片),这样不仅做适配的时候方便,而且更加轻量级,而且减少了htttp请求次数(类似雪碧图)

    如果当前页面中出现了AUDIO或者VIDEO标签,我们最好设置它们的preload为none,页面加载的时候,音视频资源不进行加载,播放的时候再进行加载,(减少页面首次加载HTTP请求的次数)

    preload为auto,页面首次加载的时候就把音视频资源进行加载;
    preload为metadata: 页面首次加载的时候只把音视频资源的头部信息进行加载

    在客户端和服务器端进行数据通信的时候,我们尽量采用json格式进行数据传输

    优势:

    1. json格式数据,能够清晰明了的展示数据结构,而且也方便我们获取和操作
    2. 相对于很早以前的xml格式传输,json格式的数据更加轻量级
    3. 客户端和服务器端都支持json格式数据的处理,处理起来非常的方便

    在真实项目中,并不是所有的数据都要基于json,我们尽可能这样做,但对于某些特殊需求(例如文件流传输或者文档传输),使用json就合不合适了

    采用CDN加速

    cdn: 分布式(地域分布式)

    关于编写代码时候的一些优化技巧

    除了减少http请求次数和大小可以优化性能,在编写代码的时候,也可以进行一些优化,让页面性能有所提升(不好的代码编写习惯,会导致页面性能消耗太大,例如:内存泄露)

    1. 在编写js代码的时候,尽量减少对DOM的操作。在js中操作DOM是一个非常消耗性能的事情,但是我们又不可能避免的操作DOM,我们只能尽量减少对于DOM的操作

    操作DOM弊端:

    • DOM存在映射机制(js中的DOM元素对象和页面的DOM结构是存在映射机制的,一改则都是改),这种映射机制,是浏览器按照W3C标准完成对JS语言的构建和DOM的构建(其实就是构建了一个监听机制),操作DOM是同时要修改两个地方,相对于一些其他的js编程来说是消耗性能的。
    • 页面中的DOM结构改变或者样式改变,会触发浏览器的回流(浏览器会把DOM结构重新进行计算,这个操作很消耗性能)和重绘(把一个元素的样式重新渲染)
    1. 编写代码的时候,更多的使用异步编程

    同步编程会导致: 上面的东西完不成,下面任务也做不了,开发的时候,可以把某一个区域模块都设置为异步编程,这样只要模块之间没有必然的先后顺序,都可以独立进行加载,不会受到上面模块的堵塞影响(用的比较少)。
    尤其是ajax数据请求,我们一般都要使用异步编程,最好是基于promise设计模式进行管理(项目中经常使用fetch、vue axios等插件,来进行ajax请求处理,因为这些插件中就是基于promise设计模式对ajax进行封装处理)

    1. 在实际项目中,我们尽可能避免一次性循环过多的数据(因为循环操作是同步编程),尤其是避免while导致的死循环操作
    2. css选择器优化
    • 尽量减少标签选择器的使用
    • 尽量少使用id选择器,多使用样式类选择器(通用性比较强)
    • 减少选择器前面的前缀(选择器是从右向左查找的,前缀多,查询的时间多)
    1. 避免使用css表达式
    2. 减少页面中的冗余代码,尽可能提高方法的重复使用率:“低耦合高内聚”
    3. 最好css放在head中,js放在body尾部,让页面加载的时候,先加载css,再加载js(先呈现页面,再给用户提供操作)
    4. js中避免使用eval
    • 性能消耗大
    • 代码压缩后,容易出现代码执行错话问题
    1. js中尽量减少闭包使用
    • 闭包会形成一个不销毁的栈内存,过多的栈内存累积会影响页面的性能
    • 还会容易造成内存的泄漏

    闭包也有自己的优势:保存和保护,我们不能避免,我们只能尽量减少

    1. 在做dom事件绑定的时候,尽量避免一个个的事件绑定,而是采用性能更高的事件委托来实现
    • 事件委托(事件代理)
    • 把事件绑定给外层容器,当里面的后代元素相关行为被触发,外层容器绑定的方法也会被触发执行(冒泡传播机制导致)通过事件源是谁,我们做不同的操作即可
    1. 尽量使用css3动画代替js动画,因为css3的动画或者变形都开启了硬件加速,性能比js动画好。
    2. 编写js代码的时候,尽可能使用设计模式来构建体系,方便后期的维护,也提高了扩充性
    3. css中减少对滤镜的使用,页面中减少队友flash的使用

    关于页面的SEO优化技巧

    1. 页面中杜绝出现死链接(404页面),而且对于用户输入一个错误页面,我们要引导到404提示页面中(服务器处理的)。
    2. 避免浏览器中异常错误抛出
    • 尽量避免代码出错
    • 使用try catch做异常信息捕获
    1. 增加页面关键词优化

    总结

    这篇文章主要分享了一些前端性能优化的方法,从不同角度考虑,比如减少http请求,编写代码的一些优化技巧,页面seo优化的一些技巧等。

    展开全文
  • 什么是前端工程师前端工程师需要掌握什么技能?前言前端工程师是一个出现了10年左右,而颇受重视则是最近这五六年的事情。受到重视到前端从业人员井喷,也就是这一两年而已。因为前端工程师这个职位出现得太晚,...
  • 资源名称:web前端工程师如何自学 中文PDF版内容简介: 随着互联网的发展速度迅猛,web前端工程师越来越火热,想学习Web前端开发吗? 若想成为web前端工程师需要掌握哪些知识?今天小编总结了成为web前端工程师需要...
  • Web前端工程师修炼之道(第4版),完整扫描版

    千次下载 热门讨论 2015-12-29 10:00:17
    《Web前端工程师修炼之道(原书第4版)》主要内容: ■使用文本、链接、图像、表格和表单来创建HTML页面 ■使用CSS调整颜色、背景、格式化文本、页面布局,甚至是实现简单的动画效果 ■学习新的HTML5元素、API和CSS3...
  • 中级WEB前端工程师

    2018-06-06 00:00:41
    中级WEB前端工程师中级WEB前端工程师中级WEB前端工程师中级WEB前端工程师中级WEB前端工程师
  • Web前端工程师,相信大家都不陌生,主要是完成客户端程序(也就是浏览器端)的开发,开发JavaScript以及Flash模块,同时结合后台开发技术模拟整体效果,进行丰富互联网的Web开发,致力于通过技术改善用户体验。...
  • 目前web前端工程师的年薪待遇平均在10万以上,高级HTML前端工程师年薪达30—50万,很多企业对于与web前端相关的技术职位更是求贤若渴。 那么,前端开发工程师需要了解哪些技术呢?直接上图! ...
  • 那时候找个前端工作有多难,阳叔压根就没有更多实战经验,简历海投,太平保险的都给我打电话,叫我去面试销售;住在北京昌平贫民窟,500块钱的屋子,耗子三只,每天我写代码,耗子看着我在离我远处活动;我睡觉,...
  • 前端工程师简历

    万次阅读 2018-07-18 10:12:35
    总结一下 理解Web,W3C标准 (一淘,SAE,云适配,Zealer,小米,蘑菇街,DNSpod,百姓网) jQuery (云适配,金蚕网络,小米) 跨浏览器适配 (一淘,Zealer,蘑菇街,) HTML5 (云适配,小米,金蚕网络,DNSPod,......
  • 前端工程师必备技能

    2018-02-07 16:56:22
    前端工程师必备技能前端工程师必备技能前端工程师必备技能
  • 但我发现,鼓吹前端往全栈转型做的有点走火入魔,有的说前端应该成为K型人才,甚至部分招聘前端工程师的要求都写着:熟悉后端至少一门语言和框架,熟悉数据库。 过分了啊。 诚然,有了Node,再加上JavaScript大...
  • 阿里巴巴前端委员会推荐!覆盖5大热点前端技术方向、10+核心实战的前端手册--《2020前端工程师必读手册》已经正式上线了,大家可以免费下载了!解锁前端新方式,挖掘前端新思路,尽在此刻,赶紧来先睹为快!
  • 前端工程师是什么? 首先简单的描述下前端工程师前端工程师首先是一份工作,是互联网行业的一中职业的总称。 需要掌握的技能有: html:html是网页的基本组成成分,类似于房子的骨架,砖头等; css:css是装饰...
  • 前端工程师应聘简历模板是一款程序员简历HTML5模板下载。提示:本模板调用到谷歌字体库,可能会出现页面打开比较缓慢。
  • 前端工程师简历模板

    2018-05-24 12:57:16
    帮助学Web前端的设计师投简历时的简历模板,还有写简历会遇到的问题
  • 前端工程师面试必备。是一整套标准的模拟题目。对面试很有帮助。一、 填空题(20分)二、选择题(20分)三、问答题(60分)
  • 11个前端工程师必备的网站

    千次阅读 多人点赞 2020-03-02 12:38:21
    好多小伙伴有疑问,就是说有哪些值得去关注的前端网站,我知道大家可能都苦于找不到一些有价值的,还有值得信赖的网站去学一些比较货真价实的前端技术。生怕有哪些水文或者是一些乱七八糟的网站,把咱们的这个知识给...
  • 本套课程是摘选自JS++第三期前端工程师精英就业班系列课程,进行系统深度的对Sass技术知识点梳理、企业级开发技巧与实战经验,且通过Sass的实战开发,增强对企业项目开发的技能,是一套不可错过的就业需求的Sass课程
  • 史上最全面的前端工程师知识体系总结。

空空如也

1 2 3 4 5 ... 20
收藏数 22,253
精华内容 8,901
热门标签
关键字:

前端工程师