前端口试大全

2019年8月30日 162次阅读 来源: damonare

HTML面试题

1.XHTML和HTML有什么区分

  • HTML是一种基础的WEB网页设想言语，XHTML是一个基于XML的置标言语
    最主要的差别：

  • XHTML 元素必需被准确地嵌套。

  • XHTML 元素必需被封闭。

  • 标署名必需用小写字母。

  • XHTML 文档必需具有根元素。

2.前端页面有哪三层组成，离别是什么?作用是什么?

  • 结构层 Html 示意层 CSS 行动层 js;

3.你做的页面在哪些流览器测试过?这些浏览器的内核离别是什么?

  • Ie(Ie内核) 火狐（Gecko） 谷歌（webkit,Blink） opera(Presto),Safari(wbkit)

4.什么是语义化的HTML?

  • 直观的熟悉标签 关于搜索引擎的抓取有长处，用准确的标签做准确的事变！

  • html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎剖析；
    在没有款式CCS情况下也以一种文档花样显现，而且是轻易浏览的。搜索引擎的爬虫依赖于标记来肯定上下文和各个关键字的权重，利于 SEO。

  • 使浏览源代码的人对网站更轻易将网站分块，便于浏览保护明白。

5.HTML5 为何只须要写 !DOCTYPE HTML？

  • HTML5 不基于 SGML，因而不须要对DTD举行援用，然则须要doctype来范例浏览器的行动（让浏览器依据它们应当的体式格局来运转）；而HTML4.01基于SGML,所以须要对DTD举行援用，才示知浏览器文档所应用的文档范例。

6.Doctype作用？规范形式与兼容形式各有什么区分?

  • !DOCTYPE声明位于位于HTML文档中的第一行，处于html 标签之前。示知浏览器的剖析器用什么文档规范剖析这个文档。DOCTYPE不存在或花样不准确会致使文档以兼容形式显现。

  • 规范形式的排版 和JS运作形式都是以该浏览器支撑的最高规范运转。在兼容形式中，页面以宽松的向后兼容的体式格局显现,模仿老式浏览器的行动以防备站点没法事情。

7.html5有哪些新特征、移除了那些元素？怎样处置惩罚HTML5新标签的浏览器兼容题目？怎样辨别 HTML 和
HTML5？

  • HTML5 如今已不是 SGML 的子集，主假如关于图象，位置，存储，多任务等功用的增添。

  • 绘画 canvas

  • 用于序言回放的 video 和 audio 元素

  • 当地离线存储 localStorage 历久存储数据，浏览器封闭后数据不丧失；

  • sessionStorage 的数据在浏览器封闭后自动删除

  • 语意化更好的内容元素，比方 article、footer、header、nav、section

  • 表单控件，calendar、date、time、email、url、search

  • 新的手艺webworker, websockt, Geolocation
    移除的元素

  • 纯表现的元素：basefont，big，center，font, s，strike，tt，u；

  • 对可用性发生负面影响的元素：frame，frameset，noframes；
    支撑HTML5新标签：

  • IE8/IE7/IE6支撑经由过程document.createElement要领发生的标签，

  • 可以应用这一特征让这些浏览器支撑HTML5新标签，

  • 浏览器支撑新标签后，还须要增加标签默许的款式：

8.请形貌一下 cookies，sessionStorage 和 localStorage 的区分？

  • cookie在浏览器和效劳器间往返通报。 sessionStorage和localStorage不会

  • sessionStorage和localStorage的存储空间更大；

  • sessionStorage和localStorage有更多雄厚易用的接口；

  • sessionStorage和localStorage各自自力的存储空间；

9.怎样完成浏览器内多个标签页之间的通讯?

  • 挪用localstorge、cookies等当地存储体式格局

CSS面试题

1.扼要说一下CSS的元素分类

  • 块级元素：div,p,h1,form,ul,li;

  • 行内元素 : span>,a,label,input,img,strong,em;

2.CSS隐蔽元素的几种要领（最少说出三种）

  • Opacity:元素自身依旧占有它本身的位置并对网页的规划起作用。它也将相应用户交互;

  • Visibility:与 opacity 唯一差别的是它不会响应任何用户交互。另外，元素在读屏软件中也会被隐蔽;

  • Display:display 设为 none 任何对该元素直接打用户交互操纵都不可以见效。另外，读屏软件也不会读到元素的内容。这类体式格局发生的效果就像元素完全不存在;

  • Position:不会影响规划，能让元素坚持可以操纵;

  • Clip-path:clip-path 属性还没有在 IE 或许 Edge 下被完全支撑。假如要在你的 clip-path 中应用外部的 SVG 文件，浏览器支撑度还要低;

3.CSS清晰浮动的几种要领（最少两种）

  • 应用带clear属性的空元素

  • 应用CSS的overflow属性；

  • 应用CSS的:after伪元素；

  • 应用毗邻元素处置惩罚；

4.CSS居中（包含水平居中和垂直居中）

内联元素居中计划

水平居中设置：
1.行内元素

  • 设置 text-align:center；

2.Flex规划

  • 设置display:flex;justify-content:center;(灵活应用,支撑Chroime，Firefox，IE9+)

垂直居中设置：
1.父元素高度肯定的单行文本（内联元素）

  • 设置 height = line-height；

2.父元素高度肯定的多行文本（内联元素）

  • a:插进去 table （插进去要领和水平居中一样），然后设置 vertical-align:middle；

  • b:先设置 display:table-cell 再设置 vertical-align:middle；

块级元素居中计划

水平居中设置：
1.定宽块状元素

  • 设置 摆布 margin 值为 auto；

2.不定宽块状元素

  • a:在元素外到场 table 标签（完全的，包含 table、tbody、tr、td），该元素写在 td 内，然后设置 margin 的值为 auto；

  • b:给该元素设置 displa:inine 要领；

  • c:父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:50%；

垂直居中设置：

  • 应用position:absolute（fixed）,设置left、top、margin-left、margin-top的属性;

  • 应用position:fixed（absolute）属性，margin:auto这个必需不要忘记了;

  • 应用display:table-cell属性使内容垂直居中;

  • 应用css3的新属性transform:translate(x,y)属性;

  • 应用:before元素;

5.写出几种IE6 BUG的处理要领

  • 双边距BUG float引发的 应用display

  • 3像素题目 应用float引发的 应用dislpay:inline -3px

  • 超链接hover 点击后失效 应用准确的誊写递次 link visited hover active

  • Ie z-index题目 给父级增加position:relative

  • Png 通明 应用js代码 改

  • Min-height 最小高度 ！Important 处理’

  • select 在ie6下遮掩 应用iframe嵌套

  • 为何没有办法定义1px摆布的宽度容器（IE6默许的行高形成的，应用over:hidden,zoom:0.08 line-height:1px）

6.关于SASS或是Less的相识水平？喜好谁人？

  • 语法引见

7.Bootstrap相识水平

  • 特性，排版，插件的应用;

8.页面导入款式时，应用link和@import有什么区分？

  • link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel衔接属性等作用；而@import是CSS供应的，只能用于加载CSS;

  • 页面被加载的时，link会同时被加载，而@import援用的CSS会比及页面被加载完再加载;

  • import是CSS2.1 提出的，只在IE5以上才被辨认，而link是XHTML标签，无兼容题目;

9.引见一下CSS的盒子模子？

  • 有两种， IE 盒子模子、规范 W3C 盒子模子；IE的content部份包含了 border 和 pading;

  • 盒模子： 内容(content)、添补(padding)、边境(margin)、 边框(border).

10.CSS 选择符有哪些？哪些属性可以继续？优先级算法怎样盘算？ CSS3新增伪类有那些？

  • id选择器（ # myid）

  • 类选择器（.myclassname）

  • 标签选择器（div, h1, p）

  • 相邻选择器（h1 + p）

  • 子选择器（ul > li）

  • 子女选择器（li a）

  • 通配符选择器（ * ）

  • 属性选择器（a[rel = “external”]）

  • 伪类选择器（a: hover, li: nth – child）

  • 可继续的款式： font-size font-family color, UL LI DL DD DT;

  • 不可继续的款式：border padding margin width height ;

  • 优先级就近准绳，同权重情况下款式定义近来者为准;

  • 优先级为:
    !important > id > class > tag
    important 比 内联优先级高

11.CSS3有哪些新特征？

  • CSS3完成圆角（border-radius:8px），暗影（box-shadow:10px），
    对笔墨加殊效（text-shadow、），线性渐变（gradient），扭转（transform）

  • transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//扭转,缩放,定位,倾斜
    增添了更多的CSS选择器 多背景 rgba

JavaScript面试题

1.javascript的typeof返回哪些数据范例

  • Ｏbject number function boolean underfind;

2.例举3种强迫范例转换和2种隐式范例转换?

  • 强迫（parseInt,parseFloat,number）隐式（== – ===）；

3.数组要领pop() push() unshift() shift()

  • Push()尾部增加 pop()尾部删除

  • Unshift()头部增加 shift()头部删除

4.ajax要求的时刻get 和post体式格局的区分?

  • 一个在url背面 一个放在假造载体内里
    有大小限定

  • 安全题目
    应用差别 一个是论坛等只须要要求的，一个是相似修正暗码的;

5.call和apply的区分

  • Object.call(this,obj1,obj2,obj3)

  • Object.apply(this,arguments)

6.ajax要求时，怎样诠释json数据

  • 应用eval parse,鉴于安全性斟酌 应用parse更靠谱;

7.事宜托付是什么

  • 让应用事宜冒泡的道理，让本身的所触发的事宜，让他的父元素替代实行！

8.闭包是什么，有什么特征，对页面有什么影响?扼要引见你明白的闭包

  • 闭包就是可以读取其他函数内部变量的函数。

9.增加 删除 替代 插进去到某个接点的要领

obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild

10.说一下什么是javascript的同源战略？

  • 一段剧本只能读取来自于一致泉源的窗口和文档的属性，这里的一致泉源指的是主机名、协媾和端口号的组合

11.编写一个b继续a的要领;

function A(name){
    this.name = name;
    this.sayHello = function(){alert(this.name+” say Hello!”);};
}
function B(name,id){
    this.temp = A;
    this.temp(name);        //相当于new A();
    delete this.temp;       
     this.id = id;   
    this.checkId = function(ID){alert(this.id==ID)};
}

12.怎样阻挠事宜冒泡和默许事宜

function stopBubble(e)
{
   if (e && e.stopPropagation)
       e.stopPropagation()
   else
       window.event.cancelBubble=true
}
return false

13.下面顺序实行后弹出什么样的效果?

function fn() {
    this.a = 0;
    this.b = function() {
        alert(this.a)
    }
}
fn.prototype = {
    b: function() {
        this.a = 20;
        alert(this.a);
    },
    c: function() {
        this.a = 30;
        alert(this.a);
    }
}
var myfn = new fn();
myfn.b();
myfn.c();

14.谈谈This对象的明白。

this是js的一个关键字，跟着函数应用场所差别，this的值会发生变化。
然则有一个总准绳，那就是this指的是挪用函数的谁人对象。
this平常情况下：是全局对象Global。 作为要领挪用，那末this就是指这个对象

15.下面顺序的效果

function fun(n,o) {
  console.log(o)
  return {
    fun:function(m){
      return fun(m,n);
    }
  };
}
var a = fun(0);  a.fun(1);  a.fun(2);  a.fun(3);
var b = fun(0).fun(1).fun(2).fun(3);
var c = fun(0).fun(1);  c.fun(2);  c.fun(3);

//答案：
//a: undefined,0,0,0
//b: undefined,0,1,2
//c: undefined,0,1,1

16.下面顺序的输出效果

var name = 'World!';
(function () {
    if (typeof name === 'undefined') {
        var name = 'Jack';
        console.log('Goodbye ' + name);
    } else {
        console.log('Hello ' + name);
    }
})();

17.相识Node么？Node的应用场景都有哪些？

  • 高并发、谈天、及时音讯推送

18.引见下你最经常使用的一款框架

  • jquery,rn,angular等;

19.关于前端自动化构建东西有相识吗？简朴引见一下

  • Gulp,Grunt等；

20.引见一下你相识的后端言语以及掌握水平

别的

1.对Node的长处和瑕玷提出了本身的意见？

(长处）

 因为Node是基于事宜驱动和无壅塞的，所以异常适宜处置惩罚并发要求，
 因而构建在Node上的代理效劳器比拟其他手艺完成（如Ruby）的效劳器表现要好很多。
另外，与Node代理效劳器交互的客户端代码是由javascript言语编写的，
因而客户端和效劳器端都用一致种言语编写，这是异常美好的事变。

（瑕玷）

 Node是一个相对新的开源项目，所以不太稳固，它老是一直在变，
而且缺乏足够多的第三方库支撑。看起来，就像是Ruby/Rails昔时的模样。

2.你有哪些机能优化的要领？

（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指只管不应用文件体系作为缓存、削减读写文件次数等。顺序优化永久要优化慢的部份，换言语是没法“优化”的。

3.http状况码有那些？离别代表是什么意义？

100-199 用于指定客户端应响应的某些行动。
200-299 用于示意要求胜利。
300-399 用于已挪动的文件而且常被包含在定位头信息中指定新的地点信息。
400-499 用于指出客户端的毛病。400 1、语义有误，当前要求没法被效劳器明白。401 当前要求须要用户考证 403 效劳器已明白要求，然则拒绝实行它。
500-599 用于支撑效劳器毛病。 503 – 效劳不可用

4.一个页面从输入 URL 到页面加载显现完成，这个过程当中都发生了什么？（流程说的越细致越好）

  • 查找浏览器缓存

  • DNS剖析、查找该域名对应的IP地点、重定向（301）、发出第二个GET要求

  • 举行HTTP协定会话

  • 客户端发送报头(要求报头)

  • 文档最先下载

  • 文档树竖立，依据标记要求所需指定MIME范例的文件

  • 文件显现

  • 浏览器这边做的事情大抵分为以下几步：

  • 加载：依据要求的URL举行域名剖析，向效劳器提议要求，吸收文件（HTML、JS、CSS、图象等）。

  • 剖析：对加载到的资本（HTML、JS、CSS等）举行语法剖析，发起响应的内部数据结构（比方HTML的DOM树，JS的（对象）属性表，CSS的款式划定规矩等等）

5.你经常使用的开发东西是什么，为何？

  • Sublime,Atom,Nodepad++;

6.说说近来最盛行的一些东西吧？常去哪些网站？

  • Node.js、MVVM、React-native,Angular,Weex等

  • CSDN,Segmentfault,博客园,掘金,Stackoverflow等

7.引见下你的项目（假如有的话）？并说一下在做这个项目中应用的手艺以及碰到的困难是怎样处理的

    原文作者：damonare
    原文地址: https://segmentfault.com/a/1190000005947094
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞