最近在做一系列运营活动，纯html、css、js实现。对于工具只能使用jquery的简化版zepto。由于所有的东西都是挂在cdn上。用户直接通过cdn请求html等等的文件。并且页面也自身存在不同的状态、页面大量的图片、以及需要预加载某些数据更改视图等等的问题，第一次真正做这种纯运营活动的页面简单记录一下吧。
一、对于页面结构的处理:
由于页面具有不同的状态，并不是单独某一小部分的更改。而是页面大篇幅的更改。所以需要进行发送请求后判断活动处于某些状态后显示相应的页面。为了不让页面产生有太差的用户体验，首先加载了一个页面的loading状态。在请求状态的接口返回后使用插入节点的方式，将所拼接完成的页面显示出来。在此次活动中仅仅将代码都放到一个js文件中。并且将其放在了head中，所以就要注意某些dom节点是否能够找到的问题。页面大体的结构是 加载js文件并运行 ====> $(document).ready ====> 发送获取状态请求 ====> 根据不同状态拼接不同的字符串 ====> 将字符串插入对应的节点中。这样不会出现页面出现了一套显示。但是接口返回状态后又大幅度更该页面的问题。当然这样的问题同样有，就是需要一个首屏的loading，不过这样的处理也是没办法。毕竟所有的请求都是ajax，并没有后端模板拼接等等的辅助。
二、对于图片的处理
运营活动有大量的图片。具体可以参照各种游戏运营活动页面。整个页面由各种各样的图片拼接而成。这样图片的显示是很尴尬的。由于网速的差距很可能页面在加载出以后有一大片留白。这样就需要使用图片的预加载的功能。由于浏览器可以判断，如果相同路径的图片，加载过一次后，就不会再次发送请求去获取新的图片，而是在缓存中直接获取到这个图片。那么我们就可以通过这样的方式提前预加载图片。具体代码如下：
imgPreLoad(preImg); // preImg 是需要预加载的图片数组 function imgPreLoad(arr) { arr.forEach(function(item){ let i = new Image(); i.src = item; }) }
除此之外，虽然这样对于图片进行了预加载的处理，但是还会有图片的加载时间的问题。简单来说，这个只是解决了非首屏展示图片的问题。如果在其刚刚打开页面的时候实际上是并没有什么用处的。因为图片依旧会缓慢加载。这样的解决办法就是对于某些特殊的图片提取出来，除了正常的图片预加载的图片，再对首屏加载的图片进行img.onload()方法，当所有的必要图片加载完成后，再次隐藏loading，当然这样也有问题就是图片过大，网速过慢，loading显示是过长的，但是这是没有办法的。想要得到显示的完整就需要舍弃一些效率，酌情使用就好。
三、预加载数据更改页面
某些数据接口和页面状态接口是分开的。这样就需要将其分开。这样的数据接口也会有两种，第一种、获取到的数据需要在无用户操作的时候渲染到页面上、第二种就是在用户操作后显示到页面上。这样就需要对其做不同的处理。第一种情况需要把发送请求代码放到$(document).ready中，因为我们没办法判断什么时候html会加载完。很有可能我们在获取dom元素插入的时候无法找到，所以必须要放到相应的位置。第二种情况就可以在加载script的时候直接执行，将获取的数据放到自己定义的一个全局变量中，当使用的时候根据不同的要求将不同的数据生成新的dom节点，但是要注意的不要一个一个节点的添加。将其整理成一个完整的字符串后添加进去。
ps： 同时记录几个小问题，以前只是单单听过，没有详细了解过这些。
一、$(document).ready和window.onload 的使用问题
需要注意的是window.onload这个是指将页面的所有dom节点、资源，都完全加载完才会运行的。这样有个很大的问题。因为页面的首屏显示页面，和内部各种弹窗、按钮、提示等等。都有很多的图片。这样的话就平白增加了很多很多的加载时间。页面早就加载出来了但是仅仅是图片没有加载出来导致页面的loading会一直进行中，所以不要使用这个。
应该使用的是$(document).ready，它仅仅是将dom元素加载之后执行的方法，会前置于window.onload方法执行。
二、浏览器相关知识
首先浏览器是单线程语言。如果将js放到头部head中，它会等到js下载并运行一次结束后再加载后面的内容。所以要注意script的顺序以及是否有死循环的代码，或者长时间耗时的代码。如果存在建议将其放到body尾部。或者增加webworkers等等方式减少这种问题的出现。
另外图片资源等外部资源是可以并行加载的。并且是不会阻塞浏览器的其他执行的。