勿忘初心

前端面试题汇总2

发表于 | 分类于 | | 阅读次数
前端面试题汇，总持续更新中

『HTML&CSS基础』

【HTML】

  • 行内元素 关注行内置换元素 类似inline-block方式展现 input textarea img select

  • 浏览器内核 基于Webkit： Chrome - blink、腾讯X5、UC U3、华为T9 基于Gecko：Firefox 基于Trident：IE 基于Presto：Opera 兼备Webkit&Trident：猎豹、360

  • W3C标准 包括结构(xhtml,xml)、表现(css)、行为(ecmascript、dom)的标准。更好地规范浏览器对页面渲染，使得同一套网页方案尽可能在多套浏览器中表现一致。提高开发者开发效率和用户体验

  • Doctype 用来告诉浏览器以什么文档类型解析html，没有的话，会按照向下兼容的怪异模式对文档进行解析 h4及以下需要引用dtd声明，dtd有标准型和过渡型两种。两者区别可忽略 h5不急于SGML标准，因此不需要引用dtd

  • 标签语义化的重要性 1.便于浏览器、搜索引擎解析 2.在没css情况也以一种文档形式展现，便于阅读 3.有利于SEO 4.有利于代码的阅读和维护

  • strong与em的异同 同：都是对文本起强调作用 异：em以斜体显示文本，strong更利于SEO识别语义

  • SEO 详细 可分为白帽SEO和黑帽SEO SEO的主要方面： 1.网站标题、关键字、描述 (meta) 2.网站结构布局优化：目录层级不要太多，尽量让Spider跳转3次就可以到达网站的任意一个内页 3.网站代码优化： SEO会过滤掉display none的元素、利用<meta description和<meta keywords>、html语义化

  • 图片格式 png-8 256色、png-24、gif、apng(Chrome不支持)、svg、webp(ios不支持)

  • link vs @import 区别： 1.link无兼容性缺点，@import仅兼容IE5+ 2.link权重高于import 3.link外链的css与html是并行加载的，而import需等html加载完才加载

【CSS】

  • CSS盒模型 包括 margin padding border content IE盒模型 (lt IE8)：content包含padding和border 如何改变：box-sizing

  • CSS可继承属性 与font有关的属性 如font-size、font-family、font-weight等 line-height、color、text-align、text-indent等

  • BFC 不同的display会参与不同的环境(formatting context)去渲染，而block参与BFC BFC特点 1.同个BFC内盒子产生margin塌陷 2.计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算 3.BFC就是页面上的一个隔离的独立容器，里外互相不影响 产生新BFC 1.float属性不为none 2.position为absolute或fixed 3.display为inline-block | table-cell | table-caption | flex | inline-flex 4.overflow不为visible

  • 清除浮动 1.形成新的BFC 2.新增div 设置clear:both 3.在父元素添加:after伪类，设置content:"";display:block;clear:both;zoom:1

  • position absolute | relative | static | sticky | fixed

『HTML5』

【新标签】

  • 新增的标签 1.布局，内容 <header> <section> <nav> <article> <aside> <mark> <footer> 2.表单 <datalist> <keygen> <output> 3.媒体 <canvas> <video> <audio> <figure> <figcaption> <source> 4.状态 <progress> <meter> 5.冷门 <command> <details> <summary>

  • 表单新类型 email url number tel search color DatePicker

  • 表单新属性 autocomplete autofocus require pattern placeholder multiple

【新API】

  • 交互 重力感应 DeviceOrientation 手机加速传感器 DeviceMotion

  • history 详细 以Pjax方式实现SPA history.pushState history.replaceState 解决ajax不能后退前进问题

  • 储存 客户端储存：localStorage sessionStorage>只存在一个会话周期内

  • 跨域 postMessage

【Web app】

  • 常见dpr ip6 2、ip6+ 3、nexus5 3

  • 移动端适配 1.自适应方式 2.viewport方式 3.rem方式 4.scale()方式缩放

  • 常用meta IE相关 避免IE使用兼容模式 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 为不支持viewport的IE Mobile设定宽度 <meta name="MobileOptimized" content="320" /> 是否对手持设备友好 <meta name="HandheldFriendly" content="true" /> UC浏览器 强制竖屏 <meta name="screen-orientation" content="portrait" /> 强制全屏 <meta name="full-screen" content="yes" /> 应用模式 <meta name="browsermode" content="application" /> X5浏览器 强制竖屏 <meta name="x5-orientation" content="portrait" /> 强制全屏 <meta name="x5-fullscreen" content="yes" /> 应用模式 <meta name="x5-page-mode" content="app" /> 360 开启极速模式 <meta name="renderer" content="webkit" />

  • iphone相关 启动webapp功能 删除工具栏和菜单栏 <meta name="apple-mobile-web-app-capable" content="yes"> 控制状态栏颜色 <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 开启号码或邮箱检测 <meta name="format-detection" content="telephone=no" /> 添加主屏幕icon <link rel="apple-touch-icon" href="touch-icon-iphone.png">

『CSS3』

【新属性】

flex、column、文本换行、媒体查询、待补充……

开启GPU加速

注意启用-webkit-backface-visibility:hidden; -webkit-perspective:1000;解决启用transform3d页面闪烁和抖动问题

【动画】

  • CSS3动画性能

『Javascript』

【原生】

  • js数据类型 5基本 string number boolean undefined null 储存在栈内存中 1复杂 object 储存在堆内存中

  • this指向 this总是指向函数的直接调用者（而非间接调用者）

  • null和undefined区别 null表示一个无的对象 undefined表示一个无的初始值。表示此处应该有值，但还没有定义，即缺少值

  • new的具体作用 如var p = new P(); var p = {}; //创建新对象 p.__proto__ = P.prototype; //继承构造函数的原型 P.call(p); //修改this指向

  • 创建对象方式 对象字面量、工厂模式、构造函数、原型模式、构造函数+原型

  • 原型 原型链 每个对象都有一个属性 prototype 当需要从对象中寻找属性时，如果在当前对象上没有找到就会从原型对象开始找 一直追溯到原型链的最顶端

  • 实现继承 1.构造函数继承 详细

    • 利用call、apply修改this指向

    • 让子元素原型指向父元素实例，注意要修改子元素prototype.constructor指向

    • 将需继承的属性写在父元素的prototype上，让子元素prototype指向父元素prototype，但在修改子元素prototype.constructor指向时会同时修改父元素prototype.constructor

    • 同上方法 利用中介函数

    2.非构造函数继承 详细 把父对象的属性，全部拷贝给子对象

  • 浅拷贝vs深拷贝 浅拷贝 深拷贝 递归调用浅拷贝

  • 闭包 详细 用途：读取函数内部变量。变量得不到销毁，一直储存在内存中，可能造成内存泄漏

  • 内存泄漏 指分配的内存既不能使用又得不到回收

    • 如为某元素绑定了一个事件，而该元素又从dom中移除

    • 滥用闭包

    • 两变量互相引用

  • 原生Ajax实现过程 1.获取XMLHttpRequest对象 2.xhr.open(type,url,ifAsyn) 3.监听xhr状态改变，xhr.onreadystatechange = function(){} xhr.readyState==4&&xhr.status==200说明请求成功 【readyState：0=未初始化 1=启动 2=发送 3=接收 4=完成】 4.xhr.send()

  • GET和POST区别 GET 安全性低 可传内容少 通过url传值 POST 安全性高 可传内容多 通过表单传值

  • 事件处理 详细

    • 事件委托 利用事件冒泡机制 将事件绑定在父元素上，节省性能

    • 事件处理程序 DOM0 -> DOM1 -> DOM2 (对比与0，可同时绑定多个事件)

    • mouseover和mouseenter区别 mouseenter不冒泡

  • 数组去重 hash方式和index方式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    Array.prototype.unique = function(){
    var n = [];
    for(var i=0,len=this.length;i<len;i++){
        if(n.indexOf(this[i])==-1) {
            n.push(this[i])
        }
    }
    return n;
    }
    Array.prototype.unique2 = function(){
        var n = {},a =[];
        for(var i=0,len=this.length;i<len;i++){
            if(!n[this[i]]) {
                a.push(this[i]);
                n[this[i]] = true;
            }
        }
        return a;
    }

  • ES5数组新方法

  • 斐波纳挈数列高效递归 详细 附斐波纳挈数列

    1
    2
    3
    4
    5
    6
    7
    8
    9
    function getNthFibonacci(count) {
        var fibonacci = [1,1];
        for(var i=2;i<=count;i++){
            fibonacci[i] = fibonacci[i-1]+ fibonacci[i-2];
        }
        return fibonacci[count];
    };
    var a = getNthFibonacci(5);
    console.log(a)

  • getComputedStyle和style区别 getC 只读 可获取未被style定义的样式 style 读写 只可获取含style的样式

  • DOM 插入新节点 document:createElement()、createDocumentFragment()、createTextNode() insertBefore(new,old) 获取节点 childNodes、parentNode、previousSibling、nextSibling、firstChild、lastChild、children 节点操作 appendChild、removeChild、replaceChild、cloneNode、normalize 获取位置

    • 浏览器宽高 window.innerWidth document.documentElement.clientWidth

    • 文档宽高 document.documentElement.offsetHeight、 document.documentElement.scrollHeight

    • 到文档的最端处距离 offsetTop、offsetLeft

  • BOM 浏览器内核 navigator.appVersion

  • 异步编程方法 1.回调函数，这是异步编程最基本的方法。 2.事件监听，另一种思路是采用事件驱动模式。任务的执行不取决于代码的顺序，而取决于某个事件是否发生。 3.发布/订阅，上一节的”事件”，完全可以理解成”信号”。 4.Promises对象，Promises 对象是CommonJS 工作组提出的一种规范，目的是为异步编程提供统一接口。

【jQuery】

  • 操作DOM

  • ajax

【模块化】

【MV*】详细

【虚拟DOM】详细

以对象树的方式储存在内存中

『性能优化』

  • 雅虎14条 详细

  • 移动端优化

  • 16毫秒的优化 详细

    1. google提出1s完成终端首屏渲染：网络消耗+js执行与页面渲染

    2. 浏览器渲染频率1s 60帧，确保每一帧能在16ms内执行与渲染，尽可能避免重排与重绘

    3. 使用RAF控制渲染频率，减少重复渲染，避免事件重复执行

    4. 让js操作读写分离

  • 渲染路径优化

    1. 最小化关键资源数量

    2. 最小化关键资源字节

    3. 最小化关键路径长度

  • 页面直出 详细

    1. server上获取数据并将数据与页面模板结合，在服务端渲染成最终的 HTML

    2. 返回最终的 HTML 展示

『跨域与前端安全』

  • 跨域的方式

    1. JSONP：强行执行不同域下的JS文件，需要外部JS配合。只能用GET方式

    2. CORS：服务器端设置Access-Control-Allow-Origin，使其能被其他域使用AJAX访问到

    3. domain+iframe：只适用主域相同子域不同的两个站。需要将两个站的document.domain设成同一个主域

    4. window.postMessage(msg,targetOrgin)

  • 跨域攻击 详细

    1. 跨域脚本

    2. 跨域请求伪造

『HTTP 』

  • HTTP报文

  • HTTP/1 HTTP/2 HTTPS 详细 建立在TCP基础上

  • 状态码

  • 缓存 设置缓存 服务器返回Cache-Control:max-age=xxx；expires:Thu, 03 Jan 2019 04:24:16 GMT、设置etag、last-modified

实际上浏览器输入 url 之后敲下回车就是先看本地 cache-control、expires 的情况，刷新(F5)就是忽略先看本地 cache-control、expires 的情况，带上条件 If-None-Match、If-Modified-Since，强制刷新(Ctrl + F5)就是不带条件的访问。

  • 描述从输入url到一个页面展示在你面前的全部过程

  1. DNS Lookup

  2. 建立TCP连接

  3. 发送http请求

  4. 服务器发送响应

  5. 浏览器加载解析DOM&CSS

  6. 生成DOM Tree&CSS RuleTree

  7. DOMTree和CSS RuleTree结合生成RenderTree

  8. 对RenderTree上的每一个元素计算其坐标>称为布局

  9. 对RenderTree的元素进行绘制和展示>称为『painting』

  • 引申-当页面渲染时，浏览器发生了什么

『工具』

【前端自动化工具】

  • grunt

  • glup

【CSS预处理】

优势：

  1. 用嵌套方式写CSS，结构更加的清晰

  2. 可使用变量、函数，更类似编程的方式

  3. 可将一整套CSS拆分成若干个组件，粒子性、可组合的特点更加明显

  • sass

  • less

  • compass

『数据结构』

  • 排序 详细 不稳定的排序 快速排序、选择排序、希尔排序、堆排序

  • 二叉树原理与实现

欢迎转载，但转载请注明来自”勿忘初心”的博客，并保持转载后文章内容的完整性。

本文链接：http://lucylc.com/InterView/2017/02/24/前端面试题汇总2.html

坚持原创技术分享，您的支持将鼓励我继续创作！

热评文章