一些前端优化技巧

解决页面在Android下滑动正常，在Iphone下滑动卡的问题
在css中加入如下代码即可：

body{
        -webkit-overflow-scrolling : touch;
}

取消div,a等标签点击效果
当标签被设置onclick事件之后，在有些手机浏览器中，点击这些标签，会有点击变色效果。想要取消点击变色效果。
添加：

div{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
 }

ul的左右边有40px的距离
将ul的margin和padiding设置为0；
由于不同浏览器之间有不同的默认样式，这样就导致了：“明明我没有设置margin padding，但是元素之间却存在间距等状况”。解决这种情况的方法就是在开始写css之前将所有元素的padding margin默认样式统一起来。在css文档中添加如下样式即可：

*{
padding:0;
margin:0;}

去掉ul，li的左边顺序黑点

ul,li {
    list-style: none;
}

使用webpack合并请求
webpack可以将css文件合并到js文件中，将所有js文件合并到一个js文件中，在html中只需加载这一个js文件，即可完成页面的渲染，大大减少了浏览器的http请求数，优化了体验。当然，webpack还可以压缩资源文件、对资源文件进行md5取值以确保更新缓存，这些也都是可以优化体验的。

使用vue、reactJs
vue减少了操作dom的次数、reactJs虚拟了dom操作，也减少了dom的操作次数，提高了性能，使用起来更加流畅自然。

前后端分离

• 前后端分离可大大提高分工合作的效率。
• 前后端合作的三种方案：

1. 后端渲染数据到前端html；
2. 采用json接口来分离数据和后端，前端通过接口从服务器获取json数据，然后渲染到前端页面；
3. nodeJs从Java后台取到数据 ---> nodeJs渲染数据到模板html ---> 浏览器请求到被数据渲染好的html；

• 目前我所在部门是这样处理的，首页通过后端渲染成静态html页面，方便SEO以及提高性能，其他页面采用json接口。
• 参考文章：.
  一篇公司内部分享会议上Presentation
  淘宝前后端分离实践
  前后端分离的实现