OA移动端页面部分存在的问题

• 前后端没有分离，统一采用后端生成前端代码的方式，给页面调试造成了极大的困难，无法直接对html进行调试修改
• js框架没有移动端进行优化，例如使用了jQuery而不是更适合移动端页面的zepto（zepto使用gzip压缩后只有8k，jQuery现在的版本93k）
• js代码极不规范，几乎所有方法直接写在全局环境下，极易造成变量、函数的冲突，代码无法维护，无法定位方法所在位置

function getCommentInfo(commentZoneId) { if (commentZoneId == undefined) { commentZoneId = ""; if ($("#commentPositionType").val() == "0") {//表单内 commentZoneId = '#ActionsoftCommentZone'; } else if ($("#commentPositionType").val() == "2") {//工具栏 commentZoneId = '#ActionsoftFormTooblarCommentZone'; } }

• js全部放在页面顶部，造成页面加载阻塞（只有当所有的js下载完毕，加载完成才会加载html和css），是网页加载缓慢的主要原因
  这是请假发起页面所加载js（还有一部分在js中动态加载）

  
  
  

  Paste_Image.png
  
  

  黄色部分为js加载用时，可以看出js加载运行占用了大部分时间

  
  
  

  Paste_Image.png

• js文件数量多、内容少，js文件中加载js，造成整个js加载无法控制、无法优化

  
  
  

  Paste_Image.png

• html中插入js代码（简直闻所未闻），造成js必须在html加载之前加载、代码逻辑混乱

  
  
  

  Paste_Image.png

• js单个方法内多层逻辑嵌套，可读性极差，无法维护

  
  
  

  Paste_Image.png

• html层级多，大量使用内联样式、iframe，（在html中再插入一层）

  
  
  

  Paste_Image.png