解决页面在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的操作次数,提高了性能,使用起来更加流畅自然。
前后端分离
- 前后端分离可大大提高分工合作的效率。
- 前后端合作的三种方案:
- 后端渲染数据到前端html;
- 采用json接口来分离数据和后端,前端通过接口从服务器获取json数据,然后渲染到前端页面;
- nodeJs从Java后台取到数据 ---> nodeJs渲染数据到模板html ---> 浏览器请求到被数据渲染好的html;
- 目前我所在部门是这样处理的,首页通过后端渲染成静态html页面,方便SEO以及提高性能,其他页面采用json接口。
- 参考文章:.
一篇公司内部分享会议上Presentation
淘宝前后端分离实践
前后端分离的实现