1. 前端工程师怎样提高开发效率
前端工程师其实是一个工作很杂的职位，除了要负责切图、写html/css/js外，还要处理一系列的浏览器兼容性问题、优化网页性能等，所以提高前端工程师的开发效率是势在必行的，也是前端共工程化的体现。那么如何提高便可以按照前端工程师涉及的工作点来进行划分。下面我就介绍下平时我在工作中使用的一些提高开发效率的方法。
当然除了以上5点，对于前端来说需要提高开发效率的地方还有很多，可谓任重而道远。希望以上几点能够给初识前端的同学带来启发并能够亲自实践。
2. web前端开发面临的挑战主要是有哪些
平时工作，多数是开发Web项目，由于一般是开发内部使用的业务系统，所以对于安全性一般不是看的很重，基本上由于是内网系统，一般也很少会受到攻击，但有时候一些系统平台，需要外网也要使用，这种情况下，各方面的安全性就要求比较高了。
1、测试的步骤及内容
这些安全性测试，据了解一般是先收集数据，然后进行相关的渗透测试工作，获取到网站或者系统的一些敏感数据，从而可能达到控制或者破坏系统的目的。
2、SQL注入漏洞的出现和修复
SQL注入定义：
SQL注入攻击是黑客对数据库进行攻击的常用手段之一。随着B/S模式应用开发的发展，使用这种模式编写应用程序的程序员也越来越多。但是由于程序员的水平及经验也参差不齐，相当大一部分程序员在编写代码的时候，没有对用户输入数据的合法性进行判断，使应用程序存在安全隐患。用户可以提交一段数据库查询代码，根据程序返回的结果，获得某些他想得知的数据，这就是所谓的SQL Injection，即SQL注入。
SQL注入有时候，在地址参数输入，或者控件输入都有可能进行。如在链接后加入’号，页面报错，并暴露出网站的物理路径在很多时候，很常见，当然如果关闭了Web.Config的CustomErrors的时候，可能就不会看到。
3、跨站脚本攻击漏洞出现和修复
跨站脚本攻击，又称XSS代码攻击，也是一种常见的脚本注入攻击。例如在界面上，很多输入框是可以随意输入内容的，特别是一些文本编辑框里面，可以输入例如这样的内容，如果在一些首页出现很多这样内容，而又不经过处理，那么页面就不断的弹框，更有甚者，在里面执行一个无限循环的脚本函数，直到页面耗尽资源为止，类似这样的攻击都是很常见的，所以我们如果是在外网或者很有危险的网络上发布程序，一般都需要对这些问题进行修复。
3. 如何进行前端优化
1.减少 HTTP 请求....
2.使用 HTTP2
3.使用服务端渲染
4.静态资源使用 CDN
5.将 CSS 放在文件头部，JavaScript 文件放 ...
6.使用字体图标 iconfont 代替图片图标
7.善用缓存，不重复加载相同的资源
8.压缩文件
9.图片优化
(1).图片延迟加载
(2). 响应式图片
(3). 调整图片大小
(4). 降低图片质量
(5). 尽可能利用 CSS3 效果代替图片
(6). 使用 webp 格式的图片
10. 通过 webpack 按需加载代码，提取第三库代码，减少 ES6 转为 ES5 的冗余代码
11. 减少重绘重排
12. 使用事件委托
13. 注意程序的局部性
14. if-else 对比 switch
15. 查找表
16. 避免页面卡顿
17. 使用 requestAnimationFrame 来实现视觉变化
18. 使用 Web Workers
19. 使用位操作
20. 不要覆盖原生方法
21. 降低 CSS 选择器的复杂性
(1). 浏览器读取选择器，遵循的原则是从选择器的右边到左边读取。
(2). CSS 选择器优先级
22. 使用 flexbox 而不是较早的布局模型
23. 使用 transform 和 opacity 属性更改来实现动画
24. 合理使用规则，避免过度优化
性能优化主要分为两类：
加载时优化
运行时优化
4. web开发从前端能通过哪些方式提供网页的加载速度
一、使用良好的结构
可扩展 HTML (XHTML) 具有许多优势，但是其缺点也很明显。XHTML 可能使您的页面更加符合标准，但是它大量使用标记（强制性的 <start> 和 <end> 标记），这意味着浏览器要下载更多代码。所以，事情都有两面性，尝试在您的网页中使用较少的 XHTML 代码，以减小页面大小。如果您确实不得不使用 XHTML，试着尽可能对它进行优化。
二、不要使布局超载
坚持简约原则：少即是多。页面中充斥着各种类型的图像、视频、广告等，这大大违背实用性原则。
三、不要使用图像来表示文本
使用图像表示文本的最常见示例就是在导航栏中。美观的按钮更加具有吸引力，但是它们的加载速度很慢。此外，图像仍然不能由搜索引擎直接索引，因此，使用图像进行导航不利于搜索引擎优化（search engine optimization，SEO）。当无需图像就可以通过大量 CSS 技巧创建漂亮的按钮时，绝不使用图像来表示文本。
四、检查cookie使用情况
设置一个较早的 expire 日期或者根本不设置 expire 日期，会缩短响应时间。要在 PHP 语言中设置 cookie 的 expire 日期，使用以下代码：
<?php
$expire = 2592000 + time();
// Add 30 day’s to the current time
setcookie(userid, “123rrw3”, $expire);
?>
这段代码设置 cookie userid，并将 expire 日期设置为自当前日期之后 30 天。
五、不要包含不必要的 JavaScript 代码，尽可能将其外部化
应该明智地使用 JavaScript（仅在真正必要时才使用）并优化脚本的大小和速度。缩短 JavaScript 下载时间的另一种方式是使用外部文件，而不是包含脚本内联。这种方法也适用于 CSS，因为浏览器会缓存外部化的文本，而（在 HTML 页面自身中）以内联方式编码的 CSS 或 JavaScript 每次都会随 HTML 一起加载。
六、尽可能避免使用表格
表格被用作网页的主要构建块，但是作为页面布局元素，使用表格现在被认为是糟糕的做法。有时候，您必须使用表格（并且它们被认为是显示表格数据的出色实践）。如果是这样，明确地指定表格单元格、行和列的宽度和高度，否则，浏览器必须执行许多操作来计算如何显示它们，这会降低页面加载速度。
七、删除任何不必要的元素
可能这是所有技巧中最显而易见的一个，但是它也是最容易忘记的一个技巧。如果您真正需要在网页上放置许多内容，考虑将网页分为 2 个、3 个或更多的独立页面。
八、一些优化网页的技巧
可以使用许多方法来优化您的网页，包括压缩 JavaScript 文件，使用超文本传输协议（Hypertext Transfer Protocol，HTTP）压缩，以及设置图像大小。
九、压缩和缩小 JavaScript 文件
您可以使用 GNU zip (gzip) 来完成此任务，因为许多浏览器都支持这种压缩算法。另一种替代方法是缩小文件。这种方法删除代码中所有不必要的字符，比如制表符（tab）、新行和空格。它删除代码中的注释和空白，进一步缩小文件大小。外部和内部样式表都可以缩小。两种最流行的缩小工具是 JSMin 和 YUI Compressor。
十、使用 HTTP 压缩，并始终使用小写的 div 和类名
可以使用 HTTP 压缩来减少服务器与浏览器之间的通信量。可以在 Apache 中配置 HTTP 压缩（.htaccess 文件），或者可以将其包含到页面中（对于 PHP，可以使用一个 HTTP_ACCEPT_ENCODING 选项）。但是请注意：不是所有浏览器都支持压缩。即使是支持压缩的浏览器，压缩和解压缩都会加重处理器的负载。要在 Apache 中启用地毯式（blanket）压缩（即压缩所有文本和 HTML），使用以下命令：
AddOutputFilterByType DEFLATE text/html text/plain text/xml
另外，考虑一下您想要压缩的内容。图像、音乐和视频在创建时已经进行了压缩，因此您可以将压缩对象限制为 HTML、CSS 和 JavaScript 文件。另一种减少压缩工作的技巧是使用小写形式的 <div> 元素和类名。由于大小写敏感性，并且使用的是无损压缩，<header> 与 <Header> 不同，它们被压缩为两个不同的标记。
十一、设置图像大小
与表格单元格、行和列一样，当您未明确设置图像大小时，浏览器需要执行计算来显示图像，这会降低处理速度。
十二、将 CSS 图像映射用于装饰功能
使用图像映射代替多个图像，这是另一种缩短加载时间的方式，因为同时下载图像的各个独立部分能够加快整个页面的下载进度。或者，您可以使用某种名为 CSS sprites 的工具。CSS sprites 可帮助减少 HTTP 请求的数量。一个图像可以包含装饰或布置页面所需的所有图像元素。您使用 CSS 来选择（通过调用某些位置和维度）用于特定元素的映射。
十三、尽可能延迟脚本加载
一种提升页面下载速度的潜在方式是将脚本放在页面的底部，使页面加载更迅速。通常，浏览器只能（从同一个域）下载不超过两个并行对象，如果一个对象是一段 JavaScript 代码，那么在该脚本下载完之前，其他页面组件的下载将会暂停。如果将 JavaScript 代码放在页面底部，（在大多数情况下）它将在最后下载，这时所有其他组件都已下载完。
十四、按需加载 JavaScript 文件
要按需加载 JavaScript，使用 import() 函数。
import() 函数：
function $import(src){
var scriptElem = document.createElement('script');
scriptElem.setAttribute('src',src);
scriptElem.setAttribute('type','text/javascript');
document.getElementsByTagName('head')[0].appendChild(scriptElem);
}
// import with a random query parameter to avoid caching
function $importNoCache(src){
var ms = new Date().getTime().toString();
var seed = "?" + ms;
$import(src + seed);
}
十五、验证函数加载
也可以验证一个函数是否被加载，如果没有，加载 JavaScript 文件。
验证函数是否被加载：
if (myfunction){
// The function has been loaded
}
else{ // Function has not been loaded yet, so load the javascript.
$import('http://www.yourfastsite.com/myfile.js');
}
注意：可以使用 defer 属性，但不是所有浏览器（包括 Firefox）都支持它。
十六、优化 CSS 文件
如果经过适当优化和维护，CSS 文件不一定很大。例如，具有很多独立类的 CSS 文件会影响下载速度。与 JavaScript 文件一样，您需要优化 CSS 文件，使其包含所需的所有内容，同时保持合理的大小。另外，使用外部文件代替内联定义来适应浏览器的缓存机制。
十七、使用内容分布网络
内容分布网络（Content-distribution network，CDN）是另一种缩短下载时间的好方法。当您将静态图像放在 Internet 上的许多服务器上时，用户能够从离他们最近的服务器下载这些图像。此外，大多数 CDN 都在快速服务器上运行，因此无论服务器的加载速度如何，其响应速度都比小型的超载服务器快。
十八、对资产使用多个域来增加连接
CDN 的另一个优势是它们是独立的域。因为您的浏览器将并发连接的数量限制到一个单一的域，因此无论何时加载一个页面，都很容易占满所有线程。因此，到其他资产的连接被延迟了。然而，您的浏览器能够打开新线程或到其他域的连接，这样，从另一个域加载的任何资产都可以与其他所有资产同时加载。
十九、在合适的时候使用 Google Gears
使用 Google Gears（参见 参考资料）是避免用户反复下载同一内容的另一种好方法。Gears 允许用户离线访问 Web 应用程序，但是也允许将页面元素持久化到用户的计算机上。因此，频繁加载但未进行更新的内容可以存储在 Gears 数据库中，该数据库是一个 SQLite3 关系数据库管理系统。对同一内容的所有 next 请求都可以从数据库（而不是服务器）直接加载。
二十、使用 PNG 格式的图像
Graphic Interchange Format (GIF) 和 Joint Photographic Experts Group (JPEG) 图像格式都已过时了：Portable Network Graphic (PNG) 是未来流行的格式。当然，您可以说 GIF 和 JPEG 已经消亡，或者 PNG 没有任何缺陷，但是所有事物都有各自的优缺点，PNG 以最佳的文件大小提供了出色的质量。因此，如果进行选择的话，应该尽可能使用 PNG 图像。
二十一、保持 Ajax 调用简短、准确
当统称为 Asynchronous JavaScript + XML (Ajax) 的技术在两年前出现时，这些技术为处理页面请求和响应提供了一种革命性方法。然而，拨号用户可能从来没机会体验其真正的优势，因为在许多情形下，Ajax 需要在浏览器与服务器之间大量通信。因此，如果您能够保持 Ajax 调用简短和准确，可以避免用户花费无止尽的时间来等待元素刷新或响应。
二十二、进行一次较大的 Ajax 调用并在本地处理客户机数据
如果不能进行简短的 Ajax 调用，或者如果这些调用不能提供期望的结果，可以考虑一种替代方法：进行一次大的 Ajax 调用来获取所需的一切内容，然后让客户机在本地处理数据。通过这种方式，客户机只需等待一次（获取传入的数据），但是在此之后（当浏览器与服务器之间没有必要通信时），处理速度将更快。当然，还有大量 Ajax 优化技术，本教程无法一一列出。
二十三、在沙箱中测试代码
还有一个经常被遗忘的常用技巧。尽管清醒的 Web 开发人员通常会在启动应用程序之前对其进行测试，但是有时候测试会使他们不那么重视维护任务，或者新功能添加得太快，并且未经过充分考虑或测试。结果，余下的脚本减缓了应用程序的速度。如果您添加一项新功能，可以首先在沙箱里（完全脱离了应用程序的其余部分）进行测试，查看它作为单个函数的行为。通过这种方式，您可以反复检查，并分析性能和响应时间，无需考虑 Web 应用程序的其余部分。然后，当新功能的行为符合预期时，可以将其引入到应用程序的其余部分中，运行其他测试，保证功能本身的行为符合预期。
二十四、分析站点代码
在许多场景中，自我反省是一个不错的建议。幸运的是，在开发过程中，我们可以使用工具来帮助反省，并尽可能客观地进行实践。像 JSLint（参见 参考资源）这样的工具的价值是无法衡量的，尽管其站点宣称它 “可能令您备受挫折”，因为它向您提供了所有的潜在代码缺陷，这些缺陷不但使调试更加困难，而且可能导致更长的响应时间。
二十五、检查孤立的文件和丢失的图像
检查孤立的文件和丢失的图像是一种明智之举。大部分 Web 开发人员都会检查错误的文件引用，但是这里仍然需要说明一下。丢失的文件容易引起各种问题，因为它们会导致 “The image/page cannot be displayed” 之类的错误消息。但是在网页速度优化方面，它们具有更大的缺陷：当浏览器寻找丢失的或孤立的文件时，它会消耗资源，这不可避免地会导致页面处理速度变慢。因此，请检查孤立或丢失的文件，包括拼写错误的文件名。
5. 前端一个模块有很多功能，如何去定制式的加载
直白的说：
web前端
是一个前途不可限量的行业，首先因为很新，相对于JAVA,C++,
C等很新颖，而且有成功的模式（国外），只是国内还不是很重视，但是趋势证明，前端在国内也是需求越来越大。
其次是技术的发展，前端的JS已经不是一个当初刚出来处理
6. 如何让rex actions recers 按需加载
要确定rex架构时候，可以先思考一下，rex实质上做了什么。事实上，rex一直都被宣称为一个状态管理器。使用react作为前端组件化工程类库，每一个组件必然有自己的状态以及需要传递到子孙组件的状态。rex准确来说，是管理“共享状态”，这些状态都是可以被自己以及子孙组件，通过action进行调用修改的。
回到楼主的问题，既然明白了rex的实质用处，就可以开始架构了。
在很多boilerplate或者示例里面，rex一直被作为顶级的状态管理器。对于大型前端项目，这样不仅导致recers非常庞大，而且在多模块加载情况下导致非常多冗余代码，而且constant会非常容易重复
最后结论是，模块化开发，可以将每一个模块作为一个Web组件。独立使用Rex进行管理，这样既有利于代码分离，前端工程，又不会让rex代码量复杂冗余、难以管理。
7. 怎样提高前端工程师开发效率，都在这里
前端工程师其实是一个工作很杂的职位，除了要负责切图、写html/css/js外，还要解决一系列的浏览器兼容性、网页性能优化等问题，所以提高前端工程师的开发效率是势在必行的，也是前端工程化的体现。
对于开发效率，我个人理解是
开发效率 = 新增代码的效率 + 修改代码的效率 + 维护代码的效率
那么如何提高前端开发效率便可以按照前端工程化的理念来进行划分。下面我就介绍下7个提高前端开发效率的方法。
1.切图
切图是一个前端最基础的技能，一般我们使用Photoshop或者FireWorks基本都能搞定设计师交付给我们的设计图，但是要提高切图效率的话就得使用一些诀窍了，比如利用PS里的动作来实现“一键切图”功能，这里除了切图外还介绍了其他的实用方法和工具。
2.编码
对于编写代码部分我们首先要找到一款合适自己的IDE工具，建议不要使用Notepad++或者Dreamweaver，这些工具已经不符合前端潮流了，无法让自己优雅地敲代码。这里我主要推荐Sublime Text、Atom或者Webstrom，因为它们除了人性化的界面和支持大多数语法的高亮外，还可以安装各种各样的插件来拓展你的IDE工具，下面我主要介绍几款Sublime Text提高开发效率的插件：
其中Element是用于快速编写html/CSS的，比如输入 ul>li 后按下tab键便可以生成一个ul标签里面包含一个li标签
JSFormat用于格式化JS；CSScomb用于对样式属性进行一键排序；HTML-CSS-JS Prettify可以一键规范我们的HTML/CSS/JS，甚至JSON格式；SublimeTmpl可以快速新建HTML/CSS/JS文件; ColorPicker用于调用本地调色板功能。这些工具都非常实用，一定程度上可以提高我们的编码效率。
3.自动化
说到提高开发效率，这里不得不提一些前端的自动化工具，毕竟前端自动化是目前及未来的趋势，能够很大程度上缩减前端不必要的工作量，使我们能够专注前端本身。
这里我们可以使用NPM来管理我们的项目包文件；利用webpack来打包压缩我们的代码；利用Node.js来实现构建本地服务器；利用Karma、Jasmine来测试我们的前端代码。
用好前端自动化工具可以帮助我们处理很多琐碎的事情，比如一键压缩代码、图片，一键合并JS，检测文件更新等。
4.模块化
随着web2.0时代的到来，Ajax技术得到广泛应用，前端代码日益膨胀，而前端模块化能够方便我们对项目代码的维护，进行按需加载，从长远角度来看对我们提高项目的开发效率同样大有益处。
在ES6出来之前应该说前端代码本身不具备实现模块的功能，我们必须要使用一些模块化加载器来实现，比如RequireJS、SeaJs等。而随着ES6的普及，目前像RequireJS、SeaJs这样的工具已经没有存在的必要了。所以在基于ES6的开发环境下我建议使用ES6的模块化功能来实现我们的前端模块化。
5.组件化
前端组件化的概念也是由来已久，我们可以通过将我们的代码划分成不同组件来实现功能公用，一个同样的功能我们可能不用再次编写相同的代码，同时也可以提高前端代码的可维护性和清晰度。以下是目前流行的前端框架Vue的单文件组件的概念图：
我们可以将公用的组件抽离，将大组件拆分成小组件的形式实现前端组件化，组件与组件之间可以存在父子关系，也可以存在兄弟关系。在Vue的单文件组件中，一个组件包含了其HTML、CSS、JS的代码片段。
6.前后端分离
前后端分离的项目对提升前端开发效率非常有帮助，因为前端不再需要后台配置路由、搭建服务器环境、编写模板等，这样一来前端的生产力就会得到很大程度的解放，但是前后端分离的项目有利也有弊，如下图所示：
最终我们需要根据项目需求衡量利弊来决定是否使用前后端分离的模式。
7.规范与模式
团队协作离不开编码规范和开发模式的帮助。遵循编码规范文档可以帮助我们在团队开发时提高合作开发的效率。一个团队遵循一套编码规范可以使每个人的代码写出一个人的风格，这样团队间相互审查、测试、完善功能时会非常高效。下方是一些开源的前端编码规范文档：
网页链接
首页-TGuide
网页链接
网页链接
除了编码规范我们在开发时经常会沿袭了一些已经存在的模式来解决问题，比如当用JS编写弹框时我们往往会用到单例模式，用CSS编写动画时直接套用动画的常用属性等，我们不再需要从头开始思考某一个功能的实现，这就是模式带来的意义。
结语
当然除了以上7点，对于前端来说需要提高开发效率的地方还有很多，可谓任重而道远。只有将前端无序、繁杂的操作组织起来，利用工具简化、规范前端流程，才能实现项目构建、开发、维护的一体化。希望本文能够给初识前端的同学带来启发并付诸实践。
8. 常见的前端集成部署方案有哪些各自的优缺点是什么
前端行业经历了这么长时间的发展，技术元素非常丰富，这里列举出一般web团队需要用到的技术元素：
开发规范：包括开发、部署的目录规范，编码规范等。不要小瞧规范的威力，可以极大的提升开发效率，真正优秀的规范不会让使用者感到约束，而是能帮助他们快速定位问题，提升效率。
模块化开发：针对js、css，以功能或业务为单元组织代码。js方面解决独立作用域、依赖管理、api暴露、按需加载与执行、安全合并等问题，css方面解决依赖管理、组件内部样式管理等问题。是提升前端开发效率的重要基础。现在流行的模块化框架有requirejs、seajs等。
组件化开发：在模块化基础上，以页面小部件(component)为单位将页面小部件的js、css、html代码片段放在一起进行开发、维护，组件单元是资源独立的，组件在系统内可复用。比如头部(header)、尾部(footer)、搜索框(searchbar)、导航(menu)、对话框(dialog)等，甚至一些复杂的组件比如编辑器(editor)等。通常业务会针对组件化的js部分进行必要的封装，解决一些常见的组件渲染、交互问题。
组件仓库：有了组件化，我们希望将一些非常通用的组件放到一个公共的地方供团队共享，方便新项目复用，这个时候我们就需要引入一个组件仓库的东西，现在流行的组件库有bower、component等。团队发展到一定规模后，组件库的需求会变得非常强烈。
性能优化：这里的性能优化是指能够通过工程手段保证的性能优化点。由于其内容比较丰富，就不在这里展开了，感兴趣的同学可以阅读我的这两篇文章 [1] [2]。性能优化是前端项目发展到一定阶段必须经历的过程。这部分我想强调的一点是性能优化一定是一个工程问题和统计问题，不能用工程手段保证的性能优化是不靠谱的，优化时只考虑一个页面的首次加载，不考虑全局在宏观统计上的优化提升也是片面的。
项目部署：部署按照现行业界的分工标准，虽然不是前端的工作范畴，但它对性能优化有直接的影响，包括静态资源缓存、cdn、非覆盖式发布等问题。合理的静态资源资源部署可以为前端性能带来较大的优化空间。
开发流程：完整的开发流程包括本地开发调试、视觉效果走查确认、前后端联调、提测、上线等环节。对开发流程的改善可以大幅降低开发的时间成本，工作这些年见过很多独立的系统（cms系统、静态资源推送系统）将开发流程割裂开，对前端开发的效率有严重的阻碍。
开发工具：这里说的工具不是指IDE，而是工程工具，包括构建与优化工具、开发-调试-部署等流程工具，以及组件库获取、提交等相关工具，甚至运营、文档、配置发布等平台工具。前端开发需要工具支持，这个问题的根本原因来自前端领域语言特性（未来我会单独写一篇文章介绍前端领域语言缺陷问题）。前端开发所使用的语言（js、css、html）以及前端工程资源的加载与定位策略决定了前端工程必须要工具支持。由于这些工具通常都是独立的系统，要想把它们串联起来，才有了yeoman这样的封装。前面提到的7项技术元素都直接或间接的对前端开发工具设计产生一定的影响，因此能否串联其他技术要素，使得前端开发形成一个连贯可持续优化的开发体系，工具的设计至关重要。