web前端开发面试遇到的题目

时间 2019-11-16

标签 web 前端开发面试遇到题目栏目 HTML 繁體版

原文原文链接

每次面试的题目都总结在一个小本本上，很不方便，有小伙伴推荐写博客，我就来总结一下近期遇到的面试题目。javascript

一、解释html语义化？css

回答：用正确的标签作正确的事情。html语义化让页面的内容结构化、结构更清晰、便于对浏览器、搜索引擎解析；html

　　　即便在没有css样式的状况下，也以一种文档格式显示，而且是容易阅读的；前端

　　　搜索引擎的爬虫也依赖于html标记来肯定上下文和各个关键字的权重，利于SEO;html5

　　使阅读代码的人对网站更容易对网站分块，便于阅读维护理解。java

二、块级元素与行内元素的区别？各自有哪些？nginx

回答：css规范规定，每一个元素都有一个display属性,肯定该元素的类型，如div的display默认值为“block”，则为“块级”元素；span默认display属性值为“inline”，是“行内”元素。web

　　　　区别：第一：块级元素会独占一行，其宽度自动填充父元素宽度；行内元素不会独占一行，相邻的行内元素会排列在一行里，直到一行拍不下，才会换行。面试

　　　　　　第二：块级元素能够设置width、height，行内元素设置无效。（块级元素即便设置了width宽度，也是独占一行）。ajax

　　　　　　第三：块级元素能够设置margin、padding，行内元素水平方向有效，竖直方向无效。（例如：margin-left,margin-right、padding-left、padding-right有效）。

　　　块级元素：div、ul、li、ol、dl、dt、dd、h一、h二、h三、h4...p、table form fieldset dir-目录列表 menu

　　　　行内元素：a b span img strong select label sub sup textarea input

　　　　空元素：br hr img input link meta

三、DOCTYPE的做用？标准模式和兼容模式各有什么区别？为何html5只须要写<!doctype html>?

回答：（1）、<!doctype>声明位于html文档中的第一行，处于<html>标签以前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或者格式不正确会致使文档以兼容模式呈现。

　　　（2）、标准模式的排版和js运做模式都是以该浏览器支持的最高标准运行；在兼容模式下，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点没法工做。

　　（3）、HTML不基于SGML，所以不须要对DTD进行引用，可是须要doctype来规范浏览器的行为（让浏览器按照他们应该的方式来运行）；

　　　　　　而html4.01基于SGML，因此须要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

四、link和@import的区别？

回答：（1）、link属于xhtml标签，除了加载css以外，还能用于定义rss,定义rel链接属性等做用；而@import是css提供的，只能用于加载css;

　　　（2）、页面被加载时，link会同时被加载；而@import引用的css会等到页面被加载完后再加载。　　　　

　　　（3）、@import是css2.1提出的，只有在IE5以上才能被识别，而link是xhtml标签，无兼容问题。

五、HTML5有哪些新特性？移除了哪些元素？如何处理html5新标签的浏览器兼容问题？如何区分html和html5?

回答：（1）、h5不是SGML的子集，主要是关于图像、位置、存储、多任务等功能的增长。

　　　　　　　绘画canvas；用于媒介回放的video和audio元素；语义化更好的内容元素：article、footer、header、nav、section；本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失；sessionStorage的数据在浏览器关闭后自动删除；表单控件增添calendar、date、time、email、url、search;新的技术Webworker,Websocket,Geolocation。

　　　（2）、移除的元素：纯表现的元素：basefont\big\center\font\s\u;对可用性产生负面影响的元素：frame\frameset\noframes;

　　　（3）、处理和html5新标签的浏览器兼容问题：

　　　　　　当在页面中使用html5新标签时，可能获得三种不一样的状况：

　　　　　　　　1>结果1：新标签被当作错误处理而且忽略，在DOM构建时会看成这个标签不存在；

　　　　　　　　2>结果2：新标签看成错误处理，并在DOM构建时，这个新标签会被构形成行内元素；

　　　　　　　　3>结果3：新标签被识别为html5标签，而后用DOM节点对其进行替换。

　　　　　　不能识别html5标签而不能使用，解决办法以下：

　　　　　　　　1>方法1：实现标签被识别

　　　　　　　　　经过document.creatElement(tagname)方法让浏览器识别新标签，浏览器支持标签后，还能够为新标签增添css样式。

　　　　　　　　2>方法2：javascript解决方案

　　　　　　　　 a)使用html5shim:

　　　　　　　　　　在head中调用一下代码：(也能够下载到本身的网站上进行调用，可是必须在head中)

                 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

　　　　　　　　 b)使用kill IE6

　　　　　　　　　　在</body>以前调用如下代码：　　　　　　

              <script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.zh_CN.pack.js"></script>

　　　（4）、区分html和html5:doctype声明、新增的结构元素|功能元素。

六、css选择符？优先级算法？哪些属性能够继承？

回答：（1）、id选择器；（2）、类选择器；（3）、标签选择器；（4）、相邻选择器（h1+p）;（5）、子选择器（ul>li）;（6）、后代选择器（li a）；（7）、通配符选择器（*）；（8）、属性选择器（a[rel="external"]）;（9）、伪类选择器（a:hover）;

　　　　可继承的属性：font-size/font-family/color/UL LI Dl DD DT;

　　　　不可继承的样式：border/margin/padding/height/width/display/position/float/left...;

　　　　优先级：！important>id>class>tag>*; !important比内联优先级高；内联样式表（标签内部）>嵌入样式表（当前文件中）>外部样式表（外部文件中）

七、描述cookies,sessionStorage,localStorage的区别？

回答：（1）、cookie是网站用于标识用户的身份而储存在用户本地终端（client side）上的数据（一般通过加密）；cookie数据始终在同源的http中携带（即便不须要），即会在浏览器和服务器间来回传递；（2）、sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

　　　（3）、存储大小：cookie数据大小不能超过4k;sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，能够达到5M或更大。

　　　（4）、有效时间：localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；

　　　　　　　　　　　sessionStorage数据在当前浏览器关闭后删除；

　　　　　　　　　　　cookie 设置的cookie过时时间以前一直有效，即便窗口或者浏览器关闭。

八、javascript有几种数据类型？划一下他们的内存图？

回答：栈:原始数据类型（number、string、Boolean、null、undefined）;

　　　堆：引用数据类型（对象、数组、和函数）；

　　　两种类型的区别：存储位置不一样：原始数据类型存储在栈中的简单数据段，占据空间小，大小固定，属于被频繁使用数据，因此放入栈中存储；

　　　　　　　　　　　引用数据类型存储在堆中的对象，占据空间大，大小不固定。若是存储在栈中将会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中得到实体。

九、href和src的区别？

回答：(1)、href表示超文本引用，用于创建当前元素和文档之间的连接。经常使用的有link、a上使用，当前文档和引用资源之间确立联系，并行下载资源。

　　 (2)、src是sourse的缩写，src指向的文档会嵌入到文档中当前标签所在的位置。主要是引入，经常使用与img,script等元素上，替换当前元素，当浏览器解析该元素时，会暂停其余资源的下载和处理，直到完毕。

十、javascript中call()和apply()方法的区别？

回答：ECMAScript规范给全部函数都定义了这两个方法call()和apply()。

call()方法定义：调用一个对象的一个方法，以另外一个对象替换当前对象。

apply()方法定义：应用某一对象的一个方法，用另外一个对象替换当前对象。

二者的区别在与参数：call()和apply()的第一个参数都是要调用的函数的对象，call()的剩余参数是传递给要调用的函数的值，而apply()只有两个参数，第一个是对象，第二个是数组，这个数组就是该函数的参数。

十一、javascript原型？原型链？以及如何实现继承？

回答：每一个对象都会在内部初始化一个属性，就是prototype（原型），当咱们访问一个对象的属性时，若是这个对象内部不存在这个属性，那么他就会去prototype里面找这个属性，这个prototype又会有本身的prototype，因而就这样一直找下去，就是原型链的概念。

如何实现继承：

1》构造继承：好比：如今有一个”动物“对象的构造函数

　function Animal(){
　　　　this.species = "动物";
　　}

还有一个”猫“对象的构造函数

　　function Cat(name,color){
　　　　this.name = name;
　　　　this.color = color;
　　}

”猫“继承”动物“

构造函数绑定：使用call()或者apply()方法，将父对象的构造函数绑定在子对象上，即在子对象构造函数中加一行：

　function Cat(name,color){
　　　　Animal.apply(this, arguments);
　　　　this.name = name;
　　　　this.color = color;
　　}
　　var cat1 = new Cat("大毛","黄色");
　　alert(cat1.species); // 动物

2》原型继承：若是”猫“的prototype对象，指向一个animal的实例，那么全部猫的实例就能够继承animal了。

　Cat.prototype = new Animal();
　　Cat.prototype.constructor = Cat;
　　var cat1 = new Cat("大毛","黄色");
　　alert(cat1.species); // 动物

3》实例继承：

4》拷贝继承：

原型prototype机制或apply和call方法去实现比较简单，建议使用构造方式和原型混合方式。

    function Parent(){
         this.name = 'wang';
     }

     function Child(){
         this.age = 28;
     }
     Child.prototype = new Parent();//继承了Parent，经过原型

     var demo = new Child();
     alert(demo.age);
     alert(demo.name);//获得被继承的属性

十二、前端性能优化的方法？

回答：（1）、当须要设置的样式不少时设置className而不是直接操做style。

　　　（2）、避免在页面的主题布局中使用table，table要等其中的内容彻底下载以后才会显示出来，显示比div+css布局慢。

　　　（3）、用innerHTML代替DOM操做，减小DOM操做次数，优化javascript性能。

　　　（4）、减小http请求次数：CSS Sprites，JS、CSS源码压缩，图片大小控制合适；网页GZIP压缩，CDN托管，data缓存，图片服务器。

　　　（5）、图片预加载，将样式表放在顶部，将脚本放在底部，加上时间戳。

　　　（6）、前端模板 JS+数据，减小因为html标签致使的贷款浪费，前端用变量保存AJAX请求结果，每次操做本地数据，减小请求次数。

　　　（7）、少用全局变量，缓存DOM节点查找的结果。减小IO（输入/输出）读取操做。

　　　（8）、避免使用CSS Expression(css 表达式)又称动态属性（Dynamic properties）。

　　　（9）、减小DOM操做；部署前，图片压缩、代码压缩；优化js代码结构，减小冗余代码；减小http请求，合理设置http缓存；使用内容分发cdn加速；静态资源缓存；图片延迟加载；

1三、介绍一下标准的CSS的盒子模型？低版本的IE的盒子模型有什么不一样？

回答：（1）、有两种：IE盒子模型、w3c盒子模型；（2）、盒模型：content(内容)、padding（内边距）、margin（外边距）、 border（边框）；（3）：区别：IE的content把padding和border计算了进去。

1四、如何居中div?

回答：（1）、水平居中：给DIV设置一个宽度，而后添加margin:0 auto属性。

 div{
     width:200px;
     margin:0 auto;
  }

（2）、让绝对定位的div居中：

div {
     position: absolute;
     width: 300px;
     height: 300px;
     margin: auto;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     background-color: pink;    /* 方便看效果 */
 }

（3）、水平垂直居中一：

 肯定容器的宽高 宽500 高 300 的层
 设置层的外边距

 div {
     position: relative;        /* 相对定位或绝对定位都可 */
     width:500px;
     height:300px;
     top: 50%;
     left: 50%;
     margin: -150px 0 0 -250px;         /* 外边距为自身宽高的一半 */
     background-color: pink;         /* 方便看效果 */

  }

（4）、水平垂直居中二：

 未知容器的宽高，利用 `transform` 属性

 div {
     position: absolute;        /* 相对定位或绝对定位都可 */
     width:500px;
     height:300px;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     background-color: pink;         /* 方便看效果 */

 }

（5）、水平垂直居中三：

 利用 flex 布局
 实际使用时应考虑兼容性

 .container {
     display: flex;
     align-items: center;         /* 垂直居中 */
     justify-content: center;    /* 水平居中 */

 }
 .container div {
     width: 100px;
     height: 100px;
     background-color: pink;        /* 方便看效果 */
 }

1五、position的值定位原点是？

回答：（1）、absolute：生成绝对定位的元素，相对于值不为static的第一个父元素进行定位。

　　　　（2）、relative：生成相对定位的元素，相对于元素正常位置进行定位。

　　　　（3）、fixed（老IE不支持）：生成绝对定位的元素，相对于浏览器窗口进行定位。

　　　　（4）、static：默认值，没有定位，元素出如今正常的流中。

　　　　（5）、inherit:规定从父元素继承position的值。

16：清除浮动的几种方式？为何要清除浮动呢？

回答：（1）、添加新的元素，应用clear:both;（额外标签法）

.clear{clear:both; height: 0; line-height: 0; font-size: 0}

　　　　（2）、父级div定义overflow:auto;

　　　　（3）、使用：after方法，做用与浮动元素的父元素。（伪元素）

　.clearfix:after{

　　　　　　content:"";//设置内容为空

　　　　　　height:0;//高度为0

　　　　　　line-height:0;//行高为0

　　　　　　display:block;//将文本转为块级元素

　　　　　　visibility:hidden;//将元素隐藏

　　　　　　clear:both//清除浮动

　　　　　}

　　　　.clearfix{

　　　　　　zoom:1;为了兼容IE(触发IE的haslayout属性) 　　　
　}

　　　　（4）、使用双伪元素

.clearfix:before,.clearfix:after {

                  content: "";

                  display: block;

                  clear: both;

            }

            .clearfix {

                  zoom: 1;

            }

缘由：若是一个盒子中有一个子盒子，而且父盒子没有设置高，子盒子在父盒子中设置了浮动，那么未来父盒子的高度就是0，下面的元素就会自动部位。（因此能够给父级DIV定义height；也能够父级DIV一块儿浮动）。

（当设置了zoom的值以后，所设置的元素就会就会扩大或者缩小，高度宽度就会从新计算了，这里一旦改变zoom值时其实也会发生从新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。）

1七、css定义的权重？

回答：权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下所示：（ps:若是权重相同，则最后定义的样式会起做用，可是要避免这样的状况）

/*权重为1*/
  div{
  }
  /*权重为10*/
  .class1{
  }
  /*权重为100*/
  #id1{
  }
  /*权重为100+1=101*/
  #id1 div{
  }
  /*权重为10+1=11*/
  .class1 div{
  }
  /*权重为10+10+1=21*/
  .class1 .class2 div{
  }

1八、javascript做用域和闭包？

回答：变量做用域：包括全局变量和局部变量（函数内部能够直接读取全局变量&函数外部天然不能读取函数内部的局部变量）。

（1）、函数做用域：函数的局部变量仅对函数内部可见。

（2）、词法做用域：函数的嵌套关系是定义的时候决定的，而不是调用的时候决定的，即嵌套关系是词法分析时肯定的，而非运行时决定。

（3）、全局做用域：在最外层定义的变量，全局对象的变量，任何地方隐匿定义的变量。

（4）、没有块级做用域。

闭包：就是可以读取其余函数内部变量的函数。也能够理解成”定义在一个函数内部的函数”；

闭包的用途就是一能够读取函数内部的变量，二就是让这些变量的值始终保存在内存中。（内存会消耗过大，因此不能滥用闭包）。

简单的闭包例子：

　function f1(){
　　　　var n=999;
　　　　function f2(){
　　　　　　alert(n); 
　　　　}
　　　　return f2;
　　}
　　var result=f1();
　　result(); // 999

1九、AJAX的步骤？

回答：（1）、建立ajax对象；（2）、发出HTTP请求；（3）、接收服务器传回的数据；（4）、更新网页数据。

20、一个页面上两个div左右铺满整个浏览器，要保证左边的div一直为100px，右边的div跟随浏览器大小变化（好比浏览器为500，右边就为400；若是浏览器为900，右边为800）？

回答：（1）、浮动布局：

<div id="left">left sidebar</div>
<div id="content">Main Content</div>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    #left{
        float: left;
        width: 220px;
        background-color: green;
    }
    #content{
        background-color: orange;
        margin-left: 220px;
    }
</style>

2一、一个页面从输入URL到页面加载显示完成，这个过程发生了什么？（流程说的越详细越好）

回答：输入地址

（1）、浏览器查找域名的IP地址，这一步包括DNS具体的查找过程（包括：浏览器缓存-》系统缓存-》路由器缓存...）（2）、浏览器向web服务器发送一个HTTP请求；（3）、服务器的永久重定向响应（从http://example.com到http://www.example.com）；（5）、浏览器跟踪重定向地址；（6）、服务器处理请求；（7）、服务器返回一个HTTP响应；（8）、浏览器显示HTML；（9）、浏览器发送请求获取嵌入在HTML中的资源（如图片、音频、视频、css、js等等）；（10）、浏览器发送异步请求。

2二、JS跨域请求的方式，能写几种写几种?

回答：（1）、经过jsonp跨域；

（2）、经过修改document.domain来跨子域；

（3）、使用window.name来进行跨域；

（4）、使用HTML5新引进的window.postMessage方法来进行跨域（ie6 7不支持）；

（5）、CORS须要服务器设置header:Access-Control-Allow-Origin；

（6）、nginx反向代理这个方法能够不用目标服务器配合，不过须要搭建一个中转nginx服务器，用于转发请求。