珍爱网笔试题

一、选择题

1、HTML5新特性

  • 用于绘画的 canvas 元素
  • 用于媒介回放的 video 和 audio 元素--video：Ogg/MPEG4/WebM；audio：Ogg Vorbis/MP3/Wav
  • 对本地离线存储的更好的支持
  • 新的特殊内容元素，比如 article、footer、header、nav、section
  • 新的表单控件，比如 calendar、date、time、email、url、search
  • 文档类型doctype
  • 引入css、js文件不用再加type属性了

http://www.webkfa.com/one4/w1730.html

2、CSS3新特性

CSS3 选择器:tbody: nth-child(even), nth-child(odd),E:last-child 等等
@Font-face 特性：可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。
Word-wrap & Text-overflow 样式
文字渲染（Text-decoration）
CSS3 的多列布局（multi-column layout）
边框和颜色（color, border）
CSS3 的渐变效果（Gradient）
CSS3 的阴影（Shadow）和反射（Reflect）效果
CSS3 的背景效果
CSS3 的 Transitions, Transforms 和 Animation

在CSS3中唯一引入的伪元素是::selection

http://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/

3、JS的基本数据类型

Undefined、Null、Boolean、Number、String

二、简答题

1、cookies、sessionStorage、localStorage的区别

共同点：都是保存在浏览器端，且同源的。

区别：
  1. cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
  2. 存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
  3. 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
  4. 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
  5. Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。
  6. Web Storage 的 api 接口使用更方便。

http://blog.csdn.net/you23hai45/article/details/49052251

 

2、写一个九宫格布局，如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>九宫格布局</title>
    <style type="text/css">
        body,ul,li{margin:0;padding:0;}
        .layout{width: 620px;height: 80px;margin: 20px;}
        .box{margin-left: 5px;margin-top: 5px;list-style-type:none;}
        .box:after{   content: ".";   display: block;   line-height: 0;   width:0;   height: 0;   clear: both;   visibility: hidden;   overflow: hidden;   
        }   
        .box li{
            display: block;
            width: 200px;
            height: 100px;
            float: left;
            border: 5px #ccc solid;
            margin-left: -5px;   
             margin-top: -5px; 
             position: relative;    /*将整个位置占为自己所有*/
             z-index: 1;
        }
        .box li:hover{border-color: #f00;z-index: 2;}
    </style>
</head>
<body>
    <div class="layout">
        <ul class="box">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

3、把var str = "www.zhenai.com" 变成 var strResult = "moc.ianehz.www"

var strResult = str.split("").reverse().join("")

4、如果需要手动写动画，你认为最小时的间隔是多久，为什么？

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms

5、你如何对网站的文件和资源进行优化（可列出用到的自动化工具）

  1. 文件合并（目的是减少http请求）：Web性能优化最佳实践中最重要的一条是减少HTTP 请求，它也是YSlow中比重最大的一条规 则。减少HTTP请求的方案主要有合并JavaScript和CSS文件、CSS Sprites、图像映射 （Image Map）和使用Data URI来编码图片。
  2. 文件压缩：目的是直接减少文件下载的体积；常用的工具是YUI Compressor。参考http://www.cnblogs.com/Darren_code/archive/2011/12/31/property.html
  3. 使用 CDN （内容分发网络）来托管资源；"其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。" 
  4. 缓存的使用（并且多个域名来提供缓存）
  5. GZIP 压缩你的 JS 和 CSS 文件
  6. 注意控制Cookie大小和污染

6、ajax请求的时候get和post发昂视的区别，以及如何解决跨域问题

1.GET

var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","demo_get.php?id=1&name=lemoo&t=" + Math.random(),true);
xmlhttp.send();

传递参数直接在?后指定，多个参数用&分隔
GET请求同一URL时会有缓存，通过参数是否一致来判断
解决缓存问题，加个时间戳使每次参数不一致，上例中的t=Math.random()

2.POST

var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST","ajax_test.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

POST没有缓存
POST发送的数据量大
AJAX无法发送文件
readyState改变时触发onreadystatechange事件，4为完成
status是返回状态，200是成功，404是未找到页面
responseText是返回的数据，为字符串格式

 

7、前端优化、用过的框架、自己的作品、自己的优势

 

8、如何判断一个对象是空对象

function judge(obj){
　　for(var i in obj){ //如果不为空，则会执行到这一步，返回false
　　　　return false;
　　}
　 return true;
}

jQuery有方法可以判断。

 

9、如何在跨域请求的时候让服务端能拿到你的cookie信息

http://blog.csdn.net/wzl002/article/details/51441704

浏览器中跨域创建cookie的问题

 

posted @ 2016-09-26 18:47  chenxj  阅读(1217)  评论(1)    收藏  举报