用得到的知识点

响应式布局

懒加载（性能优化）

点亮星星评分

控制+-按钮的数量变化

跨域解决方案

——————————下面细说——————————————————————————————————————————————————————

 

响应式布局

 

响应式布局开发流程

第一步：确定需要兼容的设备类型、屏幕尺寸

第二步：制作线框原型

第三步：测试线框原型

第四步：视觉设计

在设计的时候需要保证内容文字的可读性、控件可点击区域的面积等

第五步：前端实现

响应式设计的页面由于页面布局、内容尺寸发生了变化，所以最终的产出更有可能与设计稿出入较大，需要前端开发人员和设计师多沟通。

响应式布局的实现原理

首先我们应该遵循移动端优先，交互和设计以移动端为主，pc则作为移动端的扩展，一个页面需要兼容不同终端，那么有两个关键点是我们需要去做到响应式的：响应式布局和响应式内容（图片、多媒体）

1.响应式布局 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="HandheldFriendly" content="true">            1.Meta标签定义           2.使用Media Queries 适配对应样式   @media screen and(max-width:980px){样式}         2.响应式内容             1.响应式图片  #wrap img {      max-width:100%;       height:auto; }   如此设置后ID为wrap内的图片会根据wrap的宽度改变已达到等宽扩充，height为auto的设置是为了保证图片原始的高宽比例，以至于图片不会失真。

Logo图片background-size是css3的新属性，用于设置背景图片的大小，有两个可选值，第一个值用于指定背景图的width,第2个值用于指定背景图的height,如果只指定一个值，那么另一个值默认为auto。

 

2.响应式字体

css3引入了新的单位叫做rem,和em类似但对于Html元素，rem更方便使用。

rem是相对于根元素的，不要忘记重置根元素字体大小：看这篇https://blog.csdn.net/yingzizizizizizzz/article/details/81029078

html{font-size:100%;} 完成后，你可以定义响应式字体： @media (min-width:640px){body{font-size:1rem;}} @media (min-width:960px){body{font-size:1.2rem;}} @media (min-width:1200px){body{font-size:1.5rem;}}  

三、响应式前端设计的优化。主要针对用户体验的改进。

(1)减轻Javascript库负载 对于移动端来说，jQuery表现的太过厚重，而现在针对移动端的状态来说，有jQuery Mobile、YUI、XUI等可供选择的框架。

（2）减少HTTP请求次数 移动端相比较PC端有一个特殊的限制需要考虑到，就是用户的网络流量是有限的。这时候针对这些页面内部的部分操作，可以使用Ajax异步请求来完成，针对短期内不会变化的一些数据，可以使用服务器端缓存、前端缓存等机制来保存这些数据，这样可以减少用户一定的数据请求量。

（3）Javascript和CSS需要尽量压缩 把页面中使用的Javascript和CSS进行压缩之后会有效地减少页面大小。

（4）用CDN管理页面资源 CDN的即内容分发网络，意在尽可能避开互联网上有可能影响数据传输速度和稳定性的环节，使内容传输的更稳定。

（5）列表图片实现“懒”加载 移动终端设备因为屏幕大小有限，没有必要将全屏中的图片一次性加载完成，网页加载的同时，我们可以选择逐个加载，当用户进行滑动页面的时候，再继续加载图片。

（6）图片显示的优化处理 根据用户设备的分辨率来加载不同分辨率下的不同图片，这样既能给不同终端的用户一个很好的视觉体验，又不会白白浪费用户的网络数据流量。

 

懒加载

1.懒加载的原理是什么？

 

页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片，只有通过javascript设置了图片路径，浏览器才会发送请求。 懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位，把正真的路径存在元素的“data-img”（这个名字起个自己认识好记的就行）属性里，要用的时候就取出来，再设置；

2.懒加载的实现步骤？

1)首先，不要将图片地址放到src属性中，而是放到其它属性(data-img)中。 2)页面加载完成后，根据scrollTop判断图片是否在用户的视野内，如果在，则将data-img属性中的值取出存放到src属性中。 3)在滚动事件中重复判断图片是否进入视野，如果进入，则将data-img属性中的值取出存放到src属性中。scollTop<$(window).height()+$(document).scrollTop()

讲的明白的懒加载实例 扩展，预加载

http://web.jobbole.com/86785/