Web前端开发笔试&面试_04_20161019MTBS
2016-10-28 17:11
781 查看
1.运用CSS3 ，实现div 沿Y 轴上下循环运动的动画。
我写是：-webkit-animation:xz 3s linear 1s infinite //即XZ轴变化，Y轴不变
正确答案是：
原来的这样是实现上右下左-左下右上循环的：
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. 以下代码：
//按顺序输出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
我写是：-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
- Web前端开发笔试&面试_05_other 2016104399MS
- Web前端开发笔试&面试_05
- Web前端开发笔试&面试_02（others）
- 2011年腾讯实习生应聘（软件开发>Web前端>flash方向）笔试面试经历
- Web前端开发笔试&面试_01（mi:）
- 关于Web前端开发，附：（百度web前端笔试面试题目）
- 2017深圳web前端开发面试笔试题
- 2011年腾讯实习生应聘（软件开发>Web前端>flash方向）笔试面试经历
- 腾讯Web前端（Js）笔试面试之谈
- 我面试的web前端开发技术的题目
- 腾讯web前端开发工程师笔试题及答案
- java Web开发方向全套培训课件及Java基础自测、面试笔试自测试题
- 腾讯web前端开发笔试题及答案
- 面试Web开发工程师的部分笔试题
- WEB前端开发笔试题2
- 淘宝web前端开发岗面试经历及感悟
- 关于Web前端及百度web前端笔试面试题目
- web前端开发工程师笔试题及答案(二)
- 记百度腾讯实习生面试经历-web前端开发