前端面试题
在知乎上看到别人贴的面试体,自己总结了一下。
对CSS规范的了解
CSS编码规范:
语法:
1. 用两个空格来代替制表符(tab) – 这是唯一能保证在所有环境下获得一致展现的方法。
2. 为选择器分组时,将单独的选择器单独放在一行。
3. 为了代码的易读性,在每个声明块的左花括号前添加一个空格。
4. 声明块的右花括号应当单独成行。
5. 每条声明语句的 : 后应该插入一个空格。
6. 为了获得更准确的错误报告,每条声明都应该独占一行。
7. 所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的,但是,如果省略这个分号,你的代码可能更易出错。
8. 对于以逗号分隔的属性值,每个逗号后面都应该插入一个空格(例如,box-shadow)。
9. 不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。这样利于从多个属性值(既加逗号也加空格)中区分多个颜色值(只加逗号,不加空格)。
10. 对于属性值或颜色参数,省略小于 1 的小数前面的 0 (例如,.5 代替 0.5;-.5px 代替 -0.5px)。
11. 尽量使用简写形式的十六进制值,例如,用 #fff 代替 #ffffff。
12. 为选择器中的属性添加双引号,例如,input[type=”text”]。只有在某些情况下是可选的,但是,为了代码的一致性,建议都加上双引号。
13. 避免为 0 值指定单位,例如,用 margin: 0; 代替 margin: 0px;。
/* Bad CSS */
.selector, .selector-secondary, .selector[type=text] {
padding:15px;
margin:0px 0px 15px;
background-color:rgba(0, 0, 0, 0.5);
box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}
/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
padding: 15px;
margin-bottom: 15px;
background-color: rgba(0,0,0,.5);
box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}
css声明顺序
相关的属性声明应当归为一组,并按照下面的顺序排列:
1. Positioning 定位属性。如position, left, top, z-index等
2. Box Model 盒子模型属性。如display, float, width, height, margin, padding等属性
3. Typographic 文字相关属性。如font, color, text-*, line-height等属性
4. Visual 视觉属性。如background, border, box-shadow, border-radius等
由于定位(positioning)可以从正常的文档流中移除元素,并且还能覆盖盒模型(box model)相关的样式,因此排在首位。盒模型排在第二位,因为它决定了组件的尺寸和位置。
.declaration-order {
/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* Box-model */
display: block;
float: right;
width: 100px;
height: 100px;
margin: 0;
padding: 0;
/* Typography */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
color: #333;
text-align: center;
/* Visual */
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px;
/* Misc */
opacity: 1;
}
不要使用@import
与 <link> 标签相比,@import 指令要慢很多,不光增加了额外的请求次数,还会导致不可预料的问题。替代办法有以下几种:
1. 使用多个 <link> 元素
2. 通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件
媒体查询(Media query) 代码所处的位置
将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。
如果你把他们分开了,将来只会被大家遗忘。
.element { ... }
.element-avatar { ... }
.element-selected { ... }
@media (min-width: 480px) {
.element { ...}
.element-avatar { ... }
.element-selected { ... }
}
单行规则声明
对于只包含一条声明的样式,为了易读性和便于快速编辑,建议将语句放在同一行。对于带有多条声明的样式,还是应当将声明分为多行。
/* 一条声明的样式只写在一行 */
.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }
/* 多条声明的样式,每一条声明写在一行 */
.sprite {
display: inline-block;
width: 16px;
height: 15px;
background-image: url(../img/sprite.png);
}
简写形式的属性声明
在需要显示地设置所有值的情况下,应当尽量限制使用简写形式的属性声明。常见的滥用简写属性声明的情况如下:
1. padding
2. margin
3. font
4. background
5. border
6. border-radius
/* 不好的代码 */
.element {
margin: 0 0 10px;
background: red;
background: url("image.jpg");
border-radius: 3px 3px 0 0;
}
/* 好的代码 */
.element {
margin-bottom: 10px;
background-color: red;
background-image: url("image.jpg");
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
class的命名
1. class 名称中只能出现小写字符和横线(例如,.btn 和 .btn-danger)。
2. 避免过度任意的简写。.btn 代表 button,但是 .s 不能表达任何意思。
3. class 名称应当尽可能短,并且意义明确。
4. 使用有意义的名称。使用有组织的或目的明确的名称,不要使用表现形式的名称。
5. 基于最近的父 class 或基本 class 作为新 class 的前缀。
6. 使用 .js-* class 来标识行为(与样式相对),并且不要将这些 class 包含到 CSS 文件中。
/* 不好的代码 */
.t { ... }
.red { ... }
.header { ... }
/* 好的代码 */
.tweet { ... }
.important { ... }
.tweet-header { ... }
选择器
1. 对于通用元素使用 class ,这样利于渲染性能的优化。
2. 对于经常出现的组件,避免使用属性选择器(例如,[class^="..."])。浏览器的性能会受到这些因素的影响。
3. 选择器要尽可能短,并且尽量限制组成选择器的元素个数,建议不要超过 3 。
4. 只有在必要的时候才将 class 限制在最近的父元素内
/* 不好的代码 */
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }
/* 好的代码 */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }
代码组织
1. 以组件为单位组织代码段。
2. 制定一致的注释规范。
3. 使用一致的空白符将代码分隔成块,这样利于扫描较大的文档。
4. 如果使用了多个 CSS 文件,将其按照组件而非页面的形式分拆,因为页面会被重组,而组件只会被移动。
CSS3动画的实现
1.transform 变形
.div{
transform:translate(x,y);
}
.div{
transform:scale(x,y);//xy方向倍数
}
.div{
transform:rptate(-30deg);//角度
}
.div{
transform:skew(x,y);//xy方向倾斜角度
}
2.transition 过渡
transition: width 3s ease(快-慢-快)/linear(线性匀速)/ease in(慢-快)/ease out(快-慢)
3.animation 动画
@keyframes 自定义名称{
from/to/百分百{
样式属性:样式;
}
}
手写类继承
(1)构造继承
(2)原型继承
(3)实例继承
(4)拷贝继承
//原型prototype机制或apply和call方法去实现较简单,建议使用构造函数与原型混合方式。
function Parent() {
this.name = ‘song’;
}
function Child() {
this.age = 28;
}
Child.prototype = new Parent(); //通过原型,继承了Parent
var demo = new Child();
alert(demo.age);
alert(demo.name); //得到被继承的属性
call apply继承
function a(){
alert(“a”);
}
function b(){
}
b.call(a());
b.apply(a());
b();
手写数组去重
function deleteArr(arr){
for(var i=0;i<arr.length;i++){
for(var j=i+1;j<arr.length;j++){
if(arr[i]==arr[j]){
arr.splice(i,1);
j=0;
i=0;
}
}
}
console.log(arr);
}
deleteArr(arr);
var arr=[3,2,5,5,8,8,8,9,10,1,2];
var a=arr.filter(function(items,index,self) {
return self.indexOf(items)===index;
});
console.log(a);
如何遍历对象的属性
js for in
jq Object.each=function(index,items){
console.log(items[index]);
}
new关键字的过程
(1)创建一个空对象,并且 this 变量引用该对象,同时还继承了该函数的原型。
(2)属性和方法被加入到 this 引用的对象中。
(3)新创建的对象由 this 所引用,并且最后隐式的返回 this 。
判断变量类型,如何判断变量是函数
表达式 返回值
typeof undefined 'undefined'
typeof null 'object'
typeof true 'boolean'
typeof 123 'number'
typeof "abc" 'string'
typeof function() {} 'function'
typeof {} 'object'
typeof [] 'object'
typeof unknownVariable 'undefined'
function a(){};
console.log(typeof a==='function');//true;
如何判断一个变量是数组
var arr = [1,2,3,1];
alert(arr instanceof Array); // true
var arr = [1,2,3,1];
alert(arr.constructor === Array); // true
function isArrayFn (o) {
return Object.prototype.toString.call(o) === '[object Array]';
}
var arr = [1,2,3,1];
alert(isArrayFn(arr));// true
call和apply的作用,区别
call和apply的功能基本相同,都是实现继承或者转换对象指针的作用;
唯一不通的是前者参数是罗列出来的,后者是存到数组中的;
call或apply功能就是实现继承的;与面向对象的继承extends功能相似;但写法不 同;
语法:
.call(对象[,参数1,参数2,....]);//此地参数是指的是对象的参数,非方法的参数;
.apply(对象,参数数组)//参数数组的形式:[参数1,参数2,......]
什么是JSON?
前面简单说了一下,JSON是一种基于文本的数据交换方式,或者叫做数据描述格式,你是否该选用他首先肯定要关注它所拥有的优点。
JSON的优点:
1、基于纯文本,跨平台传递极其简单;
2、Javascript原生支持,后台语言几乎全部支持;
3、轻量级数据格式,占用字符数量极少,特别适合互联网传递;
4、可读性较强,虽然比不上XML那么一目了然,但在合理的依次缩进之后还是很容易识别的;
5、容易编写和解析,当然前提是你要知道数据结构;
js实现css的:hover效果
window.onload=function(){
var a=document.getElementById("div1");
a.onmouseover=function(){
this.className="in";
// alert(11);
}
a.onmouseout=function(){
this.className="out";
// alert(22);
}
}
只能加没有的属性。
解释事件代理,事件流模型
Q:事件的委托(代理 Delegated Events)的原理以及优缺点
A:委托(代理)事件是那些被绑定到父级元素的事件,但是只有当满足一定匹配条件时才会被挪。这是靠事件的冒泡机制来实现的,
优点是:
(1)可以大量节省内存占用,减少事件注册,比如在table上代理所有td的click事件就非常棒
(2)可以实现当新增子对象时无需再次对其绑定事件,对于动态内容部分尤为合适
缺点是:
事件代理的应用常用应该仅限于上述需求下,如果把所有事件都用代理就可能会出现事件误判,即本不应用触发事件的被绑上了事件。
js
var toolbar = document.querySelector(".toolbar");
toolbar.addEventListener("click", function(e) {
var button = e.target;
if(!button.classList.contains("active"))
button.classList.add("active");
else
button.classList.remove("active");
});
jq
$(function(){
$('.ul').on('click','.li',function(e){
var li=e.target;//ul下面的每个li
console.log(e.target);
$(li).addClass('active');
});
Q:描述下js里面的事件流
A:DOM2级事件模型中规定了事件流的三个阶段:捕获阶段、目标阶段、冒泡阶段,低版本IE(IE8及以下版本)不支持捕获阶段
捕获事件流:Netscape提出的事件流,即事件由页面元素接收,逐级向下,传播到最具体的元素。
冒泡事件流:IE提出的事件流,即事件由最具体的元素接收,逐级向上,传播到页面。
display属性的值和介绍
block块类型。默认宽度为父元素宽度,可设置宽高,换行显示。
none缺省值。象行内元素类型一样显示。
inline行内元素类型。默认宽度为内容宽度,不可设置宽高,同行显示。
inline-block 默认宽度为内容宽度,可以设置宽高,同行显示。
list-item 象块类型元素一样显示,并添加样式列表标记。
table此元素会作为块级表格来显示。
inherit规定应该从父元素继承 display 属性的值。
响应式布局的方法,并详细解释
媒体查询重新定义不同分辨率下的css样式
背景图background-size:100%/contain;
box-sizing的属性值及区别
box-sizing:content-box|border-box|inherit;
content-box撑起来
border-box挤进去
inherit继承父级
移动端调试的方法
chrome开发者模式
有几种Doctype,Doctype的作用
标准,混杂,准标准模式,超级标准模式
严格模式和混杂模式如何区分,有何意义
(1)、声明位于位于HTML文档中的第一行,处于 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
(2)、标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
HTML5 为什么只需要写 < !DOCTYPE HTML>?
HTML5 不基于 SGML,因此不需要对DTD进行引用,但是需要doctype来规范浏览器的行为(让浏览器按照它们应该的方式来运行);
而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型
为什么要跨域,跨域是什么
域(Domain)是Windows网络中独立运行的单位,域之间相互访问则需要建立信任关系(即Trust Relation)。信任关系是连接在域与域之间的桥梁。当一个域与其他域建立了信任关系后,2个域之间不但可以按需要相互进行管理,还可以跨网分配文件和打印机等设备资源,使不同的域之间实现网络资源的共享与管理。 有一种简明的说法来解释广域跨域:跨域访问,简单来说就是 A 网站的 javascript 代码试图访问 B 网站,包括提交内容和获取内容。由于安全原因,跨域访问是被各大浏览器所默认禁止的。
解决方案:
1、js向服务器发送请求,然后让服务器去另一个域上获取数据后返回。(用于你无法控制另一个域) 比如php中利用cUrl。
2、放置跨域文件.
3、用JSONP。虽然不能跨域进行通信,但是可以引入跨域的js文件。
是否了解viewport
viewport 是用户网页的可视区域。viewport 翻译为中文可以叫做"视区"。
手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下:
< meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
height:和 width 相对应,指定高度。
initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
maximum-scale:允许用户缩放到的最大比例。
minimum-scale:允许用户缩放到的最小比例。
user-scalable:用户是否可以手动缩放。
前端性能优化
(1) 减少http请求次数:CSS Sprites, JS、CSS源码压缩、图片大小控制合适;网页Gzip,CDN托管,data缓存 ,图片服务器。
(2) 前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数
(3) 用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能。
(4) 当需要设置的样式很多时设置className而不是直接操作style。
(5) 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
(6) 避免使用CSS Expression(css表达式)又称Dynamic properties(动态属性)。
(7) 图片预加载,将样式表放在顶部,将脚本放在底部 加上时间戳。
(8) 避免在页面的主体布局中使用table,table要等其中的内容完全下载之后才会显示出来,显示比div+css布局慢。
对普通的网站有一个统一的思路,就是尽量向前端优化、减少数据库操作、减少磁盘IO。向前端优化指的是,在不影响功能和体验的情况下,能在浏览器执行的不要在服务端执行,能在缓存服务器上直接返回的不要到应用服务器,程序能直接取得的结果不要到外部取得,本机内能取得的数据不要到远程取,内存能取到的不要到磁盘取,缓存中有的不要去数据库查询。减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成(例如join查询),减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分,换语言是无法“优化”的。