关于跨浏览器、跨平台、跨域、性能代码交互优化等问题总结

跨浏览器兼容性问题

首先是现在市场上浏览器种类比较多，而不同的浏览器他的内核也不一样，这就导致了各个浏览器对网页的解析也是不一样的。

最常见的问题应该就是网页元素混乱，错位。

解决：

1. 使用 Normalize.css 解决 默认的内外边距不同

2. 通过document.createElement让浏览器支持新的元素；使用 IE 条件注释引入 html5shiv.js 解决 IE9 以下，对 HTML5 新增标签不支持的问题

3. 使用 respond.js 解决 IE9 以下，对 CSS3 媒体查询不支持的问题

4. 使用浏览器私有属性 -webkit- ，-moz- ，-ms-，自动添加前缀的插件 Autoprefixer 解决某些浏览器不支持 css3属性的问题

5. IE9 以下浏览器不能使用 opacity

   opacity: 0.5;
   filter: alpha(opacity = 50);
   filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);
   

6. 通过设置 vertical-align 为 bottom 结局 ie6-7 块元素中的图片的空隙问题

   vertical-align:top/middle/bottom; 或者
   display:block; 或者
   float:left;
   

7. 使用 hack 技术针对不同的浏览器做不同的 coding

   • *、_、+、-、这些特殊符号标识

   • 属性前缀 _、*、\9

   • 选择器前缀 *html .class{}、*+html .class{}、*:first-child+html .class{}

     具体可以参考：https://blog.csdn.net/m_review/article/details/90233415

8. 键盘事件、获取窗口大小

9. DOM 事件处理程序 event、target、移除事件、添加事件代理、取消默认行为、阻止事件冒泡

跨平台 安卓和 iOS 的兼容性问题

1. iPhonex 的适配：
   1. 使用 viewport-fit=cover 将页面内容显示在整个屏幕；
   2. 使用 constant 函数将主体内容显示在安全区域中

           body { 
        	    padding-top: constant(safe-area-inset-top);  //为导航栏+状态栏总高度（88px）
        	    padding-left: constant(safe-area-inset-left);    //如果未竖屏时，为0  
        	    padding-right: constant(safe-area-inset-right);   //如果未竖屏时，为0  
        	    padding-bottom: constant(safe-area-inset-bottom);   //为底部圆弧高度（34px）
        	  }
      

   3. 识别机型的 device-width: 375px 或者 识别设备像素比: 3 等来进行媒体查询

      @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
        //这里写需要调整的样式
      }
      

2. 设置 -webkit-overflow-scrolling : touch 解决 iOS 滚动不流畅，无弹性
3. 设置 meta 解决 iOS 上禁止数字自动识别成号码

   <meta content="telephone=no" name="format-detection" />
   

4. 使用 H5 的 oninput 事件代替 keyup 解决 iOS 中 keyup、keydown、keypress 支持不是很好
5. 设置 -webkit-appearance: none 解决 iOS 设置 input 按钮样式会默认样式覆盖

   input,
   textarea {
     border: 0;
     -webkit-appearance: none;
   }
   

6. iOS 端横屏字体粗细可能不一致

   xx {
     -webkit-text-size-adjust: 100%;
     -ms-text-size-adjust: 100%;
     text-size-adjust: 100%;
   }
   

7. 不使用换行 来解决 低版本 Android 不支持 flex-wrap 换行属性

       .box {
         display: -webkit-box;
         /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
         display: -moz-box; /* 老版本语法: Firefox (buggy) */
         display: -ms-flexbox; /* 混合版本语法: IE 10 */
         display: -webkit-flex; /* 新版本语法: Chrome 21+ */
         display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
       }
   

8. 使用 fastclick 库解决移动端 click 事件 300ms 延迟
9. 使用后缀加transform: scale(0.5) 解决1px的问题

跨域

首先协议或者域名或者端口有一个或多个不一样的话就叫跨域，这是浏览器的同源策略决定的。也是为了网页的安全性。

但是，我们开发的时候还是特别需要去跨域的。

解决：

1. jsonp

   原理：通过js添加一个script标签，将src设置为目标请求，服务器接受该请求并返回数据，然后再设置回调函数callback=showData，这样的话浏览器就不会拦截了，这就很类似于img,link,iframe等元素。

   缺点：不能发送post请求

2. 在服务端设置允许跨域请求

   response.setHeader("Access-Control-Allow-Origin", "*")；

3. 设置代理proxy

   1. 可以在webpack中设置：

      devServer: {
          historyApiFallback: true,
          noInfo: true,
          overlay: true,
          proxy: {
              '/api': {
                  target: 'http://localhost:8081/myserver',
                  pathRewrite: {
                      '^/api': ''
                  }
              }
          }
      }
      

   2. 也可以使用nginx配置：

      location /api/ {
          proxy_pass http://localhost:8081/myserver/;
      }
      

性能优化

• 加载

  • css放在顶部，js放在底部
  • 尽可能的减少请求，使用cdn引入外部资源比如：react,react-dom,react-router,redux等
  • 避免使用空的src
  • 首屏数据预加载
  • 下拉图片延迟加载

• 阻塞性优化

  • 尽可能的避免造成重绘或者重排
  • 一次性的创建完元素之后再添加到页面上
  • 使用visibility代替display
  • 尽量少的访问offsetTop、scrollHeight、clientWidth
  • 异步加载：defer async 动态创建script
  • 预加载：js提前加载图片；缓存命中

• 代码层面

  • 最小化语句数，多个变量使用一个关键字声明
  • 尽量使用字面量，避免使用构造函数
  • 利用闭包缓存复杂计算数据
  • 避免过多的if语句，可以使用三目运算符或者switch语句代替，按照可能性从大到小的编写代码
  • 加密解密时可以减少字节数，减少带宽，提升网络传输

项目构建优化

-对于比较深的解析路径，可以对其配置 alias. 可以提升 webpack 的构建速度。

• 生产环境下使用Uglify移除不必要的注释

交互体验优化

• 使用trim去除空格，使用输入搜索的控件快速查找，使用下拉选择减少用户输入
• 使用 loading 减弱用户等待

文档规范

• Markdawn
• eslint
• 接口链接、字段、请求方式等定义规范 驼峰结构等