前端面试题

作者: 赵一矛 | 来源:发表于2018-12-05 12:33 被阅读0次

const、var、js区别

const定义的变量不可以修改，而且必须初始化。
var定义的变量可以修改，如果不初始化会输出undefined,不会报错。
let是块级作用域，函数内部使用let定义后，对函数外部没有影响。

TDD的优缺点

TDD（Test-Driven Development）测试驱动开发，要求在编写某个功能的代码之前先编写测试代码，然后只编写使测试通过的功能代码，通过测试来推动整个开发的进行。这有助于编写简洁可用和高质量的代码，并加速开发过程。

优点

每次只需要关注一个点，减少开发这会儿的思维负担。
TDD的好处是覆盖完全的单元测试，对产品代码提供了一个保护网，可以轻松的迎接需求变化或改善代码的设计。
提前澄清需求，可以帮助我们去思考需求，并提前澄清需求，而不是代码写到一半发现不明确的需求。

缺点

代码量变大。
不适合工程期小的项目。

线程和进程的区别

一个程序至少是一个进程，一个进程至少是一个线程。线程的划分尺度小于进程，使得多线程程序的并发性高。
进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大的提高了程序的运行效率。
线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口，顺序执行序列和程序的出口。但是线程不能够独立执行，必须依附在应用程序中，由应用程序提供多个线程执行控制。

3种减少页面加载时间的方法。

优化图片
图片的格式的选择(GIF:提供的颜色较少，可以用在一些对颜色要求不高的地方)。
优化CSS(压缩合并css,如margin-top,margin-left);
网址后加斜杠(如www.campr.com/目录，会判断这个“目录是什么文件类型，或者是目录。)
标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。）
减少http请求(合并文件，合并图片)

div和span的区别

div是块级元素，span是行级元素。

在html中，position取值有哪几种，默认值是什么？

取值：

static
没有定位，元素出现在正常的流中（忽略top,bottom,left,right,z-index声明）
relative
相对定位的元素，相对于正常位置进行定位。
fixed
绝对定位元素，相对于浏览器窗口进行定位，元素的位置通过"left"、“right”、“top”、“bottom”属性进行规定。
absolute
绝对定位
inherit 规定应该从父元素继承position属性的值。
默认值：static

前端页面由那三个层构成，分别是什么？作用是什么？

前端页面构成：结构层、表示层、行为层

结构层
由html或XHTML之类的标记语言负责创建。标签，对网页内而语义含义做出描述，但这些标签不包含任何关于如何显示内容的信息。
表示层
由css负责创建。CSS对“如何显示有关内容”的问题做出了回答。
行为层
负责回答“内容应该如何对事件做出反应”这一问题。这是JavaScript语言和DOM主宰的领域。

页面布局中常听说的“结构与表现”分离，“结构”是指？“表现”是指？

结构：HTML
表现：CSS

javaScript用那些方法获取元素？

getElementById
getElementByClassName
getElementByTagName
getElementByName

js 的typeof返回数据类型

string、number、object、boolearn、function、undefined

你做的页面用那些浏览器测试过？这些浏览器的内核分别是什么？

IE:ie内核
火狐：Gecko
谷歌：webkit
opeara:Presto

标签上title与alt属性的区别是什么？

Alt:当图片不显示时，用文字代表
Title:为该属性提供信息。

列举3种强制转换和2种隐式转换

强制：parseInt,parseFloat,number
隐式（== ,===）
==：会转换数据类型，再比较
===：不会转换数据类型，直接比较

null和undefined的区别

null是一个表示"无"的对象，转为数值时为0;
undefined是一个表示"无"的原始值，转为数值时为NaN.
null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。
undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。
（1）变量被声明了，但是没有赋值，就等于undefined。
（2）调用函数时，应该提供的参数没有提供，该参数等于undefined.
（3）对象没有赋值的属性，该属性的值为undefined.
（4）函数没有返回值时，默认返回undefined.
null表示"没有对象"即该处不应该有值
（1）作为函数的参数，表示该函数的参数不是对象。
（2）作为对象

闭包

闭包的三个特性：

函数嵌套函数
函数内部可以引用外部的参数和变量
参数和变量不会被垃圾回收机制回收。

定义
闭包是指有权访问另一个函数作用域中的变量函数，创建闭包的最常见的方式就是在一个函数内部创建另一个函数，通过另一个函数访问这个函数的局部变量。
缺点
闭包的缺点就是常驻内存，会增大内存使用量，使用不当很容易造成内存泄漏。
一般函数执行完毕后，局部活动对象就被销毁，内存中仅仅保存了全局作用域。
嵌套函数闭包

function aaa(){
var a=1;
return function(){
alert(a++）
}；
}

var fun=aaa();
fun();
fun();
fun=null;//a被回收

闭包会使变量始终保存在内存中，如果不当使用会增大内存消耗。

主要场合
设计私有的方法和变量
好处

希望一个变量长期驻扎在内存中。
避免全局变量的污染。
私有成员的存在。

CSS中的link和@import的区别是？

link属于HTML标签，而@important是CSS提供的。
页面被加载的时，link会同时被加载，而@import被引用的css会等到引用它的css文件被加载时再加载。
import只在IE5以上才能识别，而link是HTML标签，无兼容问题。
link方式的样式的权重高于@import的权重。

position:absolute和float属性的异同

共同点：对内联元素设置float和absolute属性，可以让元素脱离文档流，并且可以设置其宽高。
不同点：float仍会占据位置，absolute会覆盖文档流中的其他元素。

浮动元素引起的问题及解决方法

问题

多个浮动的元素无法撑开父元素的宽度，父元素的高度可能会变为0;
若浮动元素后面跟非浮动元素，非浮动元素会紧跟其后浮动起来。
若浮动元素前面还有同级元素没有浮动，则会影响页面结构。

解决方法

clear:both
在最后一个浮动元素后面添加属性为:clear:both;的元素。

<style>
div.parent>div.fl{
    float: left;
    width: 200px;
    height: 200px;
    margin-right: 20px;
    border: 1px solid red;
}
.clear{
    clear: both;
}
</style>
<div class="parent">
    <div class="fl">1</div>
    <div class="fl">2</div>
    <div class="fl">3</div>
    <div class="fl">4</div>
    <div class="clear">5</div>
</div>

给父元素添加clear:both;属性的:after伪元素。

<style>
div.parent>div.fl{
    float: left;
    width: 200px;
    height: 200px;
    margin-right: 20px;
    border: 1px solid red;
}
.clear:after{
    content: '';
    display: block;
    clear: both;
}
</style>
<div class="parent clear">
    <div class="fl">1</div>
    <div class="fl">2</div>
    <div class="fl">3</div>
    <div class="fl">4</div>
</div>

注意：伪元素默认是内联水平，所以借助伪元素时要设置属性display:block;

overflow:auto / overflow:hidden

<style>
div.parent{
    overflow: auto;
    /*overflow: hidden;也可以*/
}
div.parent>div.fl{
    float: left;
    width: 200px;
    height: 200px;
    margin-right: 20px;
    border: 1px solid red;
}
</style>
<div class="parent">
    <div class="fl">1</div>
    <div class="fl">2</div>
    <div class="fl">3</div>
    <div class="fl">4</div>
</div>

浮动父级元素

<style>
div.parent{
    float: left;
}
div.parent>div.fl{
    float: left;
    width: 200px;
    height: 200px;
    margin-right: 20px;
    border: 1px solid red;
}
</style>
<div class="parent">
    <div class="fl">1</div>
    <div class="fl">2</div>
    <div class="fl">3</div>
    <div class="fl">4</div>
</div>

注意:一般不用这个方法，会引起父级元素排版问题。

请描述一下cookies,sessionStorage和localStorage的区别

cookie在浏览器和服务器间来回传递，sessionStorage和localStorage不会。
sessionStorage和localStorage的存储空间更大。
sessionStorage和localStorage有更加丰富易用的接口；
sessionStorage和localStorage各自独立的存储空间。

什么是语义化的HTML

直观的认识标签，对于搜索引擎的抓取有好处，用正确的标签做正确的事。
html语义化就是让页面结构化，便于浏览器、搜索引擎解析；在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，SEO（搜索引擎优化）；
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

数组方法pop() push() unshift() shift()

Push()尾部添加 pop()尾部删除
Unshift()头部添加 shift()头部删除

CSS画半圆

 width:100px;
    height: 100px;
    background: blue;
   border-radius: 0 0 0 100px;

image.png

CSS画三角形

width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right:100px solid transparent;
   border-bottom: 100px solid skyblue;