【个人】搜狗面试总结(一)
写在前面的话
——————————————————————————————————————————————————————
9号晚上下班前接了个电话，通知我12号下午去搜狗面试，当时激动得，感觉幸运星降临啊！！
我这种二流学校的学生也有大公司面试的机会啦！激动啊！
然后周六一如既往的加班了，周天在家从早到晚看知识点，以为自己掌握的都可以了，基本的问题可以对答如流了，
然后周一兴冲冲的去面试了。
然鹅，然鹅！
机会给我了！我自己没有抓住！心痛！痛的无法呼吸！
心痛之余，想了想，虽然没进去，但是收获还是相当大的，最最起码，让我意识到了，
原本我以为我知道的熟悉的东西，其实知道的并不是那么准确，或者说有些东西还是理解不到位。
加上因为目前所在公司的原因，除了周天天天加班不，说我一个前端还被拽去写后台这种情况，
前端的需求真的是很少很少，少到我一个多月没写过页面了，然后这么去面试了，本来就理解不到位，
加上时间长不写页面，技能生疏的厉害，结果只能说，还是自己没准备好，只能怪自己。
无奈之余，回顾了下当时面试被问到的问题，总结了下自己的不足，偷摸写下此文警醒自己！！！
同时把被问到的问题分享一下，希望对和我一样的应届毕业生有更多的帮助。
——————————————————————————————————————————————————————
本人在学校是学后台的，纯自学转的前端，可能有些见解不太准确或者可以说有错误，欢迎各位聚聚提出指正~O(∩_∩)O灰常感谢~
（正文开始）
总结下被问到的问题，有以下：
1.一般在什么情况下使用雪碧图，把哪些图合成雪碧图，为什么把那些合成雪碧图，其他的不合
2.CSS3有哪些新特性，animation和transition的区别
3.有哪些在实际开发的时候遇到的问题，最后自己解决了，说一说整个过程
4.网页的图片优化问题，都怎么优化图片，对PS里面的各种选项了解吗，存储为JPG的时候一般用品质几
5.IE浏览器的兼容性
6.盒模型
7.flex
8.媒体查询的缺陷
9.除了用框架和媒体查询外的其他的实现响应式的方法
问题不难，但是面试官问的很细，真的很细，细到我说不出来为止。鹅且，嗯。。（悄悄吐槽下，这个面试官。。嗯。不管我说的对错，只听我说，不作任何评论，最多就是微微皱眉，一般这个时候我就觉得我可能哪里说得不对了，所以以至于最后他问我问题我答出来的有问题，他不说对错，我就继续错着往下说了，然后，被他错着问了，然后说着说着发现不对劲，发现被他带进坑了，然后最后超级简单的问题把自己绕晕了，自己出不来了/(ㄒoㄒ)/~~。。从搜狗出来走在路上才捋清楚是怎么个情况。。。心塞塞。。。）其实还是怪自己基础不够扎实。所以我要好好学习！
然后来说说面试之后自己对以上问题的理解，如有问题欢迎各位指正！！！！！如果发现错了一定要告诉宝宝啊！！！（认真脸！）有几个问题我自己不知道，百度也没百到，因为身边没有可以请教的人，等以后弄清楚之后再更。
1.一般在什么情况下使用雪碧图，把哪些图合成雪碧图，为什么把那些合成雪碧图，其他的不合
在网页中使用雪碧图的主要目的是为了优化页面性能，因为页面中的每一张图片都需要提一次HTTP请求过去，图片一多，请求一多，来回的响应时间加起来就比较长了，熟悉调试工具的童鞋们肯定都知道，开发者工具里面有个Network可以看到各种脚本啊图片啊甚至可以具体到每个function的响应时间。看图。
嗯。截这个图的时候宝宝的网卡的要命。。（好像有点跑了。。言归正传）
所以，我们可以把小图标，小按钮，小图片神马的，合成雪碧图。（嗯这是我当时回答的，自我感觉。。好像还可以。。）
然后，面试官问我，那你有木有自己总结过，哪些图要合成雪碧图，哪些不合雪碧图。
关于这个问题，我的理解是，小图标，小按钮，小图片什么的，放一起，合一下。
这个小。。多大以下算小我真的没有量化过，我觉得，首页轮播图那么大的就不算小图片了，就不合了吧。。。
因为之前看到过一篇博文讲，合雪碧图的时候，尽量吧颜色相近的放一起，假如只有4个色，
就没必要用到256色槽了（至于256色…等我研究透了再补充…），这样可以缩小图片内存。
然后就是，首页轮播图之类的要展示的图片，不合在一起。
不合的理由是，雪碧图每次使用的时候需要定位，定位的时候是要占CPU内存的
（这个是后来走在路上才想起来，当时没想起来(ノДＴ)，
所以雪碧图用多了也不好，小个的图片挨个提请求，不划算，但是大个的图片如果合起来，
首先这个图的内存会很可观（一般展示用的大图都不糙的吧…），其次，由于图本身就大，
如果还合起来，很有可能提这一次http请求来传输这个图片的时间就大于分开提好几次的时间的和啦…（我猜的0.0，还没验证...）
关于雪碧图的两篇分享：
1.如何规划站点的雪碧图 http://tid.tenpay.com/?p=93
2.雪碧图在缩放场景下的特殊处理
http://efe.baidu.com/blog/sprite-scale/
————————————————————————————————————————————
今天更一下第二和第四个问题
CSS3有哪些新特性，animation和transition的区别
CSS3比起CSS2新增了很多新特性,比如子/后代选择器、文字渲染text-decoration、边框和颜色的透明度rgba（）、
border圆角border-radius、渐变效果gradient、阴影text-shadow和box-shadow、
弹性盒模型flex、动画animation和transition等等，就不一一列举了，贴上一篇好文给大家
http://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/
然后，animation和transition的区别：
这两个都是动画，transition通常和transform配合使用，主要关注的是动画的过渡效果，不关注它过渡过程中的每一步细节是怎么实现的，
只需要给它参数告诉它起始和终止的两种状态的属性值，按照Transition指定的方式进行过渡；
animation关注的是动画实现的过程，它也可以通过制定某一属性值的方式使用和transition同样的方法，
但是它可以通过keyframe显式控制当前帧的属性值而transition不可以，所以相对而言animation的功能更加灵活。
另外一个区别是animation通过模拟属性值改变来实现动画，动画结束之后元素的属性没有变化；
而Transition确实改变了元素的属性值，动画结束之后元素的属性发生了变化；
网页的图片优化问题，都怎么优化图片，存储为JPG的时候一般用品质几
1.使用雪碧图（看上面↑）
2.PS中的相关图片优化方法：将图片存储为web所用格式、使用web安全色、使用jpg的逐行扫描、透明图片选择png格式、动态图片选择gif格式
存储为Web所用格式
“存储为Web所用格式”（快捷键ctrl+alt+shift+s）可以将图像保存成基于网页设计优化过的格式，包括图像质量、图像分辨率、浏览器兼容性和文件大小。
这时候的优化就分为有损和无损两种。无损数据压缩保证了图像在没有任何品质和信息丢失的情况下重现，而有损数据压缩的结果就是可能造成品质和信息的丢失。
主流无损媒介格式有gif和png，主流有损媒介jpg。
JPEG是日常中首选的图片格式，它是以它的创造者“联合图像专家小组”来命名的。Jpeg之所以能够成为标准，
是因为它在压缩图像数据的同时可以保留高品质，并且在相关信息上能够接近无损图像的效果。当你在保存图片的时候，
有几种网页格式预设可供选择。对于一张图片，你应该考虑是使用JPEG 低、JPEG 中，还是JPEG高。
相比起超过250KB的源文件，我们选择中等质量或者高等质量的压缩预设就能够得到一个大小不超过30KB，并有合适品质的图片。
对于JPG格式的图片，逐行扫描有时候是个不错的选择。在网站加载时，这种格式的图像会逐渐呈现（即使在现代宽带连接的互联网时代，这种等待时间的类型已不是问题了）。
这使用户在图像完全加载之前便可快速预览到，令人感觉网页反应更快。
GIF是一种只用到256个颜色调色板的图片格式，这让它成为不需要使用太广泛色域的网页图片的理想选择。
因为GIF图像受到256色的限制，它本应该极少被用到图片中，但是他们恰好适合那些使用纯色或是有限色彩的图像。
对于图片来说，通常来说不是使用JPEG有损压缩，就是GIF无损格式。
PNG是一种类似于GIF的无损格式，只是它支持更为丰富的色彩（有时候也让它的体积变大），而且可以支持带透明图层的Alpha通道，
而非单一透明像素，因此透明图片选择PNG格式。当图片必须保留完整品质在网络上进行传输的时候，PNG是最佳的选择。
在选择存为web所用格式的时候，左下角会有“下载时间”这一信息，你可以看到，在当前设置下，你所保存的图片在你所选网络连接状态下的下载时间。
在存为jpg格式的时候会有一个对话框，其中有选择品质的选项，如果对图片要求较高，就选12最佳，通常情况下如果可以接受默认的品质时文件的大小就选默认，如果对文件大小有要求，一般选5-7，低于5就压缩的比较厉害了。选项中的“连续”就是上面提到的jpg的逐行扫描。
