web前端工程师知识学习路线

想要成为一名优秀的web前端工程师(http://www.maiziedu.com/course/web/)需要具备哪些技能?因为web前端开发涵盖了许多领域的技术,那么需要掌握的技能有哪些呢?下面就一起来看看web前端工程师必备技能知识。

1、界面和用户体验

注意,浏览器的实现标准是不一致的,请确保你的网站能够兼容所有主流的浏览器。最少需要测试的有 Gecko 引擎(Firefox),WebKit引擎(Safari以及一些手机浏览器),Chrome,你所要支持的 IE 浏览器,以及 Opera。此外,你还需要了解不同系统下,浏览器是如何渲染网页的。

考虑一下人们不使用主流浏览器的情况,如手机,屏幕阅读器和搜索引擎。一些可用的辅助信息:WAI 和 Section508,移动开发:MobiForge。

阶段:如何在不影响用户的情况下部署更新。有一个或多个可以用来改变架构、代码或全部内容,并确保它们在可控范围内实现部署的测试或临时环境。有一种自动化的方式把更新部署到线上网站。最有效的实现方式是结合使用版本控制系统(CVS、Subversion等)和自动构建机制(Ant、NAnt等)。

不要直接向用户显示不友好的错误信息。

不要用纯文本的方式显示用户的电子邮件,因为他们可能会被垃圾邮件烦到死。

为用户生成的链接添加 rel=”nofollow” 属性,以避免垃圾邮件。

为你的网站建立周全的限制–这条也同时属于安全方面。

学习如何进一步的提高。

POST 提交成功后进行重定向,以免刷新造成重复提交。

别忘了考虑无障碍访问。这总是不错的,在某些情况下,这甚至是法律要求的。 WAI-ARIA 和 WCAG 2 里都有关于这方面很好的资源。

不要让我思考。

2、安全

OWASP开发指南 几乎覆盖了网站安全所有的内容。

了解注入,尤其是 SQL注入,并学会如何阻止它。

永远不要相信用户的输入,以及其他任何请求(包括Cookies和隐藏域的值)。

使用盐值(salt)哈希密码,并对不同的行使用不同的盐值,防止攻击。使用哈希算法如 bcrypt 或 scrypt(更安全,但比较新)(1, 2)来存储密码。(如何安全的存储密码)。NIST也允许使用PBKDF2来加密密码。避免直接使用 MD5 和 SHA 等算法。

不要企图拿出自己喜欢的认证系统。这是很容易出错的,并且是不可测的,甚至直到你被攻击了你才知道。

了解信用卡处理规则。(也可查看该问题)

在登录页和任何需要输入敏感数据的页面使用SSL/HTTPS。

防止 session 被劫持。

避免跨站脚本(XSS)。

避免点击劫持。

保持系统更新到最新的补丁。

确保数据库连接信息的安全。

让自己了解最新的攻击技术和会影响你平台的漏洞。

阅读谷歌浏览器安全手册。

阅读WEB应用黑客手册。

考虑最小特权原则,尽量使用非root用户运行服务器(以tomcat为例)。

3、性能

如果有必要的话,实现缓存,请正确理解和使用HTTP缓存。

优化图片。不要使用20K的图片作为平铺背景。

学习如何 gzip/deflate 内容(deflate效果更好)。

合并样式表与脚本文件以减小浏览器链接数,同时提高 gzip 的压缩能力。

浏览雅虎性能卓越的网站,以及大量的指南,其中包含提升前端性能和YSlow工具(需要安装Firefox, Safari, Chrome 或 Opera)。此外,Google page speed(浏览器扩展)也是一个性能分析工具,它同时可以优化你的图片。

对于小的如工具栏图片,使用CSS Image Sprites(参考最小化HTTP请求)。

访问量大的网站应该考虑跨域拆分组件。

静态内容(如图片、CSS、JavaScript及不需要访问cookie的内容)应该放在一个单独的域下,因为域及其子域的每一个请求都会发送cookie。这里是使用内容分发网络(CDN)的一个很好的选择。

减少浏览器渲染页面所需的HTTP请求的总数量。

利用Google Closure Compiler及其他压缩JS的工具。

确保网站根目录下有一个favicon.ico文件,即使在HTML中并没有提到它,浏览器也会自动加载它。如果你没有 /favicon.ico ,就会返回很多404错误,消耗服务器带宽。

4、SEO (Search Engine Optimization) 搜索引擎优化

在动态内容中,把 # 改成 #! ,然后在服务器端使用$_REQUEST["_escaped_fragment_"]。换句话说 ./#!page=1 变成了 ./?_escaped_fragments_=pa

ge=1。此外,对于使用 FF.b4 or Chromium 的用户,history.pushState({"foo":"bar"}, "About", "./?page=1"); 是一个非常棒的命令。因此,即使地址栏已经改变了,页面也不会刷新。

不要使用“点击这里”这样的链接。你是在浪费一个搜索引擎优化的机会,而且它让使用用屏幕阅读器人们更难阅读。

有一个XML网站地图,最好在默认位置 /sitemap.xml。

当有多个URL指向同一个内容的时候,使用 <link rel="canonical" ... /> ,这个问题可以通过 Google Webmaster Tools 来解决。

使用 Google Webmaster Tools 和 Bing Webmaster Tools。

安装 Google Analytics 或者其他开源分析工具如:Piwik。

了解 robots.txt 及搜索引擎蜘蛛 是如果工作的。

使用重定向(301)www.example.com 到 example.com(或者反过来),防止它们平分谷歌网站排名。

要知道有 badly-behaved 蜘蛛的存在。

如果你的网站有非文本内容,Tim Farley 的回答中有一些非常有用的信息。

5、技术

理解HTTP以及GET、POST、session、cookie以及“无状态”的意思。

撰写XHTML/HTML和CSS要遵循W3C规范,并确保它们通过校验。这样做的目的是为了避免浏览器的怪癖模式,并且这使得非标准浏览器如屏幕阅读器和移动设备更加容易实现。

理解浏览器是如何处理JavaScript 的。

理解JavaScript 、样式表、以及页面使用的其他资源是如何加载的,并考虑它们对感知性能的影响。现在普遍认同的一种做法是把除分析代码等以外的脚本文件放在页面底部。

了解JavaScript 沙箱是如何工作的,特别是当你想使用 iframe 的时候。

需要注意到,JavaScript是可以被禁用的,因此AJAX只是一个扩展,而不是基准。虽然大部分用户并没有禁用它,但记住,NoScript正在变得越来越流行。并且,谷歌在索引你的网站时也不会运行JavaScript。

学习 301 和 302 重定向之间的不同。

尽可能多地了解你的部署平台。

考虑使用 Reset Style Sheet 或 normalize.css。

考虑使用JavaScript框架(如jQuery, MooTools, Prototype, Dojo 或 YUI 3),这可以避免很多使用JavaScript操作DOM时的差异。

在考虑感知性能和框架的同时,考虑使用服务,如Google Libraries API,来加载框架,这样浏览器可以使用已经缓存的框架而不是从你的网站上下载。

不要重复造轮子。在做任何事情之前,先搜索相关的组件或者实例。99%的可能别人已经实现了并发布出了开源的代码。

在确定需求之前,尽量不要使用超过20个的库,这是非常不利的。特别是客户端WEB,保存轻便、快速、灵活是最重要的。

6、BUG修复

要了解你花费20%的时间写代码而花费80%的时间来维护,因此写代码时一定注意。

建立一个好的错误报告解决方案。

建立一个别人可以提建议和批评的系统。

为未来的支持人员和维护人员建立良好的文档。

经常备份!Ed Lucas 的回答中有一些建议。有一个恢复策略,而不只是一个备份策略。

使用版本控制系统,如 Subversion、Mercurial 或 Git。

不要忘记验收测试。Selenium 等框架可以帮到你

请确保您有足够的日志记录的地方,可以使用框架如log4j, log4net 或 log4r。当网站出现问题的时候,你需要能够找到问题所在。

日志要记录已处理异常和未处理异常。分析日志输出,因为它会显示出你网站的关键问题。

这里有些省略的东西并不是因为它们没用,而是因为它们过于详细或者超出了范围,或者说的太远了。当然,上面的内容可能也有一些遗漏或者错误。

时间: 2024-10-13 14:49:04

web前端工程师知识学习路线的相关文章

2018年web前端学习路线图,WEB前端开发新手学习路线

前端的的技术一直在变化,更新和变革,现在基本是三驾马车(vue,angualr,react)主导整个前端框架,但是无论对于新人或者有经验的程序员,这些知识在必须掌握,下面给大家一份详细的表单: html的语法.格局,常用的标签极端作用,了解标签的嵌套.学习运用firefox+firebug或许chrom的调试工具,可以运用这些工具调试html.css.js.断点调试.抓包 怎么引入css.js.了解id.class属性的区别,学会css的常用选择器,了解盒子模型(padding,margin,b

web前端工程师知识汇总

分类: Web开发应用 一.何为Web前端工程师? 前端工程师,也叫Web前端开发工程师.他是随着web发展,细分出来的行业.Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript/DOM/Flash等各种Web技术进行产品的界面开发.制作标准优化的代码,并增加交互动态功能,开发JavaScript以及Flash模块,同时结合后台开发技术模拟整体效果,进行丰富互联网的Web开发,致力于通过技术改善用户体验. Web前端工程师成长之路--知识汇总 图1.前端技术MSS W

想做web前端工程师应该学习些什么?

偶然间看到这篇文章,感觉博主写的挺不错的,如果你想做web前端工程师的话,建议您阅读以下这篇文章,其实web前端工程师所做的工作其实就是网站设计,有些小公司的美工其实就是做web前端的.这篇文章对于想学web前端工作的人有很大的帮助,如果您是做SEO的,也建议您学习下博主推荐的这些课程,或许对你以后的职业.薪资都有很大的帮助! 遇到很多新手,都会问,如果要学习web前端开发,需要学习什么?难不难?多久能入门?怎么能快速建一个网站?工资能拿到多少?还有些让我推荐一些培训机构什么的要去学习.我建议是

浅谈web前端就业的学习路线

初级前端 主要学习三个部分:HTML,CSS,JavaScript 一.html + css部分: 这部分特别简单,到网上搜资料,书籍视频非常多.css中盒子模型,流动,block,inline,层叠,样式优先级等这些自学起来也是非常容易.最后再深入了解下浏览器差异性,ie9以下兼容简单了解就行了,ie9以下浏览器被淘汰掉是趋势,低版本没必要浪费大量时间去学习兼容主流浏览器,google chrome浏览器.firefox浏览器.safari浏览器.opera浏览器即可.浏览器差异内容很多,建议

web前端基础知识学习网站推介

内容:一.基础知识及学习资料1. HTML入门学习:http://www.w3school.com.cn/html/index.aspHTML5 入门学习:http://www.w3school.com.cn/html5/index.asp 2. CSS入门学习:http://www.w3school.com.cn/css/index.aspCSS3入门学习:http://www.w3schools.com/css3/default.asphttp://css3-tutorial.com/ 3.

Web前端新手经典学习路线

给刚接触web前端的IT小白们的学习路线大家好,我是轻风乍起,本人从事前端8年了,总结了很多学习资料,有时间我会普及一些入门和提升建议,思想提升了,路线明确了自然就好了,于是就整理了下这篇学习路线文章,干货福利内容 在文末↓ 一.HTML.CSS基础.JavaScript语法基础.学完基础后,可以仿照电商网站(例如京东.小米)做首页的布局.二.JavaScript语法进阶.包括:作用域和闭包.this和对象原型等.相信我,JS语法,永远是面试中最重要的部分.三.jQuery.Ajax等.jQue

Web前端工程师成长之路——知识汇总

一.何为Web前端工程师? 前端工程师,也叫Web前端开发工程师.他是随着web发展,细分出来的行业.Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript/DOM/Flash等各种Web技术进行产品的界面开发.制作标准优化的代码,并增加交互动态功能,开发JavaScript以及Flash模块,同时结合后台开发技术模拟整体效果,进行丰富互联网的Web开发,致力于通过技术改善用户体验. 图1.前端技术MSS Web前端开发技术主要包括三个要素:HTML.CSS和JavaS

web前端工程师需要掌握哪些知识

随着互联网的发展速度迅猛,web前端工程师越来越火热,想学习Web前端开发吗 ? 若想成为web前端工程师需要掌握哪些知识?今天小编总结了成为web前端工程师需要掌握的所有知识. 一.基础 1.H5标签 1.1.H5引进的一些新的标签,需要注意article.header.footer.aside.nav以及HTML的标题结构 1.2.理解浏览器解析HTML的过程,理解DOM的树形结构,及相应API 1.3.理解HTML标签在各个浏览器上的默认样式(代理样式),理解CSS中的重置样式表的概念 1

web前端开发怎么样学习?看这份web前端学习路线

前端开发是创建Web页面或app等前端界面呈现给用户的过程.前端开发通过HTML,CSS及JavaScript以及衍生出来的各种技术.框架.解决方案,来实现互联网产品的用户界面交互.它从网页制作演变而来,名称上有很明显的时代特征.在互联网的演化进程中,网页制作是Web1.0时代的产物,早期网站主要内容都是静态,以图片和文字为主,用户使用网站的行为也以浏览为主.随着互联网技术的发展和HTML5.CSS3的应用,现代网页更加美观,交互效果显著,功能更加强大. 随着时代的发展,现在从事IT方向的人有很