1.运用CSS3 ，实现div 沿Y 轴上下循环运动的动画。

我写是：-webkit-animation:xz 3s linear 1s infinite //即XZ轴变化，Y轴不变

正确答案是：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<style>

div

{

    width:100px;

    height:100px;

    background:red;

    position:relative;

    animation-name:myfirst;

    animation-duration:1s;

    animation-timing-function:linear;

    animation-delay:0s;

    animation-iteration-count:infinite;

    animation-direction:alternate;

    animation-play-state:running;

    /* Safari and Chrome: */

    -webkit-animation-name:myfirst;

    -webkit-animation-duration:1s;

    -webkit-animation-timing-function:linear;

    -webkit-animation-delay:0s;

    -webkit-animation-iteration-count:infinite;

    -webkit-animation-direction:alternate;

    -webkit-animation-play-state:running;

}

@keyframes myfirst

{

    0%   {background:red; left:100px; top:0px;}

    50% {background:green; left:100px; top:200px;}

    100%   {background:red; left:100px; top:0px;}

}

</style>

</head>

<body>

<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>

<div></div>

</body>

</html>

原来的这样是实现上右下左-左下右上循环的：

@keyframes myfirst

{

    0%   {background:red; left:0px; top:0px;}

    25%  {background:yellow; left:200px; top:0px;}

    50%  {background:blue; left:200px; top:200px;}

    75%  {background:green; left:0px; top:200px;}

    100% {background:red; left:0px; top:0px;}

}

@-webkit-keyframes myfirst /* Safari and Chrome */

{

    0%   {background:red; left:0px; top:0px;}

    25%  {background:yellow; left:200px; top:0px;}

    50%  {background:blue; left:200px; top:200px;}

    75%  {background:green; left:0px; top:200px;}

    100% {background:red; left:0px; top:0px;}

}

2. 书写高效CSS时会有哪些问题需要考虑？ （ref:CSS 在工程中改变——面向对象的CSS （OO CSS））

（一）不要直接定义子节点，应把共性声明放到父类。

.mod .inner {...}    // .mod 下面的 inner

.inner {...}    // 不是很建议的声明

（二）结构与皮肤相分离。

<div class="container simpleExt"></div>  //html 结构

.container {...}  //控制结构的class

.simpleExt {...}  //控制皮肤的class

（三）容器与内容相分离。

<div class="container"><ul><li>排行</li></ul></div> //html 结构

.container ul{...}  //ul依赖了容器

<div class="container"><ul class="rankList"><li>排行</li></ul></div> //html 结构

.rankList ul{...}  //解除与容器的依赖，可以从一个容器转移到其他容器

（四）抽象出可重用的元素，建好组件库，在组件库内寻找可用的元素组装页面。

（五）往你想要扩展的对象本身增加 class 而不是其父节点。

（六）对象应该保持独立性

<div class="container"><div class="mod"></div></div> //html 结构

.container {...}

.container .mod {...} //控制结构的class

//应该写成如下：

<div class="container mod"> </div> //html 结构

（七）避免使用ID选择器，权重太高，无法重用。

（八）避免位置相关的样式

#header .container {...}

#footer .container {...}

//可直接写成 .container {...}

#header h1 {...}

#footer h1 {...}

h1,.h1 { }

h2,.h2 { }

<h1 class="h6"></h1>

（九）保证选择器相同的权重。

（八）类名应该剪短、清晰、语义化，OO CSS 的名字并不影响html 语义化。

3. 以下代码：

var a=1;

function test() {

    alert(a);

    a=2;

    alert(this.a);

    this.a=4;

    var a=3;

    alert(a);

}

test();

alert(a);

//按顺序输出alert 的值。

我答的是：undefined,1,3,1

答案是：undefined,1,3,4

4. jQuery 中 $(document).ready()和window.onload有什么区别。

（ref: http://www.jb51.net/article/21628.htm ）

1）执行时间

window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
  $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

2）编写个数不同

window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个

  $(document).ready()可以同时编写多个，并且都可以得到执行 。

3）简化写法

window.onload没有简化写法。
    $(document).ready(function(){})可以简写成$(function(){});

5. 列举5种以上减少网页加载时间的方法。

（1） 
重复的HTTP请求数量应尽量减少，减少调用其他页面、文件的数量。

（2） 
压缩Javascript、CSS代码。

（3） 
在文件头部放置css样式的定义。

（4） 
在文件末尾放Javascript脚本。

（5） 
css、javascript改由外部调用。

（6） 
尽可能减少DCOM元素。尽可能减少网页中各种<>元素数量，例如<table>的冗余很严重，而我们完全可以用<div>取代之。

（7） 
避免使用CSS脚本(CSS Expressions)。

（8） 
添加文件过期或缓存头。对于同一用户频繁访问的图片、Js脚本文件等可以在Apache或Nginx设置其缓冲时间，例如设置24小时过期时间，这样用户在访问过该页面之后再次访问时，同一组图片或JS不会再重复下载，从而减少了HTTP请求，用户访问速度明显有所提升，同时服务器负载也会下降。

（9） 
使用CDN(Content Delivery Network)网络加速。

（10）服务器启用gzip压缩功能。

（11）Ajax采用缓存调用。

Ajax调用都采用缓存调用方式，一般采用附加特征参数方式实现，注意其中的：<script src=”xxx.js?{VERHASH}”，{VERHASH}就是特征参数，这个参数不变化就使用缓存文件，如果发生变化则重新下载新文件或更新信息。

（12）Ajax调用尽量采用GET方法调用。

　实际使用XMLHttpRequest时，如果使用POST方法实现，会发生2次HTTP请求，而使用GET方法只会发生1次HTTP请求。如果改用GET方法，HTTP请求减少50%！

（13）缩减iframe的使用，如无必要，尽量不要使用。

6. 列举几个你擅长的前端技术栈，并重点说一下掌握和应用情况。

My ：

1）   
bootatrap:自己曾经做过的“网上便利店”，有使用到此技术，能够熟练使用栅格（grid）来制作表格等应用。

2）   
AngularJS：是弥补HTML在构建应用的不足。

3）   
jQuery：能使用其进行后台数据库的交互。

需要注意的题目：

1）   
CSS3增加了哪些新特性（模块）？

CSS3 被划分为模块。其中最重要的 CSS3 模块包括：

  • 选择器
  • 框模型
  • 背景和边框
  • 文本效果
  • 2D/3D 转换
  • 动画
  • 多列布局
  • 用户界面

2）   
HTML5有哪些新特性（可包括CSS3）？

HTML5 中的一些有趣的新特性：

  • 用于绘画的
    canvas 元素
  • 用于媒介回放的
    video 和 audio 元素
  • 对本地离线存储的更好的支持
  • 新的特殊内容元素，比如
    article、footer、header、nav、section
  • 新的表单控件，比如
    calendar、date、time、email、url、search

Web前端开发笔试&面试_04_20161019MTBS的更多相关文章

  1. Web前端开发笔试&面试_01（mi:）

    —— (al_me16041719002000) begin—— 1.(单选)下面哪个方法是String对象和Array对象都有的? A.splice B.split C.replace D.conc ...

  2. Web前端开发笔试&面试_02（others）

    AL>> 1.CSS 3 如何实现旋转图片? 答:transform : rotate 2.写CSS 的工具? 答:LESS.SASS 3.JavaScript 倒计时? 答:setTim ...

  3. Web前端开发笔试&面试_05_other 2016104399MS

    1.数据传送的方式,get post 的区别是? 2.你要怎么绑定页码(比如给你第三页,)? 3.数据流是如何实现,用for 循环? 4.轮播怎么实现?用原生JS实现. 5.布局,B是固定宽度,A的内 ...

  4. Web前端开发笔试&面试_05

    >>CW 1.JavaScript的2种变量范围有什么不同? 2.JavaScript 的对象有哪些? 3.

  5. Web前端开发笔试&面试_04

    >>XDL: 1.在CSS中,选择器的优先级?(如important,id,class 这些……) 2.如何消除行内间隙? Inline-block 3. 如何清除浮动? —— 4. CS ...

  6. Web前端开发笔试&面试_03

    WL: 1.如何显示.隐藏一个dom对象? 2.如何将一个网页中的内容水平置中?写出重要的html标签和css. (css:#content{align:center;float:left;}html ...

  7. 淘宝web前端开发岗面试经历及感悟

    今天下午四点接到淘宝UED的面试电话,很突然,很激动.现在怀着淡淡的忧伤为之文以志一下. 1.自我介绍一下. 我xx时候毕业,在xx公司任xx职务,主要负责xx balabala.(怕公司同事听到,接 ...

  8. 腾讯WEB前端开发三轮面试经历及面试题

    [一面]~=110分钟  2013/04/24 11:20  星期三 进门静坐30分钟做题. 填空题+大题+问答题 >>填空题何时接触电脑 何时接触前端运算符 字符串处理        延 ...

  9. 亲历腾讯WEB前端开发三轮面试经历及面试题

    [一面]~=110分钟  2014/09/24 11:20  星期三 进门静坐30分钟做题. 填空题+大题+问答题 >>填空题何时接触电脑 何时接触前端运算符 字符串处理        延 ...

随机推荐

  1. windows程序设计笔记

    2014.05.06 新建一个visual C++ -- 常规 -- 空白 的项目,用.c后缀名指定这是一个用C语言来写的windows项目.和C语言的hellworld程序做了一个比较,按照wind ...

  2. 无线安全渗透测试套件WiFi-Pumpkin新版本发布

    WiFi-Pumpkin是一款无线安全检测工具,利用该工具可以伪造接入点完成中间人攻击,同时也支持一些其它的无线渗透功能.旨在提供更安全的无线网络服务,该工具可用来监听目标的流量数据,通过无线钓鱼的方 ...

  3. ERP PowerDesigner工具使用（二）

    工具简介:

  4. 关于UIMenuController的使用 弹出菜单 UIMenuItem

    UIMenuController *menuController = [UIMenuController sharedMenuController];        UIMenuItem *menuI ...

  5. 《深入浅出Node.js》第3章 异步I/O

    @by Ruth92(转载请注明出处) 第3章 异步I/O Node 的基调:异步 I/O.事件驱动.单线程. Node 不再是一个服务器,而是一个可以基于它构建各种高速.可伸缩网络应用的平台. No ...

  6. 元素设置position:fixed属性后IE下宽度无法100%延伸

    元素设置position:fixed属性后IE下宽度无法100%延伸 IE bug 出现条件: 1.div1设置position:fixed属性,并且想要width:100%的效果. 2.div2(下 ...

  7. node模拟http服务器session机制-我们到底能走多远系列（36）

    我们到底能走多远系列(36) 扯淡: 年关将至,总是会在一些时间节点上才感觉时光飞逝,在平时浑浑噩噩的岁月里都浪费掉了太多的宝贵.请珍惜! 主题:      我们在编写http请求处理和响应的代码的时 ...

  8. Python4周 入职培训的过程

    这是我在过去几家公司招聘到工程师,Python入职培训的过程.时间分为4周,全部自学,仅提供大纲.适用于Web方向:1.Week1:读完<简明Python教程>,适应Python开发环境2 ...

  9. Sprint第二个冲刺（第二天）

    一.Sprint 计划会议:      在这次会议中我们主要讨论了我们正在做的几个任务,比如说在美化按钮和增添图片上我们都发表了自己的想法,卓炜杰同学也把我们的想法进行分析,寻求最适合的方法.在查看用 ...

  10. c 函数及指针学习 8

    联合体 1 2 3 4 5 6 7 8 9 10 11 12 13 #include <stdio.h>   union sa     {     double a;     int b; ...