可借鉴的好知识前端攻城狮前端学习

常见的前端面试题 [ 精 ]

2018-02-27  本文已影响30129人  liuuuuuu

前言

  对于一些经典的面试题和容易忘记的一些概念，有时候实在让人头痛，最近看到了一篇文章，所以我在这篇文章的基础上重新排版优化，争取让大家看的一目了然，也算提高一些看官们的用户体验了~

$HTML， HTTP，web综合问题

前端需要注意哪些SEO

<img> 中的 title 和 alt 有什么区别？

HTTP的几种请求方法用途

编号 方法 描述
1 GET 发送一个请求来取得服务器上的某一资源
2 POST 向URL指定的资源提交数据或附加新的数据
3 PUT 跟POST方法很像，也是想服务器提交数据。但是，它们之间有不同。PUT指定了资源在服务器上的位置，而POST没有
4 HEAD 只请求页面的首部
5 DELETE 删除服务器上的某资源
6 OPTIONS 它用于获取当前URL所支持的方法。如果请求成功，会有一个Allow的头包含类似“GET,POST”这样的信息
7 TRACE TRACE方法被用于激发一个远程的，应用层的请求消息回路
8 CONNECT 把请求连接转换到透明的TCP/IP通道

从浏览器地址栏输入url到显示页面的步骤

如何进行网站性能优化

content方面
Server方面
Cookie方面
css方面
Javascript方面
图片方面

HTTP状态码及其含义

1XX：信息状态码
2XX：成功状态码
3XX：重定向
4XX：客户端错误
5XX: 服务器错误

语义化的理解

介绍一下你对浏览器内核的理解？

  主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎
  渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
  JS引擎则：解析和执行javascript来实现网页的动态效果
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

html5有哪些新特性、移除了那些元素？

新特性

移除元素

支持HTML5新标签

HTML5的离线储存怎么使用，工作原理能不能解释一下？

原理：
  HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示

如何使用：

CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html

浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？

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

存储大小：
有期时间：

iframe有那些缺点？

WEB标准以及W3C标准是什么?

  标签闭合、标签小写、不乱嵌套、使用外链css和js、结构行为表现的分离

xhtml和html有什么区别?

  一个是功能上的差别，主要是XHTML可兼容各大浏览器、手机以及PDA，并且浏览器也能快速正确地编译网页。
另外是书写习惯的差别，XHTML 元素必须被正确地嵌套，闭合，区分大小写，文档必须拥有根元素。

Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素和块级元素有什么区别？

HTML全局属性(global attribute)有哪些

Canvas和SVG有什么区别？

HTML5 为什么只需要写 <!DOCTYPE HTML>？

如何在页面上实现一个圆形的可点击区域？

网页验证码是干嘛的，是为了解决什么安全问题?

$CSS部分

css sprite是什么,有什么优缺点

概念：将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案。

优点：

缺点：

display: none;与visibility: hidden;的区别?

联系：它们都能让元素不可见

区别：

link与@import的区别

什么是FOUC?如何避免?

如何创建块级格式化上下文(block formatting context),BFC有什么用?

创建规则：

作用：

display,float,position的关系?

为什么要初始化CSS样式?

css3有哪些新特性?

CSS3新增伪类有那些？

display有哪些值？说明他们的作用?

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

CSS优先级算法如何计算？

对BFC规范的理解？

它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。

position的值， relative和absolute定位原点是?

display:inline-block 什么时候不会显示间隙？(携程)

PNG,GIF,JPG的区别及如何选?

GIF

JPEG

PNG

行内元素float:left后是否变为块级元素？

  浮动后，行内元素不会成为块状元素，但是可以设置宽高。行内元素要想变成块状元素，占一行，直接设置display:block;。但如果元素设置了浮动后再设置display:block;那就不会占一行。

在网页中的应该使用奇数还是偶数的字体？为什么呢？

  偶数字号相对更容易和 web 设计的其他部分构成比例关系。

::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用?

如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）

  多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。

CSS合并方法?

  避免使用@import引入多个css文件，可以使用CSS工具将CSS合并为一个CSS文件，例如使用Sass\Compass等。

CSS不同选择器的权重(CSS层叠的规则)?

列出你所知道可以改变页面布局的属性?

position、display、float、width、height、margin、padding、top、left、right

CSS在性能优化方面的实践?

CSS3动画（简单动画的实现，如旋转等）?

base64的原理及优缺点?

$JavaScript

闭包

闭包的特性：
说说你对闭包的理解：
使用闭包的注意点：

说说你对作用域链的理解?

JavaScript原型，原型链 ? 有什么特点？

特点：

请解释什么是事件代理?

Javascript如何实现继承？

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);//得到被继承的属性
 }

谈谈This对象的理解?

事件模型

W3C中定义事件的发生经历三个阶段：捕获阶段（capturing）、目标阶段（targetin）、冒泡阶段（bubbling）

new操作符具体干了什么呢?

Ajax原理?

// 1. 创建连接
   var xhr = null;
   xhr = new XMLHttpRequest()
   // 2. 连接服务器
   xhr.open('get', url, true)
   // 3. 发送请求
   xhr.send(null);
   // 4. 接受请求
   xhr.onreadystatechange = function(){
       if(xhr.readyState == 4){
           if(xhr.status == 200){
               success(xhr.responseText);
           } else { // fail
               fail && fail(xhr.status);
           }
       }
   }
ajax 有那些优缺点?

优点：

缺点：

如何解决跨域问题?

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

模块化开发怎么做？

var module1 = (function(){
　　　　var _count = 0;
　　　　var m1 = function(){
　　　　　　//...
　　　　};
　　　　var m2 = function(){
　　　　　　//...
　　　　};
　　　　return {
　　　　　　m1 : m1,
　　　　　　m2 : m2
　　　　};
　　})();

异步加载JS的方式有哪些？

那些操作会造成内存泄漏？

XML和JSON的区别？

数据体积方面
数据交互方面
数据描述方面
传输速度方面

谈谈你对webpack的看法?

WebPack 是一个模块打包工具，你可以使用WebPack管理你的模块依赖，并编绎输出模块们所需的静态文件。它能够很好地管理、打包Web开发中所用到的HTML、Javascript、CSS以及各种静态文件（图片、字体等），让开发过程更加高效。对于不同类型的资源，webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系，最后 生成了优化且合并后的静态资源。

说说你对AMD和Commonjs的理解?

常见web安全及防护原理?

sql注入原理

  就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令

总的来说有以下几点：

XSS原理及防范

  Xss(cross-site scripting)攻击指的是攻击者往Web页面里插入恶意html标签或者javascript代码。比如：攻击者在论坛中放一个看似安全的链接，骗取用户点击后，窃取cookie中的用户私密信息；或者攻击者在论坛中加一个恶意表单，当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户原本以为的信任站点。

XSS防范方法

  首先代码里对用户输入的地方和变量都需要仔细检查长度和对”<”,”>”,”;”,”’”等字符做过滤；其次任何内容写到页面之前都必须加以encode，避免不小心把html tag 弄出来。这一个层面做好，至少可以堵住超过一半的XSS攻击。

XSS与CSRF有什么区别吗？
CSRF的防御?

  服务端的CSRF方式方法很多样，但总的思想都是一致的，就是在客户端页面增加伪随机数
通过验证码的方法。

用过哪些设计模式？

工厂模式：

构造函数模式

为什么要有同源限制？

offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别?

javascript有哪些方法定义对象?

常见兼容性问题？

body,ul,li,ol,dl,dt,dd,form,input,h1,h2,h3,h4,h5,h6,p{
  margin:0;
  padding:0;
}

说说你对promise的了解?

var promise = new Promise(function(resolve, reject) {

        if (...) {  // succeed

            resolve(result);

        } else {   // fails

            reject(Error(errMessage));

        }
    });

你觉得jQuery源码有哪些写的好的地方?

*jquery源码封装在一个匿名函数的自执行环境中，有助于防止变量的全局污染，然后通过传入window对象参数，可以使window对象作为局部变量使用，好处是当jquery中访问window对象的时候，就不用将作用域链退回到顶层作用域了，从而可以更快的访问window对象。同样，传入undefined参数，可以缩短查找undefined时的作用域链

Node的应用场景?

特点：
优点：
缺点：

web开发中会话跟踪的方法有哪些?

说几条写JavaScript的基本规范？

JavaScript有几种类型的值？，你能画一下他们的内存图吗？

eval是做什么的？

null，undefined 的区别？

[“1”, “2”, “3”].map(parseInt) 答案是多少？

javascript 代码中的”use strict”;是什么意思 ? 使用它区别是什么？

  use strict是一种ECMAscript 5 添加的（严格）运行模式,这种模式使得 Javascript 在更严格的条件下运行,使JS编码更加规范化的模式,消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为。

JSON 的了解？

JSON字符串转换为JSON对象:

var obj =eval('('+ str +')');
var obj = str.parseJSON();
var obj = JSON.parse(str);

JSON对象转换为JSON字符串：

var last=obj.toJSONString();
var last=JSON.stringify(obj);

渐进增强和优雅降级?

defer和async?

attribute和property的区别是什么？

$编程题

如何判断一个对象是否为数组?

function isArray(arg) {
    if (typeof arg === 'object') {
        return Object.prototype.toString.call(arg) === '[object Array]';
    }
    return false;
}

bind的用法，以及如何实现bind的函数和需要注意的点?

  bind的作用与call和apply相同，区别是call和apply是立即调用函数，而bind是返回了一个函数，需要调用的时候再执行。
一个简单的bind函数实现如下

Function.prototype.bind = function(ctx) {
    var fn = this;
    return function() {
        fn.apply(ctx, arguments);
    };
};

最后序言

一路整理下来手都要废了，希望看到了对看官有帮助的东西，就不要吝啬一个点赞了~谢谢，容我休息一下。

说明

原创作品，禁止转载和伪原创，违者必究！

上一篇 下一篇

猜你喜欢

热点阅读