如今的web项目大都已经先后端独立开发与部署。javascript
先后端独立开发,通常是前端与后端经过web接口(常见的有RESTful与websocket)文档进行交流。前端开发人员先更具业务需求与实际原型进行ui的编程实现与事件的设计,并经过web接口进行业务数据的增删改查。后端开发人员根据定义的接口文档,实现业务数据的计算与增删改查,并对持久化的数据(通常保存在数据库里)进行操做。css
先后端独立部署,前端项目均为html5/css/javascript/图片等静态资源,只须要web服务器就能够部署运行。经常使用的web服务器有apache与nginx。后端开发人员则只须要把接口服务发布到应用服务器,并正确链接数据库。经常使用的java的应用服务器有tomcat、jetty等。html
对了,在此声明下,这里所说的前端,并不仅是pc站的html页面,也包括微网站、微信小程序、APP应用等。前端
根据上面的分工,能够明显地web开发中遇到的问题分为:前端实现问题,接口调用问题,接口实现问题。html5
前端实现问题是指,前端在调用接口前或者调用接口后,业务逻辑错误或者程序错误形成的系统用户交互异常。针对不用的前端,有不一样的调试工具。java
Pc站与微网站可使用chrome(推荐)或者firefox的开发者工具进行调试。css3
微信小程序与公众号可使用微信官方开发者工具进行调试。nginx
APP使用开发环境的真机联调进行调试。web
接口调用问题,多为前端调用接口错误或者接口自己存在bug引发的,没法获取前端人员预期的返回结果。ajax
在开发环境中,可使用上述的工具进行调试。在生产环境中进行故障排查是,pc站与微网站还能够经过pc浏览器进行故障分析。但公众号、小程序、APP须要经过charles等抓包工具进行分析。
若是没有接口调用的数据包,则前端程序存在问题;
若是接口的请求参数与请求头信息存在错误,则前端调用接口使用错误;
若是接口的响应参数与响应头信息存在错误,则接口实现存在问题;
若是接口调用正常,则前端程序对数据结果处理存在问题。
接口实现问题,多为后端开发人员没有根据正确的请求参数返回正确的响应结果。多由逻辑错误、数据持久化处理错误与系统级错误引发的。
在开发时能够经过断点跟踪就行分析。生成环境须要经过分析系统日志或者程序的日志进行分析。
在以上几大类问题中,有些尤其突出,下面进行详细分析。
i. 低版本浏览器的兼容问题
说到低版本浏览器,不得不诟病IE9及其如下的老爷们。这些落后的浏览器已经被官方废弃,却在中国尚存大量的用户群体。并且“国”字号的浏览器们也任然使用这些内核。
对于这个问题,尽可能与客户商量,放弃低版本浏览器,在用低版本浏览器访问网站时,提示如今高版本浏览器,并提供下载地址。
IE9及如下存在跨域访问问题;
IE7及如下存在ajax使用的问题;
IE7及如下还存在css三、javascript对象缺失等问题。
ii. Html5新特性的兼容问题
Html5的一些新特性如webrtc、webGL等新特性,即便在新版浏览器中也存在兼容问题。响应技术还没有彻底标准化,选择一个靠谱的库很重要。
字体跨域问题,是html页面与css文件(字体库的引入是在css中配置的)不在同一个域下形成的。
解决办法就是修改web服务器(apache或者nginx)的配置,容许字体库文件的跨域访问。或者全部静态文件都在一个域下访问。
i. 普通跨域问题
因为前端文件与后端接口服务独立部署,跨域问题尤其突出。Websocket接口还好些,自己就解决了跨域访问的问题;RESTful的使用须要处理下头信息,容许跨域访问(设置Access-Control-Allow-Origin的值,若是省事,能够设置为*,但为了防止接口被滥用,建议配置具体的域规则)。
ii. 伪跨域问题
所谓伪跨域,是指后端框架已经支持跨域访问,但因为业务代码异常或者应用服务器异常,返回的响应信息不符合预期的结果,形成浏览器提示跨域问题。
这个问题,最好使用抓包工具,分析响应参数与响应头信息是否正确。并及时解决服务器或者程序的问题。
iii. 低版本浏览器的跨域问题
好吧,又是低版本浏览器。IE9及如下的浏览器,存在跨域的问题(自己也不支持websocket)。对于这个问题,前人使用的一般是jsonp的方式,但jsonp使用的是get方式,明显不兼容RESTful的规则。若是使用jsonp,须要前端与后端作些调整。
仅仅为了几个老爷级别浏览器,改动太多代码就不值当了。不是跨域吗?那就让他们一个域吧。Web服务器(apache或者nginx)除了提供web服务外,还有强大的代理功能,把其余域的接口服务路径代理为与页面同域的路径并非件复杂的事。