前端面试笔记

时间 2019-11-30

原文原文链接

前端面试题目答案及总结

HTML和CSS

一、如设置div水平垂直居中？有多少种方式能够实现？css

一、水平垂直居中（一）定位和须要定位的元素的margin减去宽高的一半
 <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 300px;
            height: 300px;
            background:#e9dfc7; 
            border:1px solid red;
            position: relative;
        }
        img{
            width: 100px;
            height: 150px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -75px;
            margin-left: -50px;
        }
    </style>
<!--html -->
<body>
    <div class="box" >
        ![](2.jpg)
    </div>

二、定位和margin:auto;html

<style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 300px;
            height: 300px;
            background:#e9dfc7; 
            border:1px solid red;
            position: relative;
 
        }
        img{
            width: 100px;
            height: 100px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
<!--html -->
<body>
    <div class="box" >
        ![](3.jpg)
    </div>
</body>

三、绝对定位和transfrom前端

<style>
    *{
        padding: 0;
        margin: 0;
    }
    .box{
        width: 300px;
        height: 300px;
        background:#e9dfc7; 
        border:1px solid red;
        position: relative;
 
    }
    img{
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
</style>
<!--html -->
<body>
    <div class="box" >
        ![](4.jpg)
    </div>
</body>

二、 HTML5新增语义化如何理解？说一说有哪些标签？vue

1，去掉或者丢失样式的时候可以让页面呈现出清晰的结构
2，有利于SEO：和搜索引擎创建良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来肯定上下文和各个关键字的权重；
3，方便其余设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
4，便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，能够减小差别化。
 HTML5 如今已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增长。

拖拽释放(Drag and drop) API 
语义化更好的内容标签（header,nav,footer,aside,article,section）
音频、视频API(audio,video)
画布(Canvas) API
地理(Geolocation) API
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除
表单控件，calendar、date、time、email、url、search  
新的技术webworker, websocket, Geolocation
移除的元素
纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；
支持HTML5新标签：
IE8/IE7/IE6支持经过document.createElement方法产生的标签，
能够利用这一特性让这些浏览器支持HTML5新标签，
浏览器支持新标签后，还须要添加标签默认的样式：
固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

三、 CSS3和CSS有什么新增内容，能够讲一下吗？html5

CSS3实现圆角（border-radius），阴影（box-shadow），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
增长了更多的CSS选择器  多背景 rgba 
在CSS3中惟一引入的伪元素是::selection.
媒体查询，多栏布局
border-image

四、在一个div中，如何设置一个button在div的右上角，有什么方式能够实现es6

一、能够给button设置float：right；
二、父元素设置相对定位，子元素设置绝对定位，right设置为0、top：0；

五、请问你有写过0.5px的直线？web

六、 css设置一个动画，从左到右滚动用到什么属性？面试

七、前端常说的三层架构是指哪三层ajax

八、布局json

九、说说IE盒子和谷歌的区别

十、为何初始化css样式

由于浏览器的兼容问题，不一样浏览器对有些标签的默认值是不一样的，若是没对CSS初始化每每会出现浏览器之间的页面显示差别。

固然，初始化样式会对SEO有必定的影响，但鱼和熊掌不可兼得，但力求影响最小的状况下初始化。

*最简单的初始化方法就是： * {padding: 0; margin: 0;} （不建议）

    淘宝的样式初始化： 
    body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
    body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
    h1, h2, h3, h4, h5, h6{ font-size:100%; }
    address, cite, dfn, em, var { font-style:normal; }
    code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
    small{ font-size:12px; }
    ul, ol { list-style:none; }
    a { text-decoration:none; }
    a:hover { text-decoration:underline; }
    sup { vertical-align:text-top; }
    sub{ vertical-align:text-bottom; }
    legend { color:#000; }
    fieldset, img { border:0; }
    button, input, select, textarea { font-size:100%; }
    table { border-collapse:collapse; border-spacing:0; }

JS

一、 Settimeout和SetInterout的区别，哪个更安全？

二、 window.onload和document.ready的区别

三、 cookies和sessionstorage、session、localage的区别

四、 split和jion的区别？

五、字符串反转

六、同步和异步的理解

七、闭包的做用、弊端、使用的场景，简单的说一下

八、简单说一下继承，能够举例说明吗？

九、简单说一下事件冒泡，如何阻止事件冒泡？

十、 null和undefined的区别

undefined是一个表示"无"的原始值，转为数值时为 当声明的变量还未被初始化时，变量的默认值为null用来表示还没有存在的对象，经常使用来表示函数企图返回一个不存在的对象。

（1）变量被声明了，但没有赋值时，就等于undefined。 （2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。 （3）对象没有赋值的属性，该属性的值为undefined。 （4）函数没有返回值时，默认返回undefined。 

 （1）做为函数的参数，表示该函数的参数不是对象。 （2） 做为对象原型链的终点。 

new操做符具体干了什么呢?
   一、建立一个空对象，而且 this 变量引用该对象，同时还继承了该函数的原型。
   二、属性和方法被加入到 this 引用的对象中。
   三、新建立的对象由 this 所引用，而且最后隐式的返回 this 。

var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

十一、 js的数据类型

十二、是否作个懒加载。

1三、跨域

jsonp、 document.domain+iframe、window.name、window.postMessage、服务器上设置代理页面

1四、异步加载和延时加载

1.异步加载的方案： 动态插入script标签
2.经过ajax去获取js代码，而后经过eval执行
3.script标签上添加defer或者async属性
4.建立并插入iframe，让它异步执行js
5.延迟加载：有些 js 代码并非页面初始化的时候就马上须要的，而稍后的某些状况才须要的。

框架

Vue

一、 vue的数据绑定，实现原理

二、 vue父子组件及传值

三、路由传值，有什么方式

四、 vue的声明周期，简单说一下，dom是在哪一个生命周期完成渲染的

五、 vue导航钩子有哪几种

六、有使用过什么框架，简单说一下

其余的插件

一、 jQuery

二、 ajax

(1)建立XMLHttpRequest对象,也就是建立一个异步调用对象.

(2)建立一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.

(3)设置响应HTTP请求状态变化的函数.

(4)发送HTTP请求.

(5)获取异步调用返回的数据.

(6)使用JavaScript和DOM实现局部刷新.

三、 ajax的理解，及后台返回数据如何接收？执行一个删除事件，要如何实现

三、 ajax请求数据步骤是什么？传输的数据是用明文仍是暗文？

四、 es6有了解吗？日常有使用到哪些呢？是否能够举例说明。

其余问题

一、是否有看过源码 jQuery
二、HTTP代码

100  Continue  继续，通常在发送post请求时，已发送了http header以后服务端将返回此信息，表示确认，以后发送具体参数信息
200  OK   正常返回信息
201  Created  请求成功而且服务器建立了新的资源
202  Accepted  服务器已接受请求，但还没有处理
301  Moved Permanently  请求的网页已永久移动到新位置。
302 Found  临时性重定向。
303 See Other  临时性重定向，且老是使用 GET 请求新的 URI。
304  Not Modified  自从上次请求后，请求的网页未修改过。

400 Bad Request  服务器没法理解请求的格式，客户端不该当尝试再次使用相同的内容发起请求。
401 Unauthorized  请求未受权。
403 Forbidden  禁止访问。
404 Not Found  找不到如何与 URI 相匹配的资源。

500 Internal Server Error  最多见的服务器端错误。
503 Service Unavailable 服务器端暂时没法处理请求（多是过载或维护）。

参考地址：http://www.javashuo.com/article/p-dmngwevj-g.html