百格教育一些体会

1.对于js生成出来的div和控制的class不易直接在DOM改变其结构，因此可以用js控制，用选择器先定位到需要改变的DOM节点上然后执行相应的操作，这也是扒的别人的网站需要修改时，实在难以修改情况下的策略。在后台只需放入public文件夹下面的html里面即可在所有的引用这个文件的地方调用这一段js。不过不太清楚后台对这方面的性能优化是怎样考虑的。
2.关于移动端的点击事件
首先起因是PC和移动端都是点击事件，会发现移动端的点击会慢一点，而且在测试IOS时需要点击两次才能跳转，我以为又是我写的js冲突了。后来才发现我太年轻了。首先分享这篇文章https://yq.aliyun.com/articles/20724，如果对zepto中的tap穿透有兴趣的可以google源码分析和解决方案。
IOS设备点击两次才跳转，一下子就百度出来了，让google情何以堪。
http://www.runoob.com/w3cnote/solving-the-double-tap-issue-on-ios-devices.html，加入到项目中去发现很好用，完美的解决了问题。

3.css跨平台兼容性问题。在做百格页面底部的图片点击跳转时，使用相同的浏览器在windows下面可以跳转，但是在Mac上就是跳转不了。一直认为是js的问题，询问了学长，说是可能是css兼容性问题。

:hover 选择器用于选择鼠标指针浮动在上面的元素
:active 选择器用于选择活动链接。
http://blog.csdn.net/freshlover/article/details/43735273，因此在iOS系统的移动设备中，需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态。因此我猜想Mac上出现的bug是因为active未被激活，影响了接下来的跳转。

需要在body加上一个事件代码，document.body.addEventListener('touchstart', function () {});  

以下有问题的代码片段

4.多人协作时，手机端样式冲突，和程合作一个项目是，他写了一部分,在后台部署时，将抽取部分文件到public文件里面，css合并的时候导致样式冲突。后来想想也许用css modules可能会好一点
5.最后说一点google程序猿的必备啊，深刻的教训
6.移动端尽量用touch事件
7.移动端一些bug总结 https://github.com/fredshare/blog/issues/21
8.有些代码没必要必须加载完才行，一些类似百度统计的代码可以用js动态加载，这样不阻塞DOM树的创建
https://www.zhihu.com/question/40896234/answer/88717752
9.http://www.html-js.com/article/2278