前端面试题集锦

yvonne

又一年校招季~这是近来收集的前端面试题,共勉。
这里写的答案有些比较简略,只是给出一个方向吧,大家可以自己去深入去学习探究。

『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-sizefont-familyfont-weight
    line-heightcolortext-aligntext-indent

  • BFC
    不同的display会参与不同的环境(formatting context)去渲染,而block参与BFC
    BFC特点
    1.同个BFC内盒子产生margin塌陷
    2.计算BFC的高度时,考虑BFC所包含的所有元素,连浮动元素也参与计算
    3.BFC就是页面上的一个隔离的独立容器,里外互相不影响
    产生新BFC
    1.float属性不为none
    2.positionabsolutefixed
    3.displayinline-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方式

    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数组新方法

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

    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


『数据结构』

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

  • 二叉树原理与实现

阅读 4.2k

Nodes of Front-end
前端妹砸的笔记本。。
1.3k 声望
93 粉丝
0 条评论
1.3k 声望
93 粉丝
文章目录
宣传栏