前端面试知识点集锦

2024年5月27日 157次阅读 来源: Erichain_Zain

个人总结的比较全面的前端面试知识点。主要是一些个人认为面试时容易考到以及平时需要注意的一些知识点。

本人只是对这些知识进行了一个大概的总结，还有一部分技术还没开始涉及，后期会持续添加。如果需要进行深入了解可以根据知识点查询相关的技术文章。

本文涵盖了以下各个方面的知识:

  • HTML, CSS, JS基础知识

  • 网站性能优化知识

  • 前端项目自动化构建相关知识

  • 算法相关知识

  • 网络与HTTP协议相关知识

  • 前端的安全相关知识

  • 插件编写相关知识

  • JS模块化编程相关知识

Github Repo：
https://github.com/Erichain/Front-End-Interview-Points

持续更新中。欢迎fork和star进行完善。

关于前端是什么，以及需要学习什么，移步这里：

Front-End Developer Handbook

HTML部分

docType

  • 混杂模式

  • 标准模式

  • 准标准模式

标签语义化

  • 去掉或者丢失样式的时候能够让页面呈现出清晰的结构

  • 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重

  • 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页

  • 便于团队开发和维护，语义化更具可读性，是下一步网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化

块级标签，行内标签

  • 块级：div, ul, li, ol, table, th, tbody, tfoot, tr, pre, fieldset, form, h1-6, p等

  • a, abbr, b, br, code, em, img, input, label, select, textarea, strong等

meta标签

  • 如何在不使用JS的情况下刷新页面(http-equiv=”refresh”, content=”time”)

  • 设置页面缓存

  • 移动端设置

  • etc.

HTML代码优化

  • 标签嵌套层级不要太深，标签尽量简洁化.如懒加载后将data属性去除

  • 大量图片的懒加载策略，以及一些元素利用ajax在onload后实行延迟加载

  • 对一些js的异步加载

搜索引擎优化SEO

CSS部分

浮动，清除浮动的方法和原理(4种方法)

  • 使用空标签设置clear: both;

  • 为父级元素设置overflow: hidden;(利用BFC的原理)

  • 使用伪元素，为要清除浮动的元素添加.clearfix类(推荐)

  • 使用min-height: contain-floats;(不推荐，兼容性不好)

CSS块级格式化上下文

  • 触发条件

    • position属性不为static或者relative

    • float属性不为none

    • 非块级的块级元素(inline-block, table-cell)

    • overflow不为visible

  • 特性

    • 内部的Box会在垂直方向，从顶部开始一个接一个地放置

    • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加

    • BFC的区域不会与float box叠加

    • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

    • 计算BFC的高度时，浮动元素也参与计算

  • 用处

    • 解决margin边距叠加问题。为元素单独创建一个BFC来防止外边距的折叠

    • 布局

    • 清除浮动。为包含浮动元素的container创建BFC来清除浮动

盒子模型(IE盒子模型的区别)

定位

  • 定位和浮动的区别

  • 什么时候使用定位，什么时候使用浮动

样式继承

  • 可继承的样式

    • font-size font-family color text-indent

z-index属性

IE浏览器的hack

  • 条件hack

    • <!--[if IE]><![endif]-->

  • 属性hack

    • _ IE6

    • *+IE7

    • +IE6/7

    • .IE8

  • 选择符hack

    • *IE7

    • _IE6

CSS sprite

  • 减少请求

布局模型

  • 双飞翼布局

  • 圣杯布局

CSS优先级

  • 行内样式 > 内联样式 > 外部样式，ID > Class > Element

  • 设置了!important的样式优先级更高

Flexbox

各个单位的区别(px, em, rem, 百分比)

居中

link和@import的区别

  • link属于XHTML标签，而@import是CSS提供的

  • 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载

  • @import只在IE5以上才能识别，而link是XHTML标签，无兼容问题

  • link方式的样式的权重 高于@import的权重

如何将div与图片设置等宽，inline-block元素之间的空隙如何解决

  • 设置父元素font-size为0，再对里面的文字单独设置font-size

  • 全兼容的样式解决方法

.finally-solve {
    letter-spacing: -4px; /*根据不同字体字号或许需要做一定的调整*/
    word-spacing: -4px;
    font-size: 0;
}
.finally-solve li {
    font-size: 16px;
    letter-spacing: normal;
    word-spacing: normal;
    display:inline-block;
    *display: inline;
    zoom:1;
}

CSS优化

  • 嵌套层级不要太深，一般三层最多

  • css解析从右向左，所以最右边的应该是相对少一点

  • html用了base64的img的话，并不会缓存起来，可以将这个base64的图片放在css文件里，css会缓存，图片就缓存起来了

  • 尽量不用后代元素选择器，最右边的一层不要是标签，尤其是像div这种非常常用的标签

  • 多使用css的继承，而不是每一次都书写时都全部重写一遍。写多个css属性时，能连在一起写的就连在一起写

预处理器

  • Sass

JS部分

严格模式

  • 'use strict'

  • 不能使用eval()

  • 抑制this的行为

  • 不允许读写eval和arguments的值

  • 不允许意外创建全局变量

变量

  • 使用var定义的全局变量不能使用delete删除

  • 无var创建的全局变量可以使用delete删除

  • 隐式类型转换

    • 数字与字符串相加，结果为字符串

    • 数字与字符串相减，结果为数字

    • 比较变量的是否相同时，要采用===，==会发生隐式类型转换

    • NaN与任何变量不相等

类型检测

  • typeof

  • instanceof

  • constructor

  • Object.prototype.toString.apply()

作用域

  • 全局作用域

  • 函数作用域

对象

  • hasOwnProperty, isPrototypeOf, propertyIsEnumerable

  • 配置属性(configurable, enumerable, writable, value)

  • 特性

    • 扩展: isExtensible, preventExtensions(是否可以添加新的属性)

    • 密封: isSealed, seal(是否可以删除属性，是否可以配置属性)

    • 冻结: isFrozen, freeze(所有属性是否可读可写)

  • 定义属性

    • defineProperty, defineProperties

数组

  • 数组的类型检测

  • 数组的方法

    • slice()

    • map()

    • every()

    • some()

    • filter()

函数

  • 柯里化

    • 概念：部分求值（Partial Evaluation），是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术

function currying( fn ) {
    var args = Array.prototype.slice.call(arguments, 1);
    return function () {
        var newArgs = args.concat(Array.prototype.slice.call(arguments));
        return fn.apply(null, newArgs);
    }
}

  • arguments对象

  • JS函数不存在重载，后定义的函数会覆盖先定义的函数

  • 函数调用模式

    • 方法调用

    • 函数调用

    • 构造器调用

    • apply调用

new操作符的原理

使用new关键字来创建实例的时候，原理如下：

  • 首先，在构造函数内部使用Object.create(constructor.prototype)创建一个对象继承自构造函数

  • 然后，将这个对象引用到this上

  • 最后，返回this

闭包

  • 概念

  • 作用

    • 创建匿名执行函数

    • 缓存变量，防止被垃圾回收

    • 实现函数的封装

  • 应用场景

    • 内部函数访问外部函数的变量

    • 使用闭包代替全局变量

    • 封装相关功能

    • 回调函数

    • 创建私有变量和公有变量

  • 特性

  • 经典例子：列表点击，弹出每一个的index

/* 错误做法 */
var elems = document.getElementById('links').getElementsByTagName('li');

for ( var i = 0; i < elems.length; i++ ) {
    elems[i].addEventListener('click', function ( event ) {
        event.preventDefault();
        alert(i);
    }, false);
}
/* 正确的做法，使用闭包 */
var elems = document.getElementById('links').getElementsByTagName('li');

for ( var i = 0; i < elems.length; i++ ) {
    (function ( index ) {
        elems[i].addEventListener('click', function ( event ) {
            event.preventDefault();
            alert(index);
        }, false);
    
    })( i );
}

this

  • 函数的this的值永远绑定在调用此函数的对象上

  • 可以使用apply，call或者bind改变this值的指向

对象创建的模式和方法及区别

  • 工厂模式

/* 缺点：无法检测对象的类型 */
var createPerson = function ( name, age, job ) {
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;

    return o;
};

var person1 = createPerson('Erichain', 21, 'Web');

  • 构造函数模式

/* 缺点：每个方法要在每个实例上重新创建一遍 */
var Person = function ( name, age, job ) {
    this.name = name;
    this.age = age;
    this.job = job;
}

var person1 = new Person('Erichain', 21, 'Web');

  • 原型模式

var Person = function () {};

Person.prototype = {
    constructor: Person, // 如果这个属性十分重要的话
    name: 'Erichain',
    age: 21,
    job: 'web'
};
var person1 = new Person();

  • 组合构造函数原型模式

  • 动态原型模式

var Person = function ( name, age, job ) {
    this.name = name;
    this.age = age;
    this.job = job;

    if ( typeof this.sayName !== 'function' ) {
        Person.prototype.sayName = function () {
            alert( this.name );
        }
    }
};

  • 寄生构造函数模式

    • 除了使用new来实例化外，与工厂模式没区别

    • 不能依赖instanceof来确定对象类型，一般不建议使用

  • 稳妥构造函数模式

原型和继承

  • 原型链

  • 借用构造函数

function Person( name ) {
    this.name = name;
}

function man() {
    // 继承自Person，可以选择是否传入参数
    Person.call(this, 'Erichain');
}

  • 组合继承

  • 原型式继承

  • 寄生式继承

  • 寄生组合式继承

  • new Object()和Object.create()的区别

    • Object.create创建的对象直接从他的第一个参数继承，而new Object所创建的对象是从对象的原型上继承

    • 使用Object.create，可以创建一个不继承于任何东西的对象，但是，如果设置someConstructor.prototype = null，那么，这个新创建的对象会继承自Object.prototype

回调函数

变量提升，函数声明提升

  • 函数声明优于变量声明

  • 函数声明会覆盖变量声明，但是不会覆盖变量赋值

IIFE(立即执行函数)

  • 在闭包中保存变量状态

  • 模块化

  • IIFE和自执行函数的区别

  • IIFE的几种表示方法

(function () {})();
(function () {}());

!function () { /* code */ } ();
~function () { /* code */ } ();
-function () { /* code */ } ();
+function () { /* code */ } ();

事件

  • 事件流

    • 事件捕获

    • 处于目标

    • 事件冒泡

  • 事件对象(IE的区别)

  • 跨浏览器事件处理函数

var EventUtil = {
    getEvent: function ( event ) {
        return event ? event : window.event;
    },
    getTarget: function ( event ) {
        return event.target || event.srcElement;
    },
    addHandler: function ( elem, type, handler ) {
        if ( elem.addEventListener ) {
            elem.addEventListener(type, handler, false);
        }
        else if ( elem.attachEvent ) {
            elem.attachEvent('on' + type, handler);
        }
        else {
            elem['on' + type] = handler;
        }
    },
    preventDefault: function ( event ) {
        if ( event.preventDefault ) {
            event.preventDefault();
        }
        else {
            event.returnValue = false;
        }
    },
    stopPropagation: function ( event ) {
        if ( event.stopPropagation ) {
            event.stopPropagation();
        }
        else {
            event.cancelable = true;
        }
    }
};

  • 事件广播

  • 事件委托

<ul id="links">
    <li id="link1">Link1</li>
    <li id="link2">Link2</li>
    <li id="link3">Link3</li>
</ul>
var links = document.getElementById('links');

// 使用之前定义的跨浏览器事件处理程序
EventUtil.addHandler(links, 'click', function ( event ) {
    var target = EventUtil.getTarget(event);
    event = EventUtil.getEvent(event);

    switch ( target.id ) {
        case 'link1':
            // do something
            break;
        case 'link2':
            // do something
            break;
        case 'link3':
            // do something
            break;
    }
});

  • 事件函数的参数(注意addEventListener()的最后一个参数，如果为false表示在冒泡阶段获取事件，如果为true，表示在事件捕获阶段获取事件)

call, apply, bind(手动实现)

  • call(obj, args), apply(obj, array)

  • call与apply支持低版本浏览器，bind只支持高版本浏览器

  • bind原生代码实现

if ( !Function.prototype.bind ) {
    Function.prototype.bind = function ( oThis ) {
        if ( typeof this !== 'function') {
            throw new Error('What is trying to be bound is not callable');
        }

        var aArgs = Array.prototype.slice.call(arguments, 1),
            fToBound = this,
            fNOP = function () {},
            fBound = function () {
                return fToBound.apply(
                    this instanceof fNOP ? this : oThis,
                    aArgs.concat(Array.prototype.slice.call(arguments))
                )
            };

        if ( this.prototype ) {
            fNOP.prototype = this.prototype;
        }

        fBound.prototype = new fNOP();
        return fBound;
    };
}

能力检测

BOM

  • window对象

  • location对象

  • screen对象

  • navigator对象

    • 检测插件navigator.plugins

    • 检测用户代理navigator.userAgent

  • history对象

promise

DOM 操作

  • 查找

    • document.getElementById

    • document.getElementsByTagName

    • document.getElementsByName

    • document.getElementsByClassName

    • document.querySelector

    • document.querySelectAll

  • 节点关系

    • element.childNodes

    • element.firstChild

    • element.lastChild

    • element.previousSibling

    • element.nextSibling

    • element.parentNode

    • element.appendChild()

    • element.insertBefore()

    • element.removeChild()

    • element.replaceChild()

  • 属性操作

    • element.getAttribute()

    • element.setAttribute()

  • 样式操作

    • element.style[PROPERTY_NAME]

    • element.classList

    • element.classList.add

    • element.classList.remove

    • element.classList.contains

    • element.classList.toggle

  • 元素遍历

性能优化

垃圾回收

  • 引用计数

/* 出现循环引用的例子 */
function () {
    var objectA = {},
        objectB = {};

    objectA.someOtherObject = objectB;
    objectB.anotherObject = objectA;
}

  • 标记清除

内存泄漏

  • setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏

  • 循环引用

优雅降级和渐进增强

  • 优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效

  • 渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用

JSON

  • JSON.stringify() json序列化为字符串

  • JSON.parse() 将类JSON的字符串转化为JSON对象

XMLHttpRequest对象

  • 一段比较完整的使用原生Javascript实现ajax请求方法

function createRequestObject() {
    if ( window.XMLHttpRequest ) {
        return new XMLHttpRequest();
    }

    // 针对IE
    else if ( window.ActiveXObject ) {
        return new ActiveXObject('Microsoft.XMLHTTP');
    }
}

// 请求的回调函数
function requestCallBack() {
    if ( request.readyState === 4 && request.status === 200 ) {
        console.log(request.responseText);
    }
}

var request = createRequestObject();

request.onreadystatechange = requestCallBack;
// open函数的三个参数分别是请求的方法, 请求的地址, 是否异步(true表示异步)
request.open('POST', url, true);
request.send(null);

使用Javascript计算两个日期的时间差

性能测试工具

代码审查工具

  • JSHint

  • JSLint

  • ESLint(针对ECMAScript 2015)

代码压缩

  • JSMin

  • YUI Compressor

  • Gzip

Javascript原生函数使用

Array.prototype.slice.call()原理

RESTful

浏览器部分

各个浏览器内核

  • IE: Trident

  • Chrome: Webkit, Blink(now)

  • Firefox: Gecko

  • Opera: Presto

sessionStorage，cookie，localStorage

  • cookie 由服务器生成，可设置失效时间。如果是浏览器端生成的cookie，则在浏览器关闭之后失效；而localStorage除非被清除，否则永久保存，sessionStorage则在关闭浏览器或者页面之后清除

  • cookie的大小为4k左右，localStorage和sessionStorage的大小一般为5MB

  • 与服务器痛心的时候，cookie每次都会携带在http头中，但是其他两个不参与服务器通信

  • cookie中最好不要放置任何的明文的东西，其他两个的数据如果提交到服务器一定要校验

浏览器的多个标签页之间如何通信

关于浏览器缓存

前端安全

  • 防止XSS(跨站点脚本)攻击

  • 防止CSRF(跨站点伪造请求攻击)

  • 防止跨iframe攻击

自动化

npm与bower的区别

gulp流与管道的概念

  • Unix流

  • 管道

    • 管道是一个固定大小的缓冲区

    • 从管道读数据是一次性操作，数据一旦被读，它就从管道中被抛弃，释放空间以便写更多的数据

    • 可以把一个进程的标准输出流与另一个进程的标准输入流连接起来

打包后静态资源路径的修改

gulp和grunt的区别

测试工具

  • Mocha

  • Karma

  • Jasmine

网络知识部分

Ajax

同源策略

  • 同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议。 指一段脚本只能读取来自同一来源的窗口和文档的属性

跨域处理(方法和区别)

  • JSONP

  • document.domain

  • window.name

  • HTML5的window.postMessage和window.onmessage

HTTP基本知识

  • 前端进阶–让你升级的网络知识

  • 三次握手

    • 客户端发起连接试探

    • 服务端接收到试探请求，向客户端发送确认消息

    • 客户端得到服务端的确认消息之后，再次向服务端发送确认消息

  • 一次完整的http请求是怎么样的

    • 域名解析

    • TCP三次握手

    • 发起http请求

    • 服务器端响应http请求，客户端得到html代码

    • 浏览器解析html代码，并请求html代码中的资源

    • 浏览器对页面进行渲染呈现给用户

框架相关知识

jQuery

Bootstrap，插件原理

  • 栅格布局实现原理

  • .img-responsive实现原理

  • 内联表单实现原理

  • Bootstrap组件实现原理

AngularJS

  • 双向绑定

    • $digest循环

    • dirty checking

    • $watch

  • MVC

  • 独立作用域

  • 依赖注入

  • 循环监听

  • ng-if与ng-hide/show的区别

    • ng-if为true的时候节点才会存在于DOM中

    • ng-show/hide只是控制节点的显示和隐藏

  • factory，service与provider的区别和关系

    • 使用factory创建的服务，是一个对象，然后，将方法和属性定义在这个对象上，在返回这个对象，就可以供外部controller调用了

    • 使用service创建的服务，是使用new进行实例化的，所以，方法和属性要定义在this上，并且这个服务会自动返回this

    • 使用provider创建的服务，是唯一可以注入到config()函数的服务，可以用来提供模块化的配置。并且，定义在this上的属性和方法，在config函数里才可以访问，从this.$get()函数里返回的属性和方法，才能被控制器所访问

  • ng-click是否可以使用原生函数

    • 不可以，因为对应的方法不存在于其控制器中，除非在控制器中声明

  • ng-repeat数组中有相同元素的解决办法

    • 可以添加track by $index

  • $emit，$broadcast和$on

    • $emit由子级向父级广播，$broadcast由父级向子级广播

  • controllerAs与$scope的区别

  • AngularJS的缺点

    • 强约束，学习成本高

    • 不利于SEO

    • 性能问题

      • 减少监控项

      • 主动设置索引

      • 降低渲染的数据数量

      • 数据扁平化

算法

数组降维

数组去重

  • 最简单的方法

function removeDuplicate( arr ) {
    var len = arr.length,
        temp = [];

    for ( var i = 0; i < len; i+=1 ) {
        if ( temp.indexOf(arr[i]) === -1 ) {
            temp.push(arr[i]);
        }
    }
    return temp;
}

对象深度复制

function clone( Obj ) {   
        var buf;   
        if ( Obj instanceof Array ) {   
            buf = [];  //创建一个空的数组 
            var i = Obj.length;   
            while ( i-- ) {   
                buf[i] = clone(Obj[i]);   
            }   
            return buf;   
        }
        else if ( Obj instanceof Object ) {   
            buf = {};  //创建一个空对象 
            for ( var k in Obj ) {  //为这个对象添加新的属性 
                buf[k] = clone(Obj[k]);   
            }   
            return buf;   
        }
        else {   
            return Obj;   
        }   
    }

各个类型的复制

function clone( obj ) {
    var dest;
    
    switch( typeof obj ) {
        case 'undefined':
            break;
            
        case 'number':
            dest = +obj;
            break;
            
        case 'string':
            dest = obj + '';
            break;
            
        case 'boolean':
            dest = obj;
            break;
        
        case 'object':
            if ( obj instanceof Array ) {
                dest = [];

                for ( var i = 0; i < obj.length; i++ ) {
                    dest[i] = obj[i];
                }
            }
            else {
                dest = {};
                for ( var i in obj ) {
                    dest[i] = obj[i];
                }
            }
        
        default:
            break;
    }

    return dest;
}

排序

  • 快速排序

function quickSort( arr ) {
    var left = [],
        right = [],
        len = arr.length,
        breakPoint = arr[0];

    if ( len === 1 || len === 0 ) {
        return arr;
    }

    for ( var i = 1; i < len; i++ ) {
        if ( arr[i] < breakPoint ) {
            left.push(arr[i]);
        }
        else {
            right.push(arr[i]);
        }
    }

    return quickSort(left).concat(breakPoint, quickSort(right));
}

  • 冒泡排序

function bubbleSort( arr ) {
    var len = arr.length,
        temp;

    for ( var i = 0; i < len - 1; i ++ ) {
        for ( var j = 0; j < len - 1 - i; j++ ) {
            if ( arr[j] > arr[j+1] ) {
                temp = arr[j];
                arr[j] = arr[j+1];
                arr[j+1] = temp;
            }
        }
    }

    return arr;
}

  • 插入排序

function insertSort( arr ) {
    var len = arr.length,
        temp;

    for ( var i = 1; i < len; i++ ) {
        var j;
        temp = arr[i];
        j = i;

        while ( j > 0 && arr[j-1] > temp ) {
            arr[j] = arr[j-1];
            j--;
        }
        arr[j] = temp;
    }
    return arr;
}

去除首尾空格

function removePlace( str ) {
    var reg = /(^s*)|(s*)$/;

    if ( str && typeof str === 'string' ) {
        return str.replace(reg, '');
    }
}

统计字符数量

function charCount( str ) {
    var obj = {},
        len = str.length,
        i = 0;

    for ( ; i < len; i++ ) {
        var val = str.charAt(i);

        if ( obj[val] && obj[val].value === val ) {
            obj[val].count++;
        }
        else {
            obj[val] = {};
            obj[val].count = 1;
            obj[val].value = val;
        }
    }

    for ( var key in obj ) {
        console.log( key + ' is ' + obj[key].count );
    }

    return obj;
}

插件编写

关于插件编写，可参考：jQuery插件库

焦点轮播图

弹窗效果

多级菜单

tab切换

Lightbox

Javascript模块化

CommonJS

  • 同步的方式加载模块，服务器优先

  • 使用require加载模块，使用module.exports定义模块

AMD

  • 浏览器优先的方式，通过异步加载的方式完成任务

  • 使用define(['module'], function ( module ) {})加载模块

  • 不兼容 io、文件系统（filesystem）和其它通过 CommonJS 实现的面向服务器的功能

  • 推崇依赖前置

  • 对于依赖的模块提前执行

CMD

  • 推崇依赖就近

  • 对于依赖的模块延迟执行

  • 使用define(function ( require, exports, module ) {})加载模块

UMD(通用模块定义，Universal Module Definition)

  • 同时支持 AMD 和 CommonJS 特性

Javascript设计模式

NodeJS

HTML5

CSS3

Websocket

Canvas

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