搜索引擎优化高级编程(CSSJavaScript的简单教程，照着教程实现功能介绍！！)

　　搜索引擎优化高级编程(CSSJavaScript的简单教程，照着教程实现功能介绍！！)

　　在整个学习过程中，HTML、CSS、JavaScript都会有很多地方需要相互结合。实际工作中也是如此。一个简单的功能模块需要三者的结合才能实现。

　　动手操作是学习的重要组成部分。书籍侧重于知识点。例子可能还不够。这就需要借助搜索引擎找到一些简单的教程，根据教程实现功能。这里有一些不错的教程网址

　　可以搜索各大公司的前端校招笔试面试题作为练习题，也可以搜索别人总结的前端面试题，以及个人总结的面试题（附参考答案）

　　有各种教程

　　MDN也有很多教程，更重要的是有详细的文档。当你需要找一个功能时，谷歌搜索：xxx站点：

　　还有很多高质量的教程

　　原生 javascript 是一项需要掌握的技能。建议在掌握原生javascript的基础上再掌握jQuery，在实际工作中很有用。这方面的书是《学习jQuery》或者去jQuery官网

　　创建一个账号，保存平时学习中的各种代码和项目。

　　有了一定的基础后，可以建立个人博客，记录学习过程中遇到的问题和解决方法，方便大家查阅，为他人提供帮助。也可以去或点赞这个网站注册账号，方便实用

　　我经常用谷歌搜索英文资料。您应该始终从这里找到高质量的答案。如果你有精力，可以直接在这里搜索。如果你有精力，注册个账号为别人答疑也能大大提升你的个人能力。

　　阅读经典书籍后，您可以打开上面基本技能部分的链接。仔细阅读相应标准，全面掌握知识

　　继续改进

　　有了之前的基础，前端基本是初学者。这个时候大家心里可能已经有了一些学习的方向，如果还没有的话。你可以参考必备技能部分提到的两个项目，从中选择一些进行开发和学习。以下是一些好的方面：

　　Grunt：提高工作效率的前端自动化工具

　　less css：优秀的 CSS 预处理器

　　bootstrap：一个优秀的CSS框架，非常适合没有设计师的团队，结合少，效果完美

　　requirejs：AMD标准模块加载器，前端模块化趋势不可缺少的工具

　　Node.js：JavaScript也可以做后台，前端工程师地位高一级

　　AngularJS：单页应用的好工具

　　移动网络开发：智能手机的普及使得移动流量逐渐超过PC。

　　Javascript内存管理：SPA长期运行需要注意内存泄漏问题

　　高性能 JavaScript（构建更快的 Web 应用程序界面）

　　加快网站速度的最佳实践：重要技能

　　一些个人经历​​

　　LingyuCoder 的学习心得

　　以上大神都总结了，这里就废话了

　　工具

　　chrome dev tools：前端开发调试工具，重点关注几个功能：

　　控制台（废话）

　　elements：元素样式调整，非常常用

　　sources：给代码添加断点，单步调试，单步调试时查看内存中的对象

　　观察表达式：通过表达式查看当前内存中的值

　　调用栈：查看调用栈，打开async，可以看到异步调用栈（这个很有用，尤其是ajax调试的时候）

　　scope variables：作用域链上的变量，很有用

　　网络：抓包查看每个请求，非常重要，前后端联调必备

　　timeline：分析渲染、js执行等阶段，性能优化工具

　　emulation：模拟移动端环境，移动页面开发必不可少

　　一些插件：

　　liveload：修改页面后自动刷新，无需按F5

　　尺寸：直接在页面上进行测量的强大工具

　　livestyle：css样式修改后自动生效，无需刷新，修改后的元素也可以同步到代码中

　　图像工具：测量、取色

　　UC二维码：手机调试扫码必备

　　pagespeed、YSlow：页面性能分析优化插件

　　Marxico：优秀的在线降价编辑器，快速撰写每周报告并保持记录

　　sublime text2：编码方便，插件多，速度快，性能好

　　emmet：提高html编码速度所必需的

　　sublimelinter + lint 和各种语言的提示：代码纠错

　　一些片段：自动补全提高开发效率

　　Intellij IDEA和WebStorm：集成开发环境，集成各种功能，开发比sublime方便，但是会吃性能

　　Mark Men：测量、取色、标注的工具，拿到视觉稿后打开的第一个软件

　　GFW Fucker：我用的是红杏，如果我能买个虚拟服务器当梯子

　　iHosts：很好的主机管理软件，修改主机方便，开发调试必备

　　Charles：Mac平台最好的抓包分析工具

　　Rythem：AlloyTeam出品的代理抓包软件，非常轻巧，安装简单，方便移动端（真机）开发调试

　　Wunderlist：非常好的Todo List，在任务多、需求多的时候管理起来很方便。

　　技能

　　除了JavaScript（包括NodeJS）、HTML、CSS之外，前端其实还有很多技巧。其实前端技能树非常大，这里只能列举一些我在开发中看到的东西

　　语言基础

　　JavaScript：

　　作用域链、闭包、运行时上下文、this

　　原型链，继承

　　NodeJS 基础和通用 API

　　CSS：

　　选择器

　　浏览器兼容性和常见黑客处理

　　CSS布局的方法和原理（盒模型、BFC、IFC等）

　　CSS 3，如*敏*感*词*、渐变等

　　HTML：

　　语义标签

　　高级

　　JavaScript：

　　异步控制（Promise、ES6 generator、Async）

　　模块化开发方法（AMD、CMD、KMD等）

　　JavaScript解释器的一些相关知识

　　异步 ​​IO 实现

　　垃圾采集

　　事件队列

　　常用框架的使用及其原理

　　jQuery：一个基于选择器的框架，但我个人认为不能称之为框架。应该算是一个工具库，因为它没有模块加载机制，源代码非常适合阅读和学习

　　AngularJS/Avalon等MVVM框架：重点理解MVVM模型本身的概念和双向绑定的实现，如何解耦

　　underscore：优秀的工具库，简单易懂的常用工具代码片段的实现

　　polymer/React：组件开发，面向未来，理解组件开发原理

　　CSS 和 HTML：主要是 CSS3 和 HTML5 的特性，以及浏览器处理的过程和绘制原理

　　DOM树、CSSOM树、渲染树的构建过程以及页面渲染的过程

　　解析 HTML、CSS、JavaScript 导致的阻塞

　　HTML5 相关

　　SVG原理和矢量图

　　画布开发及*敏*感*词*原理（帧*敏*感*词*）

　　视频和音频

　　Flex box 布局方法

　　图标字体的使用

　　常用的NodeJs包：

　　koa

　　快递

　　下划线

　　异步

　　吞咽

　　咕噜声

　　连接

　　请求

　　一些想法：

　　响应式网站

　　优雅降级，渐进增强

　　别让我想

　　网页的可用性、可访问性和重要性

　　SEO搜索引擎优化，了解搜索引擎原理

　　SPA 的好处和问题

　　性能优化：

　　减少请求数量（sprite、combo）

　　善用缓存（应用缓存、http缓存、CDN、localstorage、sessionstorage、memo模式）

　　减少选择器消耗（从右到左），减少DOM操作（DOM和JavaScript解释器分离）

　　CSS 重排和重绘

　　项目

　　版本管理：Git是首选，我用过Git不想用SVN

　　Git：本地版本管理机制

　　SVN：远程中心的版本管理机制

　　自动化构建：主要是less、templates、coffee等的预处理，以及代码压缩合并

　　Gulp：基于流构建，速度快，模块质量好

　　Grunt：独立任务构建，速度慢，配置痛苦，灵活性高

　　预处理和模板引擎

　　less：语法简单，但功能有限

　　Jade、ejs、velocity等模板引擎，各有千秋

　　coffee：python工程师的最爱，没用过

　　环境建设：主要是将网上的代码映射到本地，在本地启动一个demo服务器。对于模拟数据的mock，不同的人有不同的看法。

　　本地代理：ihosts

　　自动化测试：当业务比较稳定时，可以使用自动化测试来减少测试事件，但是当需求比较大时，维护测试用例的成本会很高，自动化测试可能会起到相反的效果

　　茉莉花

　　摩卡

　　生态系统

　　npm

　　凉亭

　　spm

　　建立自己的博客

　　git 页面

　　己酸

　　杰基尔

　　未来

　　Web 组件：面向未来的组件开发方法

　　HTML 模板

　　阴影DOM

　　自定义元素

　　HTML 导入

　　移动端原生开发：这也是我们需要了解的。未来前端工程师会经常处理webview，也懂原生开发

　　其他

　　有些事情不需要代码测试就可以完成。参加实习的时候感触良多。这些就是我遇到的事情，我觉得我做得不好。

　　业务方面的思考：我个人非常缺乏这方面的内容，所以放在第一位，打码前多考虑业务

　　沟通和沟通技巧：这很重要。前端需要同时处理项目经理、产品、交互和后端。沟通不畅会造成很多无用的工作，耽误项目。

　　知识管理、时间管理：投入与产出的平衡，产出就是最好的投入。如何做好分享，参与社区，做好沟通，做好记录

　　对新技术的渴望和大胆尝试

　　入门

　　入门可以通过啃书来完成，但是书上的很多东西已经过时了。在啃书的同时，我们还要继续关注科技的新发展。以下是我认为不错的一些书籍：

　　《JavaScript Advanced Programming》：可以作为入门书，但也是进阶书籍。它可以快速吸收基础知识，等待改进。然后回来再读一遍

　　《JavaScript 权威指南》：不适合入门，但很有必要。如果你不明白，请检查一下。很有帮助。

　　“编写可维护的 JavaScript”和：

　　《Node.js 开发指南》：一本不错的 Nodejs 入门书

　　《Learning Node.js in a Simple Way》：Nodejs 进阶书籍，必备

　　《JavaScript异步编程》：理解JS异步编程的概念

　　《JavaScript Pattern》和《JavaScript Design Pattern》：JavaScript 代码模式和设计模式，将开发思维转化为 JavaScript，非常好的一本书

　　“JavaScript 框架设计”：在使用轮子时，您应该知道轮子是如何旋转的。解释非常详细。从源码层面对框架各部分的实现进行了说明。用现有的框架阅读，可以学到很多

　　“Dont make me think”：网页设计的概念，理解用户行为，很好

　　“CSS Zen Garden”：一部经久不衰的作品，同时也传达了网页设计中的概念和设计中需要注意的问题

　　《High-Performance JavaScript》和《High-Performance HTML5》：强调性能的书籍，不仅是性能优化，还有很多原理值得学习

　　《HTML5 Canvas核心技术》：我正在看的一本书，对canvas的使用、*敏*感*词*的实现、*敏*感*词*框架的开发很有帮助

　　《HTTP权威指南》：HTTP协议相关的必备知识，前端开发调试中经常涉及的知识

　　“响应式网页设计”：技术本身并不难，重要的是响应式网页的设计理念和移动优先的理念

　　《JavaScript语言精髓》：一本老书，也是一本普及JavaScript开发思维的好书，非常适合入门

　　一些不错的网站

　　github：没什么好说的，多看别人的源码，多上传自己的源码，向全世界的大牛学习

　　codepen：感受前端美的必选之地，里面有很多很酷的效果和优秀的插件

　　echojs：网站快速了解新的js信息

　　stackoverflow和segmentfault：基本上各种问题上面都能回答

　　google web基础：每一个文章都适合仔细阅读

　　静态文件：开放CDN，使用方便

　　iconfont：阿里的矢量图标库，很不错，支持CDN，支持项目

　　html5rocks：不错的网站，很多浏览器的新特性和前沿技术都可以在这里文章

　　css技巧：如何用好CSS，了解CSS的新特性，这里可以满足你

　　JavaScript Secret Garden JavaScript 初学者必看，非常好

　　w3cplus：前端学习网站，文章的质量还不错

　　节点学校：很好的节点学习网站

　　学习git分支：一个git学习网站，很好的互动

　　前端乱：前端文章共享的一个社区，有很多优秀的文章

　　正则表达式：正则表达式入门教程，非常值得一看

　　阮一峰的博客和张新旭的博客：了解一些知识的快捷方式，但如果需要深入挖掘，则需要其他资源

　　各行各业的大牛们的博客：太多了，就不贴了，知乎很多了

　　官方网站各种规格，看不懂的时候看规格

　　历史

　　我以前是Java SSH，前端出道，所以比较虚弱，遇到很多问题。入门基本上靠看W3C School上的书籍和教程，以及一些前端博客，比如Uncle Tom的博客。以前只用jQuery，对原生js没有太多研究。后来慢慢的看了很多动物书，比如古语精华。我从这些书中学到了很多语言知识。但这显然还不够，所以我经常去社区看看大家都在说什么，然后再看相关资料。如果我有兴趣，我会找到更多的材料来阅读，或者写一个演示。学习CSS主要是这样。后来开始多关注各种大牛的博客和一些更深入的书籍，以及一些新的知识和框架，不断练习向github提交代码，所以也学到了很多知识。在实习的过程中，亲自参与到实际的项目开发中，可以学到很多在学校学不到的概念和想法，也有很大的帮助。话不多说，我搬砖求报价……

　　MrRaindrop 的学习经历

　　应大神之邀，分享前端学习心得。前端知识体系结构这里就不做总结了。大神们的总结相当到位。我将贡献一些我认为仍然更有用的链接。就研究一下，接下来主要分享一下我在前端学习过程中遇到的问题和总结的经验。如果能帮助到想要入门的FE初学者（我假设是本文的读者受众类型），让他们少走弯路，每走一步都知道下一步的方向。这是最好的。各位大神的总结分享，请参考秋大神整理的FE-learning。

　　让我谈谈前端的事情。每个人都可以有适合自己的学习方法。本文仅供参考。有点乱，请看一下。

　　起源

　　我不小心碰到了前端。我一直在做游戏的方向。我玩过游戏网站，玩过游戏引擎，比如unity和虚幻商业引擎。游戏原型，不过自从进了实验室，就被导师派去写js了。导师给了我半个月的时间，写了一个基于百度地图API的数据展示页面。虽然这次的时间还是比较充裕的，但是之前没怎么写过js，也不知道怎么用map api，所以一边参考《Javascript权威指南》（Rhino Book），一边阅读实验室前辈留下的代码”，终于把所有的功能都写好了。 NS。那个页面算是我的js入门，也是我前端学习路线的开始。

　　现在想想，虽然被分派做前端，但还是要靠兴趣坚持做下去，做好。当然，前端是一个非常有趣的技术领域，社区每天都在“热闹”。

　　项目，下一个项目

　　我个人认为在前端学习，在开始阶段，完全可以摆脱书本，做项目驱动。虽然我个人是从犀牛书开始的，如果你没有足够的时间，或者你觉得它乏味无聊，不要像我一样。当然，如果你决定咀嚼这本书，最好按照书中的例子来做。去研究所之前从来没有接触过js。 4月份开学前，我被导师直接甩了一个百度地图api项目。然后有各种各样的ERP和地图数据显示，虽然它以不同的方式改变。 ，但基本上都是前端的工作。 SSH 和 android 开发也被用于酱油。我是整个实验室唯一一个写前端的人。敢相信吗？富客户端SPA时代后端是restful接口，代码量基本都在前端。写的时候怎么这么爽……期间跟着导师体验了一次创业，每天早上7点到晚上10点，也算是快速成长的时期。

　　要掌握一项技术，首先要掌握它的大体框架，想一个可以实现的想法，做一个可以运行的demo，然后完善它的细节。演示完成后，您对技术有了感性的了解。了解了，再去啃书，收获会大很多。我开始写，从原生js到jquery，再到extjs，再到angularjs，从导师指定技术，到自己选择技术，一个个项目的实践，就像打怪的升级。当然，如果您没有项目，您可以创建自己的项目。实现自己的想法既有趣又充实。

　　采集癖和知识管理

　　有前端学习的特点。很多东西都是零碎的、零散的，需要你自己去组织、总结、总结。在微博和知乎上关注许多大神。你不只是为了听八卦。有时，大神的话，留下无尽的回味。很可能你不小心提到的一个词会成为你的下一个词。一个学习目标。采集这些信息，善用谷歌，提问，思考。就像游戏中的采集元素一样，前端学习也是一个充满采集元素的“游戏”，但是你需要一个知识管理工具来充当库存和仓库。我认识的所有大牛都不是知识管理工具的重量级。用户。我以前用的oneNote当时并没有绑定云存储。现在基本都在用印象笔记，积累了1200多条笔记。书签一直是为了使用美味，因为它是基于标签管理的，但它从未被使用过。当然，重点不在于这些工具，而是得心应手的工具可以提高您的学习效率。最重要的当然是时刻保持强烈的学习欲望。你的目标是了解前端的一切（当然不是所有的都必须掌握，因为毕竟你的精力是有限的，现实来说，这是不太可能的）。

　　跟随上帝

　　这个控件好像不太好……我就不跟老大说了。在一定程度上，这取决于运气。不过话说回来，多和身边的高手多交流才是王道。大师不一定要高，但一定要对技术充满热情。读*敏*感*词*的时候很热情，每天7点进实验室，然后发现一个男生比我早到。后来才知道，这家伙早上走，下午又来了，教官也习惯了。原来这家伙一夜没睡，一晚上都在写代码，早上又跑回去睡觉了。后来经常和这个大神讨论问题，每次都觉得经验值上去了。然后实验室里还有一个神，被前面的通宵神描述为“只能期待，永远追赶，永远追不上”。两位神的特点是什么都知道一点，所以什么都可以和你讨论。嗯，做了一段时间的阅读计划，从c/c++到vc/mfc再到unix网络编程，终于在MSDN上一路看到了java的核心技术和C#编程指南，很能讲多与神。高。

　　总之，这两个大神把我拖进了坑里，或者从一个坑里跳到了另一个坑里。两位大神虽然不是前端，但技术上总有相似之处。

　　阅读

　　阅读，阅读更多，阅读好书。我在刘伟鹏的博客里看到过一个公式，你第一个月的工资等于你之前买（读）过的技术书籍的价格之和（这里所说的技术书籍是指那些经典的、公认的好书）。讨论这个公式的正确性似乎毫无意义，但其合理性是毋庸置疑的，那就是多看一些经典的技术书籍。最极端的例子，谷歌的徐友在我大学说，他把图书馆的TP312整个书架都扫了一遍……前端经典书籍，后面有我采集的前端书籍清单（如果有缺的前端经典，好书，请留言告诉我），如果可能，你可以尝试扫描这些书籍，我也在寻找完整的时间来完成它们。前面讲过，前端知识点松散，采集零散的知识点，快速学习博客等等，这些只是前端学习的一方面。要想深入了解一个知识体系，了解它的来龙去脉，建立对它的系统认识，阅读经典还是必不可少的。

　　我从一开始就读完了犀牛书，然后去看了其他一些和前端关系不大的经典技术书籍，然后逐渐开始通过实验室项目和前端领域的对比我做的一些小项目。 ，我读了《Javascript模式》、《Javascript设计模式》、《编写可维护的Javascript》，后来了解了node，开始用node做一些小工具，看了《NodeJS启动和运行》和《Mongodb权威指南》 ，不过感觉前者有点坑，当时朴玲的深入浅出（书没出版）还没出版，后来去图书馆查了一下，感觉不错看完了，但还是觉得没有读太多，还需要继续刷（参考上面的书栏）。

　　前端定位

　　前端的定位关系到你需要吸收什么样的知识和技能，决定了你在科技世界中需要特别敏感的东西。如果你认为前端只是停留在切页，满*敏*感*词*互和视觉的要求，那么你对前端的理解还处于初级阶段。当阿里终于面对时，我问了考官这个问题：前端技术日新月异，范围越来越广，标准越来越丰富。似乎任何触手都可以延伸很远。如何给前端一个合适的定位？考官给我分析了半天，然后总结了一句话，就是用户和用户体验的创造者网站之间的联系（原文不是这样的，但它基本上意味着这个）。换句话说，前端的最终目标其实是创造用户体验，提升用户体验，专注于用户体验。无论是从交互设计入手，还是从性能优化入手，还是通过改进工作流程来提高工作流程效率，最终的目标都是创造和提升用户体验，最终还是要体现在用户体验上。我觉得这个总结很有道理（当然，“用户体验”这个词太宽泛了，不仅仅是前端工程师的范畴，比如在开发后端时优化一个数据处理流程，提高整体性能，这也是对用户体验的提升）。

　　现在的前端工程师难免会接触到很多深度的问题，比如切页、实现视觉需求、实现交互，比如前端自动化、图片编程、性能优化等，某个阶段。它是 PHP/JSP/ASP/nodeJs。过去，后端模板一般都属于后端类。现在随着前端架构的演进，可能会要求写后端模板的代码，需要用到后端语言（PHP/Java/C#等），这个就是所谓的大前端（不过，这并不偏离前端的定位，大前端还是处理与用户接触的部分，仍然优化用户体验）。也许最常见或谈论最多的是节点。事实上，这些类型的技术是可用的。三蝙蝠说百度用PHP多，阿里用node多。

　　余叔在他的博客中提到，所谓full-end就是横向，full-stack就是纵向。全端是指所有终端都是前端，因为都是用户体验，直接接触用户。适应多终端开发需要你在web前端的基础上拓展android开发和ios开发的知识。幸运的是，由于混合开发的流行，使用母语开发的技巧不会那么深入。 .

　　全栈可以说是最适合创业公司的开发类型。广义上讲，就是从前端到后端，从开发到运维。这不是说，大多数人应该不想去。往这个方向发展，如果你想成为这个意义上的全栈开发者，你可能不需要看我的文章；而狭义的全栈是指使用js语言从前端写到nodeJs搭建在后端，统一语言，统一编程模型，甚至共享同一套代码。有关全栈开发的更多信息，请参阅 Yubo 关于全栈工程师的文章。

　　以上是我对前端和衍生技术路线的粗浅理解。学习一个领域，掌握它的整体趋势和趋势，还是很重要的。另外，如果你想对前端的学习方向和职业成长路径有一个全面的了解，建议看一看德驰总结的这个前端开发十日讲。

　　终于

　　贡献几个对前端学习和面试有帮助的链接：

　　Front-end-Developer-Interview-Questions (Front-end-Developer-Interview-Questions) ()

　　前端技能总结(JacksonTian)()

　　再来一张前端技能总结图（）

　　前端呢（书单）()

　　byr 论坛 yiyizym 的建议

　　相比于 grunt，学习 gulp 会更容易

　　SPA推荐使用backbone.js和backbone.marionette.js

　　FQ不用折腾，花十块钱买一个月杏。

　　如果你打下了坚实的基础，你可以再次学习。

　　html 没什么好说的，有时间学html5。

　　Try to read the css document as much as possible, because a lot of Chinese materials have their own opinions. If you read too much, you will be confused.

　　There is an 网站 to find the support of html/css tags and attributes in various browsers, which is very easy to use.

　　javascript depends on javascript advanced programming. But such a thick book will be forgotten after reading it. To explain the core concepts of javascript: object/prototype chain/constructor/execution context/scope chain/closure/this, here is a good article 文章.

　　If you have a leisure time, you can check out ecmascript 6, which is scheduled to be released in June next year. Ruan Yifeng's 网站 has introductory information.

　　jquery has many APIs, this 网站 can be easily found. Have time to figure out the usage of jquery deferred.

　　Install more plugins for sublimetext, such as checking code errors, creating new catalog files, and organizing code.