1.前后端分离前后端分离可以让前端的开发与后端的开发模式分离，具有更大的自由度，让前端工程化，组件化、单页应用等2、尽量避免后端模板渲染Web应用的渲染方式分为服务端渲染和客户端渲染。目前推荐的方式是客户端渲染，完全ajax方式进行数据交互。除非在某些不得不使用服务端渲染的情况下（比如门户、电商等），尽量使用客户端渲染，因为客户端渲染可以更好的实现前后台分离端（项目分离、代码解耦、协作分离、责任分离等），也可以更好的做本地界面模拟开发，提高开发效率。即使使用服务端渲染，在技术支持的情况下，也可以使用node中间层（前端人员开发）代替传统的后台模板渲染，让后台和前端可以完全解耦，后台和前台只有联系人的数据。3、尽量避免大量在线调试。做好本地界面模拟开发（包括后端模板渲染），避免大量的在线调试，因为在线调试非常不方便和耗时，而且每次更新代码都需要Rebuild，然后同步到服务器。因此，做好本地界面模拟开发。只要程序在本地运行，在线上不会有大问题。这将大大减少调试工作量，提高开发效率。4、本地接口模拟开发本地接口模拟是在本地模拟一个类似服务器的环境，可以提供数据需要的接口，进行错误模拟处理等。本地接口模拟开发的意义在于几乎所有的开发调试都可以在本地完成，最大限度减少在线调试，提高开发效率。一些常用的库：browser-sync（https://github.com/BrowserSync/browser-sync）：允许浏览器实时响应文件变化（html、js、css、sass、less等）并快速自动刷新页面，可同时在PC、平板、手机等设备上进行调试。webpack-dev-middleware(https://github.com/webpack/webpack-dev-middleware)：webpack的开发中间件。webpack-hot-middleware(https://github.com/webpack-contrib/webpack-hot-middleware)：热更新本地开发浏览器服务。另外，本地接口模拟开发需要后端开发人员有规范的接口文档。5、接口文档标准化通过前后端协同提高开发效率一个很重要的方法就是减少沟通：能形成纸质文档就不要口头交流，能把接口文档写清楚就不要口头交流（参数、数据结构等）、字段含义等），尤其是在线协作时，面对面的交流非常困难。一份好的接口文档应该具备以下要求和信息：格式简洁明了：推荐使用API??Blueprint（https://apiblueprint.org/）分组：当接口较多时，需要分组描述，接口地址http方法，参数、headers、是否序列化http状态码、响应数据接口文件可以使用一些文件服务（比如leanote（https://github.com/leanote/leanote））来管理文件，或者使用git来管理；编写方式可以使用markdown、YAML、JSON等，推荐使用markdown编写文档，使用git管理文档。可以参考：本地化接口模拟，前后端并行开发（https://segmentfault.com/a/1190000015297352）APIBlueprint（https://apiblueprint.org/）6.De-cachingfront-端需要做好去客户端缓存功能，保证用户始终使用最好的资源，不会因为缓存问题而出现bug。传统的de-cache方式是在静态资源url中加上一个版本号或者时间戳，但是由于构建工具的出现以及部分浏览器不再支持这种方式，这种方式已经成为过去式。现在de-caching就是对文件名进行hash。只要文件发生变化，文件名就会不同，这样就可以完全去缓存缓存。如果使用webpack打包，所有文件都会自动哈希命名。7、做好错误处理。前端和后端都需要做好错误处理，这样在出现错误的时候会有友好的提示，在用户反馈的时候能够快速准确的定位到错误的来源和原因。一般前端错误分为：脚本运行错误：js脚本错误，找到堆栈信息，然后解决接口错误：服务器错误，返回数据不正确，无响应数据，超时等接口错误分为：状态代码错误（状态码不是2XX）：服务器错误、超时等数据错误：无响应数据、数据格式不正确、数据内容不正确8、运行时捕获js脚本错误用户在使用在线程序时，如何知道是否有错误；如果有bug是，报告的错误是什么；如果是js错误，怎么知道是哪一行出错了呢？因此，在程序运行时捕获js脚本错误并上报给服务器是非常有必要的。这里会用到window.onerror：window.onerror=(errorMessage,scriptURI,lineNumber,columnNumber,errorObj)=>{constdata={title:document.getElementsByTagName('title')[0].innerText,errorMessage,scriptURI,lineNumber,columnNumber,detailMessage:(errorObj&&errorObj.message)||'',stack:(errorObj&&errorObj.stack)||'',userAgent:window.navigator.userAgent,locationHref:window.location.href,cookie:window.document.cookie,};post('url',data);//向服务器上报};线上的JS脚本都是压缩过的，需要使用sourcemap文件和source-map(https://github.com/mozilla/source-map)查看原始错误堆栈信息。9、移动端远程调试、vConsole、TBSStudio因为移动端的开发不能像PC端的开发一样使用Chrome的开发者调试工具，所以需要一些额外的技巧来调试移动端。移动应用一般运行在微信浏览器、webviews、手机浏览器中。远程调试（RemoteDebugging）远程调试是通过USB连接、端口转发、代理搭建等方式，将一台设备的网页映射到另一台设备上，比如将手机的webview映射到PC上，达到调试的目的.移动端调试web应用的问题从一开始就存在，但后来浏览器厂商基本上都推出了自己的远程调试工具来解决这个问题，包括OperaMobile、iOSSafari、ChromeforAndroid、UC浏览器等，还有一些第三方的-党开发的远程调试工具，如weinre(http://people.apache.org/~pmuellr/weinre/docs/1.x/1.5.0/)等，以Android为例，可以映射页面在webview和ChromeforAndroid到PC端的ChromeDevTools，然后就可以在PC端调试移动端页面了。vConsole是一个轻量级的、可扩展的、用于移动网页的前端开发者调试面板（chrome开发者工具的便捷实现）。这是一个内嵌页面中方便的调试器，基本可以满足远程调试页面的一般需求。github:https://github.com/Tencent/vConsoledemo:https://wechatfe.github.io/vconsole/demo.htmlTBSStudio因为微信浏览器是定制的浏览器，一般的远程调试方式是没有的。需要配合特定的工具，比如微信开发者工具。TBSStudio(https://x5.tencent.com/tbs/guide.html)是另一个强大的工具，可以像Chrome一样调试远程微信浏览器页面。10.前后端并行开发一般情况下，前端开发完成UI或组件开发后，需要等待后端提供接口文档才能进行。如果前端和后端可以并行开发，开发效率也可以得到提升。前后端并行开发是指无需等待后端提供接口文档即可进行前端开发。后端提供接口后，对接后基本可以上线。实现本地化界面模拟，可以实现前后端并行开发，但是ajax需要在代码层面进行封装。11.友好交流无论工具多么强大，很多时候面对面的交流是不可避免的。友好和冷静的沟通也很重要！
