精华内容
下载资源
问答
  • nodejs 面试题(个人总结

    千次阅读 2020-12-02 20:49:46
    什么是nodejs?我们在哪里使用它 Node 是一个让 JavaScript 运行在服务端的开发平台,它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。 为什么要使用node js Node是一个基于...
    1. 什么是nodejs?我们在哪里使用它

    Node 是一个让 JavaScript 运行在服务端的开发平台,它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。

    1. 为什么要使用node js

    Node是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用

    作为web前端开发人员需要了解一门后台语言

    对于前端开发人员nodejs 更容易上手

    1. nodejs有哪些特点

    RESTful API

    单线程

    非阻塞IO

    V8虚拟机

    事件驱动

    1. 什么是回调函数 ​ 回调函数,就是放在另外一个函数(如 parent)的参数列表中,作为参数传递给这个 parent,然后在 parent 函数体的某个位置执行,Node.js 异步编程的直接体现就是回调

    2. NPM的作用是什么

    node的包管理工具

    1. 什么是事件循环

    Node.js 在主线程里维护了一个事件队列,当接到请求后,就将该请求作为一个事件放入这个队列中,然后继续接收其他请求

    1. 什么是错误优先的回调函数

    NodeJS 通常使用回调模式,如果在执行期间发生错误,会把错误作为回调的第一个参数传递到回调函数中

    1. node模块分几类

    内置模块 自定义模块 第三方模块

    1. npm 下载模块的命令是什么

    npm install 模块名 --save

    1. npm 本地下载和全局下载的区别是什么

    --save -g 一个是功能模块 一个是工具

    1. *http请求消息的格式是什么 ​ 请求行 请求头 空行 请求数据

    2. http响应消息的格式是什么

    响应行 响应头 空行 响应正文

    1. url包含哪几部分

    协议 域名 路径 参数

    1. get和post传输数据的区别是什么

    传输数据的方式不一样 一个在请求头 post在请求体

    get 传输量小 post传输量大

    1. http工作原理

      1、客户端连接到Web服务器 2、发送HTTP请求

      3、服务器接受请求并返回HTTP响应

      4、释放连接TCP连接

      5、客户端浏览器解析HTML内容

    2. http状态码有哪些

      1xx:指示信息--表示请求已接收,继续处理

      2xx:成功--表示请求已被成功接收、理解、接受

      3xx:重定向--要完成请求必须进行更进一步的操作

      4xx:客户端错误--请求有语法错误或请求无法实现

      5xx:服务器端错误--服务器未能实现合法的请求

    3. 说一下对端口的理解

    通过“IP地址+端口号”来区分不同的服务的

    1. 什么是域名

      域名(英语:Domain Name),又称网域,是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称,用于在数据传输时对计算机的定位标识(有时也指地理位置)

    2. 说一下对ip的理解

    IP是Internet Protocol(网际互连协议)的缩写,是TCP/IP体系中的网络层协议

    IP地址是用来识别网络上的设备,IP地址是由网络地址与主机地址两部分所组成

    1. express生成器创建项目的命令是什么

    express -e 项目名称

    1. 模板引擎的作用是什么

    界面和数据的分离 模板复用

    1. ejs模板 如何渲染一个列表

      <% for(var i=0;i<list.length;i++){ %>

      <li>

      <%= list[i]. %>

      </li>

    <% } %>

    1. mongoose操作mongoDB数据库,连接数据库的步骤

      1. 引入第三方模块mongoose

      2. 连接数据库:mongoose.connect(‘数据库的地址’)

      3. 设置集合规则:new mongoose.Schema()

      4. 创建集合:mongoose.model(‘集合名’, 集合规则)

    2. 向mongoDB数据库中导入数据的命令

      mongoimport -d 数据库名 -c 集合名 --file 要导入的文件

    3. mongoose操作mongoDB数据库,查找数据库中年龄大于20小于40的文档+

      集合.find({ age: { $gt: 20, $lt: 40 } })

    4. mongoose操作mongoDB数据库,删除多条文档 集合.deleteMany( ‘条件’)

    5. 什么是同源策略

      同源策略 是由NetScape提出的一个著名的安全 策略,它是浏览器最核心也最基本的安全功能

      所谓的同源,指的是协议,域名,端口相同。浏览器处于安全方面的考虑,只允许本域名下的接口交互,不同源的客户端脚本,在没有明确授权的情况下,不能读写对方的资源 4

    6. 什么是跨域

      跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实施的安全限制

    7. 跨域解决方案,最少说出三种

      **Jsonp, CORS, 代理,反向代理,哈希处理跨域,a链接处理跨域**

    8. jsonp的原理

      1. script的src属性不受同源策略的限制

      2. 将不同源的服务器端请求地址写在 script 标签的 src 属性中

         

    展开全文
  • node.js面试题总结

    2019-12-11 15:47:25
    C:\Nodejs_WorkSpace>node > var x = 10 undefined > var y = 20 undefined > x + y 30 > var sum = _ undefined > console.log(sum) 30 undefined > 20、Node.js是否支持加密? 支持/Node.js Crypto模块支持加密...

    1. Node.js是什么?

    Node.js是服务器端脚本,用于构建可伸缩程序。 它是基于Google Chrome的JavaScript引擎构建的Web应用程序框架。 它在Mac OS,Windows和Linux上的Node.js运行时内运行,无需更改。 此运行时可以帮助您在浏览器外的任何计算机上执行JavaScript代码。

    2、Node是单线程应用程序吗?

    是,他是一个带有时间循环的单线程应用程序。

    3、node.js的使用目的是什么?

    • 构建实时web应用程序
    • 网络应用
    • 分布式系统
    • 通用应用程序

    4、Node.js有点?

    Node.js是异步和事件驱动的。Node.js库的所有API都是非阻塞的,其服务不等待API返回数据。它在调用之后移动到下一个API,并且node.js事件的通知机制响应来自先前API调用的服务器。node.js非常快因为它建立再Google Chrome 的V8 JavaScript引擎上。它的库在代码执行方面非常快,node.js是单线程但高度可扩展的。node.js提供了无缓冲的功能,他的应用从不缓冲任何数据。它以块的形式输出数据。

    5、解释node.js web应用程序架构?

    web应用程序分为4层:

    • 客户端层:客户端层包含可以向web服务器发出HTTP请求的web浏览器,移动浏览器或应用程序。
    • 服务器层:服务器层包含web服务器,他可以拦截客户端发出的请求并响应传递给他们。
    • 业务层:业务层包含web服务器用于执行所需处理的应用程序服务器,该层通过数据库或一些外部程序与数据层交互。
    • 数据层:数据层包含数据库和任何数据源。
    展开全文
  • web前端面试题总结

    千次阅读 多人点赞 2018-03-01 20:25:54
    web前端常见面试题总结1.为何选择前端这个方向?对前端很感兴趣,之前也接触过其他语言,但是直到接触前端才发现真的有兴趣做下去,兴趣是一个人最好的老师。前端很有前途,像现在node.js,rn,微信小程序这类工具和...

    web前端常见面试题总结

    1.为何选择前端这个方向?

    • 对前端很感兴趣,之前也接触过其他语言,但是直到接触前端才发现真的有兴趣做下去,兴趣是一个人最好的老师。
    • 前端很有前途,像现在node.js,rn,微信小程序这类工具和框架可以让前端进行后端和移动开发,所以我觉得前端的前途会更多一点。
    2.谈谈你对前端的理解?
    • 目前前端工程师最核心的技能还是:Html,CSS,JS。前端负责的是用户可以看到的部分,所以也是最接近用户的工程师,同时在产品研发流程中前端要同时与产品,设计,后端等很多人合作。
    3.Vue双向数据绑定的实现?
    • vue.js则是采用数据劫持结合开发者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者(文本节点则是作为订阅者),在收到消息后执行相应的更新操作。
    4.react和vue有哪些不同,说说你对这两个框架的看法?
    • 都用了virtual dom 的方式,性能都很好
    • ui上都是组件化写法,开发效率很高
    • vue是双向数据绑定,react是单项数据绑定,当工程规模比较大时双向数据绑定会很难维护
    • vue适合不会持续的小型web应用,使用vue.js能带来短期内较高的开发效率,否则采用react

    5.let和const的区别?

    • let声明的变量可以改变,值和类型都可以改变,没有限制。
    • const声明的变量不得改变值

    6.平时用了es6的那些特性?

    • let,const,箭头函数,字符串模板,class类,模板化promise

    7.浏览器原生支持module吗?如果支持会带来那些遍历?

    • 不支持
    8.介绍一下你对webpack的理解,和gulp有什么不同?
    • Webpack是模块打包工具,他会分析模块间的依赖关系,然后使用loaders处理它们,最后生成一个优秀化并且合并后的静态资源。
    • gulp是前端自动化工具,能够优化前端工作流程,比如合并压缩。

    9.Webpack打包速度慢,你觉得可能的原因是什么?该如何解决模块太多?

    • Webpack可以配置externals来将依赖库指向全局变量,从而不再打包这个库

    10.http响应中content-type包含哪些内容?

        请求中的消息主体是用何种方式编码
        application/x-www-form-urlencoded
        这是最常见的 POST 提交数据的方式 按照 key1=val1&key2=val2 的方式进行编码
        application/json
        告诉服务端消息主体是序列化后的 JSON 字符串

    11. position:absolute和float属性的异同?

    • 共同点 :对内联元素设置float和absolute属性,可以让元素脱离文档流,并且可以设置其宽高。
    • 不同点 :float仍可占据位置,不会覆盖在另一个BFC区域上,浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。absolute会覆盖文档流中的其他元素。

    12:平时是怎么学新技术的

    • 伯乐在线 infoq 掘金 简书 慕课网

    13:Node,Koa用的怎么样

    • koa是一个相对于express来说,更小,更健壮,更富表现力的Web框架,不用写回调
    • koa是从第一个中间件开始执行,遇到next 进入下一个中间件,一直执行到最后一个中间件,在逆序async  await 语法的支持

    14:使用模块化加载时,模块加载的顺序是怎样的,如果不知道,根据已有的知识,你觉得顺序应该是怎么样的

    • commonjs 同步 顺序执行
    • AMD 提前加载,不管是否调用模块,先解析所有模块 requirejs 速度快 有可能浪费资源
    • CMD 提前加载,在真正需要使用(依赖)模块时才解析该模块 seajs 按需解析 性能比AMD差

    15: 介绍一下闭包和闭包常用场景

    • 闭包是指有权访问另一个函数作用域中的变量的函数. 创建闭包常见方式,就是在一个函数内部创建另一个函数.
    • 应用场景 设置私有变量和方法
    • 不适合场景:返回闭包的函数是个非常大的函数
    • 闭包的缺点就是常驻内存,会增大内存使用量,使用不当很容易造成内存泄露。

    16: 为什么会出现闭包这种东西,解决了什么问题

    • 受JavaScript链式作用域结构的影响,父级变量中无法访问到子级的变量值,为了解决这个问题,才使用闭包这个概念

    17: 介绍一下你所了解的作用域链,作用域链的尽头是什么,为什么

    • 每一个函数都有一个作用域,比如我们创建了一个函数,函数里面又包含了一个函数,那么现在  就有三个作用域,这样就形成了一个作用域链。
    • 作用域的特点就是,先在自己的变量范围中查找,如果找不到,就会沿着作用域链往上找。

    18: 简述Ajax的过程?,主要用到哪些状态码

    • 创建XMLHttpRequest对象,也就是创建一个异步调用对象.
    • 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
    • 设置响应HTTP请求状态变化的函数.
    • 发送HTTP请求.
    • 获取异步调用返回的数据.
    • 使用JavaScript和DOM实现局部刷新.

    当前状态readystate
    0 代表未初始化。 还没有调用 open 方法
    1 代表正在加载。 open 方法已被调用,但 send 方法还没有被调用
    2 代表已加载完毕。send 已被调用。请求已经开始
    3 代表交互中。服务器正在发送响应
    4 代表完成。响应发送完毕
    常用状态码status
    404 没找到页面(not found)
    403 禁止访问(forbidden)
    500 内部服务器出错(internal service error)
    200 一切正常(ok)
    304 没有被修改(not modified)(服务器返回304状态,表示源文件没有被修改)

    18:对自己未来的规划是怎样的

    • 对于刚毕业的人来说,前两年是很重要的,先打好基础,多提升js能力。三至四年在提升JS能力的同时,开始要往多方面发展,前端工程师远远不仅是JS而已。制作一个性能高、交互好、视觉美的页面,需要从前端框架选型、架构设计、构建工具,到后端通信机制、设计与交互、网络和浏览器优化等各方面的知识。一专多长才是前端工程师的终极目标。

    19: 说说你知道JavaScript的内存回收机制

    • 垃圾回收器会每隔一段时间找出那些不再使用的内存,然后为其释放内存。
    • 一般使用标记清除方法  当变量进入环境 标记为进入环境,离开环境标记为离开环境
    • 还有引用计数方法
    • 堆栈
    • stack 为自动分配的内存空间,它由系统自动释放;而 heap 则是动态分配的内存,大小不定也不会自动释放。
    • 基本数据类型存放在栈中
    • 引用类型 存放在堆内存中, 首先从栈中获得该对象的地址指针,然后再从堆内存中取得所需的数据

    20:UMD规范和ES6模块化,Commonjs的对比

    • CommonJS是一个更偏向于服务器端的规范。用于NodeJS 是同步的
    • AMD是依赖前置的
    • CMD推崇依赖就近,延迟执行。可以把你的依赖写进代码的任意一行
    • AMD和CMD都是用difine和require,但是CMD标准倾向于在使用过程中提出依赖,就是不管代码写到哪突然发现需要依赖另一个模块,那就在当前代码用require引入就可以了,规范会帮你搞定预加载,你随便写就可以了。但是AMD标准让你必须提前在头部依赖参数部分写好(没有写好? 倒回去写好咯)。这就是最明显的区别。
    • UMD写一个文件需要兼容不同的加载规范

    ES6通过import 、export 实现模块的输入输出。其中import命令用于输入其他模块提供的功能,export命令用于规定模块的对外接口。

    21:http请求头
    • get post delete put head options trace connect
    • OPTIONS:返回服务器针对特定资源所支持的HTTP请求方法
    22.框架问题
    什么是 MVVM , 和 MVC 是什么区别, 原理是什么?
    • mvc的界面和逻辑关联紧密,数据直接从数据库读取,必须通过Controller来承上启下,通信都是单向的。mvvm的View 和 ViewModel可以互相通信,界面数据从viewmodel中获取。
    父子组件怎么通信的?
    • vue:父组件是通过props属性给子组件通信 ,子组件是通过$emit,$on通信
    • react:props传递  父给子传一个回调函数 将数据传给父亲处理
    兄弟组件怎么通信的?
    • vuex 建立一个vue实例 emit触发事件 on监听事件
      redux  子A -> 父 -> 子B
    生命周期有哪些, 怎么用?
    • beforecreated :el 和 data 并未初始化  
    • created :完成了 data 数据的初始化,el没有 
    • beforeMount :完成了 el 和 data 初始化 
    • mounted  :完成挂载  updated;destroyed
    • react:初始化阶段、运行中阶段、销毁阶段
    • 初始化getDefaultProps() 和getInitialState()初始化
    •  componentWillMount() 在组件即将被渲染到页面render() 组件渲染
    •  componentDidMount() 组件被渲染到页面上,
    • 运行中shouldComponentUpdate() componentWillUpdate() render() componentDidUpdate() 
    • 销毁componentWillUnmount() 
    23:清除浮动
    • 两种原理:
    (1)、利用clear属性进行清理
    具体的实现原理是通过引入清除区域,这个相当于加了一块看不见的框把定义clear属性的元素向下挤 
    父容器结尾插入空标签<div style="clear: both;"></div>
    利用CSS伪元素:
    .clearfix:after {
      content: ".";
      height: 0;
      visibility: hidden;
      display: block;
      clear: both;
    }
    通过将这个类添加到父容器当中,会在父容器的末尾增加了一个高度为0、具有清除属性的、不可见的块级元素。
    (2)、将父容器形成BFC
    BFC能清理浮动主要运用的是它的布局规则:
    • 内部的Box会在垂直方向,一个接一个地放置。
    • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
    • 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
    • BFC的区域不会与float box重叠。
    • BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
    • 计算BFC的高度时,浮动元素也参与计算
    浮动清理利用的主要是第六条规则,只要将父容器触发为BFC,就可以实现包含的效果。
    那么触发BFC有哪几种方法?
    1.根元素
    2.float属性不为none
    3.position为absolute或fixed
    4.display为inline-block, table-cell, table-caption, flex, inline-flex

    5.overflow不为visible

    24.前端性能优化
    • 减少http请求 使用sprite图、合并js和css文件
    • 使用cdn 将用户安排在近的服务器上
    • 使用缓存 缓存ajax 使用外部的css和js以便缓存 使用expire cach-control etag
    • 压缩资源 使用gzip压缩js和css文件
    • 代码层面 避免使用样式表达式、通配符选择器、样式放在顶部、脚本放在底部
    25.事件模型和事件代理
    • 事件三个阶段:事件捕获,目标,事件冒泡(低版本ie不支持捕获阶段)
    • w3c绑定事件target.addEventListener(event,handler,false)
    • 解绑target.removeEventListener(eventType, handler, false )
    • ie绑定 target.attachEvent(on+event, handler)
    • 解绑target.detachEvent("on"+eventType, handler)
    事件代理优点:
    • 可以大量节省内存占用,减少事件注册,比如在table上代理所有td的click事件就非常棒
    • 可以实现当新增子对象时无需再次对其绑定事件,对于动态内容部分尤为合适
    26.将url的查询参数解析成字典对象
    function getQueryObject(url) {
        url = url == null ? window.location.href : url;
        var search = url.substring(url.lastIndexOf("?") + 1);
        var obj = {};
        var reg = /([^?&=]+)=([^?&=]*)/g;
        search.replace(reg, function (rs, $1, $2) {
            var name = decodeURIComponent($1);
            var val = decodeURIComponent($2);               
            val = String(val);
            obj[name] = val;
            return rs;
        });
        return obj;
    }
     
    getQueryObject("http://www.cnblogs.com/leee/p/4456840.html?name=1&dd=ddd**")
    Object {name: "1", dd: "ddd**"}
      
    27.position的值, relative和absolute分别是相对于谁进行定位的?
    • relative :相对定位,相对于自己本身在正常文档流中的位置进行定位。
    • absolute :生成绝对定位,相对于最近一级定位不为static的父元素进行定位。
    • fixed : 生成绝对定位,相对于浏览器窗口或者frame进行定位。
    • static :默认值,没有定位,元素出现在正常的文档流中。
       28.CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?
    选择符 :
    • id选择器(#myId);
    • 类选择器(.myClassName);
    • 标签选择器(div,p,h1);
    • 相邻选择器(h1 + p);
    • 子选择器(ul > li);
    • 后代选择器(li a);
    • 通配符选择器(*);
    • 属性选择器(button[disabled="true"]);
    • 伪类选择器(a:hover,li:nth-child);表示一种状态
    • 伪元素选择器(li:before、:after,:first-letter,:first-line,:selecton);表示文档某个部分的表现
    优先级 :

    !important > 行内样式(比重1000) > id(比重100) > class/属性(比重10) > tag / 伪类(比重1);

    伪类和伪元素区别 :
    • 伪类:a:hover,li:nth-child;
    • 伪元素:li:before、:after,:first-letter,:first-line,:selector;
    39.两个数组合并成一个数组排序返回
    先依次比较两个数组,按照小的就传入新的数组。当这次比较完之后可能有一个数组的长度很长,留下一些数组,然后在新数组的末尾插入即可。
    functiongetRes(arr1, arr2){
       var len1 = arr1.length,
           len2 = arr2.length,
           i = 0,
           j = 0,
           k = 0,
           res = new Array(len1+len2);
     
           while(i < len1 && j <len2){
    res[k++] = arr[(arr[i] > arr[j]) ? j++ : i++];
    }
    While(i < len1)   res[k++]= arr1[i++];
    While(j < len2)   res[k++]= arr2[j++];
    Return res;

    }

    40.zepto和jquery区别
    • zepto比jquery体积小很多,移动端的兼容性不需要要考虑很多,jquery中的很多功能都没有。
    • width()和height()不一样  解决用.css('width')
    41.css3动画和jquery动画的差别
    • css3中的过渡和animation动画都是基于css实现机制的,属于css范畴之内,并没有涉及到任何语言操作。效率略高与jQuery中的animate()函数,但兼容性很差。
    • jQuery中的animate()函数可以简单的理解为css样式的“逐帧动画”,是css样式不同状态的快速切换的结果。效率略低于css3动画执行效率,但是兼容性好。‍

    42.如何解决ajax无法后退的问题

    HTML5里引入了新的API,即:history.pushState, history.replaceState
    可以通过pushState和replaceState接口操作浏览器历史,并且改变当前页面的URL。

    onpopstate监听后退

    43.实现一个once函数

    function test () {console.log('test')}
    var once = function (fn) {
      var isFirst = true;
      return function () {
        if (isFirst) {
          isFirst = !isFirst;
          fn();
        }
      };
    };

    var b = once(test);
    b(); // 'test'
    b(); // nothing
     
    44.分域名请求图片的原因和好处
    • 浏览器的并发请求数目限制是针对同一域名的,超过限制数目的请求会被阻塞
    • 浏览器并发请求有个数限制,分域名可以同时并发请求大量图片
    45.页面的加载顺序
        html顺序加载,其中js会阻塞后续dom和资源的加载,css不会阻塞dom和资源的加载但是会阻塞js的加载。
    浏览器会使用prefetch对引用的资源提前下载
    • 没有 defer 或 async,浏览器会立即加载并执行指定的脚本
    • 有 async,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(下载异步,执行同步,加载完就执行)。
    • 有 defer,加载后续文档元素的过程将和 script.js 的加载并行进行(异步),但是 script.js 的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成。
    46.生成10个20-50之间的随机数,存在数组中,常见排序方法,数组乱序方法
    var arr = [];
    for(var i = 0;i<10;i++){
        var num = Math.random()*30 + 20;
        num = parseInt(num, 10);
        arr.push(num);
    }
    arr.sort(function(a,b){
        return 0.5 - Math.random();
    })
    47.计算机网络的分层概述
    • tcp/ip模型:从下往上分别是链路层,网络层,传输层,应用层
    • osi模型:从下往上分别是物理层,链路层,网络层,传输层,会话层,表示层,应用层。
    48.jscss缓存问题
    浏览器缓存的意义在于提高了执行效率,但是也随之而来带来了一些问题,导致修改了js、css,客户端不能更新
    都加上了一个时间戳作为版本号

    <script type=”text/javascript” src=”{JS文件连接地址}?version=XXXXXXXX”></script>

    49.setTimeout,setInterval,requestAnimationFrame之间的区别
    • setInterval如果函数执行的时间很长的话,第二次的函数会放到队列中,等函数执行完再执行第二次,导致时间间隔发生错误。
    • 而settimeout一定是在这个时间定时结束之后,它才会执行
    • requestAnimationFrame是为了做动画专用的一个方法,这种方法对于dom节点的操作会比较频繁。
    50.webpack常用到哪些功能

    • 设置入口  设置输出目 设置loader  extract-text-webpack-plugin 将css从js代码中抽出并合并 处理图片文字等功能 解析jsx解析bable
    51.介绍sass

    • sass是一门编程语言,css是一门标记语言,sass是一种css开发工具,可以预编译css,sass提供了很多遍历的写法:例如自定义变量,if语句,循环,嵌套,继承,混合
    52.websocket和ajax轮询
    Websocket是HTML5中提出的新的协议 ,注意,这里是协议,可以实现客户端与服务器端的通信,实现服务器的推送 功能。
    其优点就是,只要建立一次连接,就可以连续不断的得到服务器推送的消息,节省带宽和服务器端的压力。
    ajax轮询模拟长连接就是每个一段时间(0.5s)就向服务器发起ajax请求,查询服务器端是否有数据更新

    其缺点显而易见,每次都要建立HTTP连接,即使需要传输的数据非常少,所以这样很浪费带宽

    53.tansition和margin的百分比根据什么计算

    • transition是相对于自身,margin相对于参照物
    54.冒泡排序、快速排序、去重、查找字符串最多值
    //冒泡排序
    var bubbleSort = function(arr) {
       for (var i = 0; i < arr.length-1; i++) {
         for (var j = i+1; j < arr.length; j++) {
           if (arr[i]>arr[j]) {
             var temp = arr[i];
             arr[i] = arr[j];
             arr[j] = temp;
           }
         }
       }
       return arr;
    };
      
    //快速排序
    var quickSort = function(arr) {
      if (arr.length <= 1) {
        return arr;
      }
      var len = arr.length;
      var midIndex = Math.floor(len/2);
      var mid = arr.splice(midIndex,1);
      var left = [];
      var right = [];
      for (var i = 0; i < arr.length; i++) {
        if (arr[i] < mid) {
          left.push(arr[i]);
        } else {
          right.push(arr[i]);
        }
      }
      return quickSort(left).concat(mid,quickSort(right))
    }
      
    // 去重
     var distinct = function(arr) {
       var map = {};
       var result = [];
       for (var i = 0; i < arr.length; i++) {
          if (!map[arr[i]]) {
            map[arr[i]] = true;
            result.push(arr[i]);
          }
       }
       return result;
     }
      
    //查找字符串中最多的值
    var search = function(str) {
      var json = {};
      var max = 0;
      var char;
      for (var i = 0; i < str.length; i++) {
        if (!json[str[i]]) {
          json[str[i]]=1;
        } else {
          json[str[i]]++;
        }
      }
      console.log(json);
      for(var i in json){
            if(json[i]>max){
                    max = json[i];
                    char = i;
            }
    }
      console.log(max, char);

    }

    55.函数组合继承
    原型继承、构造函数继承、call aplly继承
    var Super = function(name){
      this.name = name;
    }
    Super.prototype.func1 = function() { console.log('func1'); }
    var Sub = function(name,age) {
      Super.call(this, name);
      this.age = age;
    }

    Sub.prototype = new Super();

    56.事件绑定
    var addEvent = function(e, type, handler, capture ) {
      if (e.addEventListener) {
        e.addEventListener(type, handler, capture);
      } else if (e.attachEvent) {
        e.attachEvent('on'+type, handler);
      } else {
        e['on'+type] = handler;
      }
    }
    57.浅克隆和深度克隆
     
    //浅克隆
    function extendCopy(p) {
        var c = {};
        for (var i in p) { 
          c[i] = p[i];
        }
        c.uber = p;
        return c;
     }
    //深度克隆
    var clone = function(v) {
      var o = v.constructor === Array ? [] : {};
      for (var i in v) {
        o[i] = typeof v[i] === "Object" ? clone(v[i]) : v[i];
      }
      return o;
    }
    58.实现一个秒针绕一点转动的效果
              animation: move 60s infinite steps(60);  
             /*设置旋转的中心点为中间底部*/  
              transform-origin: center bottom;  
            /*旋转从0度到360度*/  
            @keyframes move {  
                from {  
                    transform: rotate(0deg);  
                }  
                to {  
                    transform: rotate(360deg);  
                }  

            }  

    59.移动端兼容问题
    • IOS移动端click事件300ms的延迟响应一些情况下对非可点击元素如(label,span)监听click事件,ios下不会触发,css增加cursor:pointer就搞定了

    60.对前端界面工程师这个职位是怎么理解的?

    • 前端是最贴近用户的程序员,前端的能力就是能让产品从90分进化到100分,甚至更好
    • 参与项目,快速高质量完成时限效果图,精确到1px
    • 与团队成员,UI设计,产品经理沟通
    • 做好页面结构,页面结构和用户体验
    • 支队服务器的优化,拥抱最新的前端技术










    展开全文
  • 2017前端面试题总结

    2018-10-11 15:45:01
    2017前端面试题总结 1:为何选择前端这个方向和对前端的理解 为什么: 第一的话就是对前端很感兴趣,之前也接触过其他的语言,但是直到接触到前端才发现真的有兴趣做下去,兴趣是一个人最好的老师, 第二的话前端很...

    2017前端面试题总结

    1:为何选择前端这个方向和对前端的理解

    为什么:

    第一的话就是对前端很感兴趣,之前也接触过其他的语言,但是直到接触到前端才发现真的有兴趣做下去,兴趣是一个人最好的老师,

    第二的话前端很有前途,像现在nodejs,rn,微信小程序这类工具和框架可以让前端进行后端和移动开发,所以我觉得前端的前途会更多一点。

    理解:

    首先前端工程师最核心的技能还是:Html、CSS、JS。前端负责的是用户可以看到的部分,所以也是最接近用户的工程师。同时在产品研发流程中前端要同时与产品、设计、后端等很多人合作。

    2:Vue双向数据绑定的实现

    vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者(文本节点则是作为订阅者),在收到消息后执行相应的更新操作。

    compile主要做的事情是解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图

    MVVM作为数据绑定的入口,整合Observer、Compile和Watcher三者,通过Observer来监听自己的model数据变化,通过Compile来解析编译模板指令,最终利用Watcher搭起Observer和Compile之间的通信桥梁,达到数据变化 -> 视图更新;视图交互变化(input) -> 数据model变更的双向绑定效果。

    AngularJS 采用“脏值检测”的方式,数据发生变更后,对于所有的数据和视图的绑定关系进行一次检测,识别是否有数据发生了改变。

    3:react和vue有哪些不同 说说你对这两个框架的看法

    都用了virtual dom的方式, 性能都很好

    ui上都是组件化的写法,开发效率很高

    vue是双向数据绑定,react是单项数据绑定,当工程规模比较大时双向数据绑定会很难维护

    vue适合不会持续的 小型的web应用,使用vue.js能带来短期内较高的开发效率. 否则采用react

    4:let和const的区别

    let声明的变量可以改变,值和类型都可以改变,没有限制。

    const声明的变量不得改变值

    5:平时用了es6的哪些特性,体验如何 和es5有什么不同

    let const关键字 箭头函数 字符串模板 class类 模块化 promise

    es5 require react.createclass

    6:浏览器原生支持module吗,如果支持,会带来哪些便利

    不支持

    7:介绍一下你对webpack的理解,和gulp有什么不同

    Webpack是模块打包工具,他会分析模块间的依赖关系,然后使用loaders处理它们,最后生成一个优化并且合并后的静态资源。

    gulp是前端自动化工具 能够优化前端工作流程,比如文件合并压缩

    8:webpack打包速度慢,你觉得可能的原因是什么,该如何解决

    模块太多

    Webpack 可以配置 externals 来将依赖的库指向全局变量,从而不再打包这个库 或者dllplugin

    webpack-parallel-uglify-plugin 并行压缩

    CommonsChunkPlugin提取公共的模块

    happypack 多进程构建

    9:http响应中content-type包含哪些内容

    请求中的消息主体是用何种方式编码

    application/x-www-form-urlencoded

    这是最常见的 POST 提交数据的方式 按照 key1=val1&key2=val2 的方式进行编码

    application/json

    告诉服务端消息主体是序列化后的 JSON 字符串

    10:浏览器缓存有哪些,通常缓存有哪几种方式

    强缓存 强缓存如果命中,浏览器直接从自己的缓存中读取资源,不会发请求到服务器。

    协商缓存 当强缓存没有命中的时候,浏览器一定会发送一个请求到服务器,通过服务器端依据资源的另外一些http header验证这个资源是否命中协商缓存,如果协商缓存命中,服务器会将这个请求返回(304),若未命中请求,则将资源返回客户端,并更新本地缓存数据(200)。

    HTTP头信息控制缓存

    Expires(强缓存)+过期时间 Expires是HTTP1.0提出的一个表示资源过期时间的header,它描述的是一个绝对时间

    Cache-control(强缓存) 描述的是一个相对时间,在进行缓存命中的时候,都是利用客户端时间进行判断 管理更有效,安全一些 Cache-Control: max-age=3600

    服务端返回头Last-Modified/ 客户端请求头If-Modified-Since(协商缓存) 标示这个响应资源的最后修改时间。Last-Modified是服务器相应给客户端的,If-Modified-Sinces是客户端发给服务器,服务器判断这个缓存时间是否是最新的,是的话拿缓存。

    服务端返回头Etag/客户端请求头If-None-Match(协商缓存) etag和last-modified类似,他是发送一个字符串来标识版本。

    强缓存不请求服务器,客户端判断 、协商缓存要请求服务器

    11:如何取出一个数组里的图片并按顺序显示出来
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17

    function loadImage(imgList,callback){
    if(! . i s A r r a y ( i m g L i s t ) ∣ ∣ ! .isArray(imgList) || ! .isArray(imgList)!.isFunction(callback)) return ;
    var imageData = [] ;
    $.each(imgList, function(i,src){
    var img = new Image() ;
    img.onload = function(){
    $(imageData.shift()).appendTo(“body”) ;
    if(!imageData.length){
    callback() ;
    return ;
    }
    this.onload = null ;
    } ;
    img.src= src ;
    imageData.push(img) ;
    }) ;
    } ;
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26

    async function loadImgs(imgList, cb) {

    console.log("start")
    for( var i =0; i<imgList.length; i++) {
        await imgLoader(imgList[i], i);
        console.log("finish"+i)
    }
    cb();
    

    }

    async function imgLoader(url, num){
    return new Promise((resolve, reject) => {
    console.log(“request”+num)

        setTimeout(resolve, 1000);
        // let img = new Image();
        // img.onload = () => resolve(img);
        // img.onerror = reject;
    
        console.log("return"+num)
    })
    

    }

    loadImgs([“xxx/a.png”,“xxx/b.png”],function() {
    console.log(“开始干活”);
    })

    12:平时是怎么学新技术的

    伯乐在线 infoq 掘金 简书 慕课网

    13:Node,Koa用的怎么样

    koa是一个相对于express来说,更小,更健壮,更富表现力的Web框架,不用写回调

    koa是从第一个中间件开始执行,遇到next进入下一个中间件,一直执行到最后一个中间件,在逆序

    async await语法的支持

    14:使用模块化加载时,模块加载的顺序是怎样的,如果不知道,根据已有的知识,你觉得顺序应该是怎么样的

    commonjs 同步 顺序执行

    AMD 提前加载,不管是否调用模块,先解析所有模块 requirejs 速度快 有可能浪费资源

    CMD 提前加载,在真正需要使用(依赖)模块时才解析该模块 seajs 按需解析 性能比AMD差

    15: 介绍一下闭包和闭包常用场景

    闭包是指有权访问另一个函数作用域中的变量的函数. 创建闭包常见方式,就是在一个函数内部创建另一个函数.
    本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。
    

    应用场景 设置私有变量和方法让这些变量的值始终保持在内存中还有读取函数内部变量。

    不适合场景:返回闭包的函数是个非常大的函数

    闭包的缺点就是常驻内存,会增大内存使用量,使用不当很容易造成内存泄露。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15

    function f1(){

    var n=999;

    function f2(){
        alert(n);
      }

    return f2;

    }

    var result=f1();

    result(); // 999

    16: 为什么会出现闭包这种东西,解决了什么问题

    受JavaScript链式作用域结构的影响,父级变量中无法访问到子级的变量值,为了解决这个问题,才使用闭包这个概念

    17: 介绍一下你所了解的作用域链,作用域链的尽头是什么,为什么

    每一个函数都有一个作用域,比如我们创建了一个函数,函数里面又包含了一个函数,那么现在 就有三个作用域,这样就形成了一个作用域链。

    作用域的特点就是,先在自己的变量范围中查找,如果找不到,就会沿着作用域链往上找。

    18: 一个Ajax建立的过程是怎样的,主要用到哪些状态码

    ajax:在不切换页面的情况下完成异步的HTTP请求

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

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

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

    (4)发送HTTP请求.

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

    (6)使用JavaScript和DOM实现局部刷新.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

    var xmlHttp = new XMLHttpRequest();

    xmlHttp.open(‘GET’,‘demo.php’,‘true’);

    xmlHttp.send()

    xmlHttp.onreadystatechange = function(){

      if(xmlHttp.readyState === 4 & xmlHttp.status === 200){
    
      }
    

    }

    使用promise封装
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24

    function getJSON(url) {
    return new Promise(function(resolve, reject) {
    var XHR = new XMLHttpRequest();
    XHR.open(‘GET’, url, true);
    XHR.send();

        XHR.onreadystatechange = function() { 
            if (XHR.readyState == 4) { 
                if (XHR.status == 200) { 
                    try { 
                        var response = JSON.parse(XHR.responseText); 
                        resolve(response); 
                    } catch (e) { 
                        reject(e); 
                    } 
                } else { 
                    reject(new Error(XHR.statusText)); 
                } 
            } 
        } 
    }) 
    

    }

    getJSON(url).then(res => console.log(res));

    当前状态readystate

    0 代表未初始化。 还没有调用 open 方法
    1 代表正在加载。 open 方法已被调用,但 send 方法还没有被调用
    2 代表已加载完毕。send 已被调用。请求已经开始
    3 代表交互中。服务器正在发送响应
    4 代表完成。响应发送完毕

    常用状态码status

    404 没找到页面(not found)
    403 禁止访问(forbidden)
    500 内部服务器出错(internal service error)
    200 一切正常(ok)
    304 没有被修改(not modified)(服务器返回304状态,表示源文件没有被修改)

    19: 说说你还知道的其他状态码,状态码的存在解决了什么问题

    302/307  临时重定向

    301 永久重定向

    借助状态码,用户可以知道服务器端是正常处理了请求,还是出现了什么错误

    20: 知道语义化吗?说说你理解的语义化,如果是你,平时会怎么做来保证语义化

    像html5的新的标签header,footer,section等就是语义化

    一方面,语义化就是让计算机能够快速的读懂内容,高效的处理信息,可以对搜索引擎更友好。

    另一方面,便于与他人的协作,他人通过读代码就可以理解你网页标签的意义。

    21: 说说content-box和border-box,为什么看起来content-box更合理,但是还是经常使用border-box

    content-box 是W3C的标准盒模型 元素宽度=内容宽度+padding+border

    border-box 是ie的怪异盒模型 他的元素宽度等于内容宽度 内容宽度包含了padding和border

    比如有时候在元素基础上添加内距padding或border会将布局撑破 但是使用border-box就可以轻松完成

    22:介绍一下HTML5的新特性

    新的DOCTYPE声明  <!DOCTYPE html> 
    完全支持css3
    video和audio
    本地存储
    语义化标签
    canvas
    新事件 如ondrag onresize
    

    23:对自己未来的规划是怎样的

    对于刚毕业的人来说,前两年是很重要的,先打好基础,多提升js能力。三至四年在提升JS能力的同时,开始要往多方面发展,前端工程师远远不仅是JS而已。制作一个性能高、交互好、视觉美的页面,需要从前端框架选型、架构设计、构建工具,到后端通信机制、设计与交互、网络和浏览器优化等各方面的知识。一专多长才是前端工程师的终极目标。

    24: 在一个UI李有10个li,实现点击对应的li,输出对应的下标
    1
    2
    3
    4
    5
    6
    7
    8

    var lis = querySelectorAll(‘li’)
    for(var i=0;i<10;i++){
    lis[i].onclick = (function(a) {
    return function() {
    alert(a)
    }
    })(i)
    }

    事件委托

    利用冒泡的原理,把事件加到父级上,触发执行效果。

    1.可以大量节省内存占用,减少事件注册。
    2.可以方便地动态添加和修改元素,不需要因为元素的改动而修改事件绑定。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

    var ul = document.querySelector(‘ul’);
    var list = document.querySelectorAll(‘ul li’);

    ul.addEventListener(‘click’, function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElemnt;

    for(var i = 0, len = list.length; i < len; i++){ 
        if(list[i] == target){ 
            alert(i + "----" + target.innerHTML); 
        } 
    } 
    

    });

    25:实现三个DIV等分排布在一行(考察border-box)

    1.设置border-box width33.3%

    2.flexbox flex:1

    26: 说说你知道JavaScript的内存回收机制

    垃圾回收器会每隔一段时间找出那些不再使用的内存,然后为其释放内存。

    一般使用标记清除方法 当变量进入环境标记为进入环境,离开环境标记为离开环境

    还有引用计数方法

    堆栈

    stack为自动分配的内存空间,它由系统自动释放;而heap则是动态分配的内存,大小不定也不会自动释放。

    基本数据类型存放在栈中

    引用类型 存放在堆内存中,首先从栈中获得该对象的地址指针,然后再从堆内存中取得所需的数据

    27函数防抖和函数节流

    函数防抖是指频繁触发的情况下,只有足够的空闲时间,才执行代码一次

    函数防抖的要点,也是需要一个setTimeout来辅助实现。延迟执行需要跑的代码。
    如果方法多次触发,则把上次记录的延迟执行代码用clearTimeout清掉,重新开始。
    如果计时完毕,没有方法进来访问触发,则执行代码。
    1
    2
    3
    4
    5
    6
    7
    8

    //函数防抖
    var timer = false
    document.getElementById(“debounce”).onScroll = function() {
    clearTimeout(timer)
    timer = setTimeout(function(){
    console.log(‘函数防抖’)
    }, 300)
    }

    函数节流是指一定时间内js方法只跑一次

    函数节流的要点是,声明一个变量当标志位,记录当前代码是否在执行。
    如果空闲,则可以正常触发方法执行。
    如果代码正在执行,则取消这次方法执行,直接return。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    //函数节流
    var canScroll = true;
    document.getElementById(‘throttle’).onScroll = function() {
    if (!canScroll) {
    return;
    }
    canScroll = false;
    setTimeout(function(){
    console.log(‘函数节流’);
    canScroll = true;
    },300)
    }

    28:编程实现输出一个数组中第N大的数据

    29.实现两栏布局有哪些方法
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

    *{margin:0; padding: 0;}
    html,body{
    height: 100%;/高度百分百显示/
    }
    #left{
    width: 300px;
    height: 100%;
    background-color: #ccc;
    float: left;
    }
    #right{
    height: 100%;
    margin-left: 300px;
    background-color: #eee;

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15

    *{margin:0; padding: 0;}
    html,body{
    height: 100%;/高度百分百显示/
    }
    #left{
    width: 300px;
    height: 100%;
    background-color: #ccc;
    float: left;
    }
    #right{
    height: 100%;
    overflow:hidden;
    background-color: #eee;
    }

    第二种方法,我利用的是创建一个新的BFC(块级格式化上下文)来防止文字环绕的原理来实现的。BFC就是一个相对独立的布局环境,它内部元素的布局不受外面布局的影响。它可以通过以下任何一种方式来创建:
    float 的值不为 none
    position 的值不为 static 或者 relative
    display 的值为 table-cell , table-caption , inline-block , flex , 或者 inline-flex 中的其中一个
    overflow 的值不为 visible

    第三种flex布局

    30:设置width的flex元素,flex属性值是多少

    flex属性是flex-grow, flex-shrink 和 flex-basis的简写

    flex-grow属性定义项目的放大比例,默认为0

    flex-shrink属性定义了项目的缩小比例,默认为1

    flex-basis属性定义了项目的固定空间

    31get和post有什么不同

    get是从服务器上获取数据,post是向服务器传送数据

    get请求可以将查询字符串参数追加到url的末尾; post请求应该把数据作为请求的主体提交.

    get请求数据有大小限制;post没有

    post比get安全性更高

    32:cookie和session有什么联系和区别

    cookie数据存放在客户的浏览器上,session数据放在服务器上。

    session比cookie更安全

    单个cookie保存的数据不能超过4K,很多浏览器都限制一个站点最多保存20个cookie。

    一般用cookie来存储sessionid

    33:判断链表是否有环

    使用追赶的方法,设定两个指针slow、fast,从头指针开始,每次分别前进1步、2步。如存在环,则两者相遇;如不存在环,fast遇到NULL退出。

    34:输出二叉树的最小深度

    判断左子树或右子树是否为空,若左子树为空,则返回右子树的深度,反之返回左子树的深度,如果都不为空,则返回左子树和右子树深度的最小值。

    35: javaScript中的this是什么,有什么用,它的指向是什么

    全局代码中的this 是指向全局对象

    作为对象的方法调用时指向调用这个函数的对象。

    作为构造函数指向新创建的对象

    使用apply和call设置this

    36写一个快速排序
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19

    var quickSort = function (arr){
    if(arr.lenght <= 1) {
    return arr;
    }

       var left = [];
       var right = [];
       var mid = arr.splice(Math.floor(arr.length/2), 1);
    
       for(var i=0;i<arr.length;i++){
             if(arr[i]<mid) {
                 left.push(arr[i]);
            }
             if(arr[i]>mid) {
                 right.push(arr[i]);
            }
          return quickSort(left).concat(mid, quickSort(right));
     }  
    

    }

    37怎么实现从一个DIV左上角到右下角的移动,有哪些方法,都怎么实现

    改变left值为window宽度-div宽度 top值为window高度-div高度

    jquery的animate方法

    css3的transition

    38: 简单介绍一下promise,他解决了什么问题

    Promise,就是一个对象,用来传递异步操作的消息。有三种状态:Pending(进行中)、Resolved(已完成,又称 Fulfilled)和 Rejected(已失败)。

    有了 Promise 对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。

    39: 写一个组合继承
    1
    2
    3
    4
    5
    6
    7
    8
    9

    var Super = function(name){
    this.name = name;
    }
    Super.prototype.func1 = function() { console.log(‘func1’); }
    var Sub = function(name,age) {
    Super.call(this, name);
    this.age = age;
    }
    Sub.prototype = new Super();

    40:深拷贝方案有哪些,手写一个深拷贝
    1
    2
    3
    4
    5
    6
    7

    var clone = function(v) {
    var o = v.constructor === Array ? [] : {};
    for (var i in v) {
    o[i] = typeof v[i] === “Object” ? clone(v[i]) : v[i];
    }
    return o;
    }

    41:判断数组有哪些方法

    a instanceof Array
    a.constructor == Array
    Object.prototype.toString.call(a) == [Object Array]

    42: 跨域通信有哪些方案,各有什么不同

    JSONP:由于同源策略的限制,XmlHttpRequest只允许请求当前源,script标签没有同源限制

    通过动态

    简述原理与过程:首先在客户端注册一个callback, 然后把callback的名字传给服务器。此时,服务器先生成一个function , function 名字就是传递上来的参数。最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

    74.setTimeout,setInterval,requestAnimationFrame之间的区别

    setInterval如果函数执行的时间很长的话,第二次的函数会放到队列中,等函数执行完再执行第二次,导致时间间隔发生错误。

    而settimeout一定是在这个时间定时结束之后,它才会执行

    requestAnimationFrame是为了做动画专用的一个方法,这种方法对于dom节点的操作会比较频繁。

    75.webpack常用到哪些功能

    设置入口 设置输出目 设置loader extract-text-webpack-plugin将css从js代码中抽出并合并 处理图片文字等功能 解析jsx解析bable

    76.介绍sass

    &定义变量 css嵌套 允许在代码中使用算式 支持if判断for循环

    77.websocket和ajax轮询

    Websocket是HTML5中提出的新的协议,注意,这里是协议,可以实现客户端与服务器端的通信,实现服务器的推送功能。

    其优点就是,只要建立一次连接,就可以连续不断的得到服务器推送的消息,节省带宽和服务器端的压力。

    ajax轮询模拟长连接就是每个一段时间(0.5s)就向服务器发起ajax请求,查询服务器端是否有数据更新

    其缺点显而易见,每次都要建立HTTP连接,即使需要传输的数据非常少,所以这样很浪费带宽

    78.tansition和margin的百分比根据什么计算

    transition是相对于自身,margin相对于参照物

    79.冒泡排序、快速排序、去重、查找字符串最多值
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

    //冒泡排序
    var bubbleSort = function(arr) {
    for (var i = 0; i < arr.length-1; i++) {
    for (var j = i+1; j < arr.length; j++) {
    if (arr[i]>arr[j]) {
    var temp = arr[i];
    arr[i] = arr[j];
    arr[j] = temp;
    }
    }
    }
    return arr;
    };

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19

    //快速排序
    var quickSort = function(arr) {
    if (arr.length <= 1) {
    return arr;
    }
    var len = arr.length;
    var midIndex = Math.floor(len/2);
    var mid = arr.splice(midIndex,1);
    var left = [];
    var right = [];
    for (var i = 0; i < arr.length; i++) {
    if (arr[i] < mid) {
    left.push(arr[i]);
    } else {
    right.push(arr[i]);
    }
    }
    return quickSort(left).concat(mid,quickSort(right))
    }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    // 去重
    var distinct = function(arr) {
    var map = {};
    var result = [];
    for (var i = 0; i < arr.length; i++) {
    if (!map[arr[i]]) {
    map[arr[i]] = true;
    result.push(arr[i]);
    }
    }
    return result;
    }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21

    //查找字符串中最多的值
    var search = function(str) {
    var json = {};
    var max = 0;
    var char;
    for (var i = 0; i < str.length; i++) {
    if (!json[str[i]]) {
    json[str[i]]=1;
    } else {
    json[str[i]]++;
    }
    }
    console.log(json);
    for(var i in json){
    if(json[i]>max){
    max = json[i];
    char = i;
    }
    }
    console.log(max, char);
    }

    80.函数组合继承

    原型继承、构造函数继承、call aplly继承
    1
    2
    3
    4
    5
    6
    7
    8
    9

    var Super = function(name){
    this.name = name;
    }
    Super.prototype.func1 = function() { console.log(‘func1’); }
    var Sub = function(name,age) {
    Super.call(this, name);
    this.age = age;
    }
    Sub.prototype = new Super();

    81.事件绑定
    1
    2
    3
    4
    5
    6
    7
    8
    9

    var addEvent = function(e, type, handler, capture ) {
    if (e.addEventListener) {
    e.addEventListener(type, handler, capture);
    } else if (e.attachEvent) {
    e.attachEvent(‘on’+type, handler);
    } else {
    e[‘on’+type] = handler;
    }
    }

    82.浅克隆和深度克隆

    1
    2
    3
    4
    5
    6
    7
    8
    9

    //浅克隆
    function extendCopy§ {
        var c = {};
        for (var i in p) {
          c[i] = p[i];
        }
        c.uber = p;
        return c;
     }
    1

    1
    2
    3
    4
    5
    6
    7
    8

    //深度克隆
    var clone = function(v) {
    var o = v.constructor === Array ? [] : {};
    for (var i in v) {
    o[i] = typeof v[i] === “Object” ? clone(v[i]) : v[i];
    }
    return o;
    }

    es6的深度克隆

    通过Object.getPrototypeOf函数得到obj被克隆函数的原型上的属性,然后通过Object.assign实现深度克隆。

    1
    2
    3
    4

    const deepClone=(obj)=>{
    var proto=Object.getPrototypeOf(obj);
    return Object.assign({},Object.create(proto),obj);
    }

    83.实现一个秒针绕一点转动的效果
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    animation: move 60s infinite steps(60);
    /设置旋转的中心点为中间底部/
    transform-origin: center bottom;
    /旋转从0度到360度/
    @keyframes move {
    from {
    transform: rotate(0deg);
    }
    to {
    transform: rotate(360deg);
    }
    }

    84.移动端兼容问题

    IOS移动端click事件300ms的延迟响应

    一些情况下对非可点击元素如(label,span)监听click事件,ios下不会触发,css增加cursor:pointer就搞定了

    85.bootstrap的栅格系统如何实现的

    box-sizing: border-box;
    container row column设置百分比

    85.js基本类型及判断方法

    null, undefined,bool,number,string,object,symbol(es6 独一无二)

    1.typeof()出来的没有null 对象,数组和null typeof(x) = “object”

    2.instanceof() 对象的原型是否在对象的原型链上

    如下:判断Person的原型是否在p的原型链上
    1
    2
    3

    function Person(){};
    var p =new Person();
    console.log(p instanceof Person);//true

    3.Object.prototype.toString.call()

    每种对象对toString都进行了改写,只有Object.prototype.toString.call(obj)可以进行类型判断
    1
    2
    3
    4

    var a=new Number(12);
    var toString=Object.prototype.toString;
    console.log(toString.call(a));//’[object Number]’’
    console.log(a.toString());//‘12’

    86 JavaScript为什么是单线程?eventloop

    JavaScript的单线程,与它的用途有关。作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。

    比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准?

    异步执行:

    (1)所有同步任务都在主线程上执行,形成一个执行栈(execution context stack)。

    (2)主线程之外,还存在一个"任务队列"(task queue)。只要异步任务有了运行结果,就在"任务队列"之中放置一个事件。

    (3)一旦"执行栈"中的所有同步任务执行完毕,系统就会读取"任务队列",看看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。

    (4)主线程不断重复上面的第三步。

    主线程从”任务队列”中读取事件,这个过程是循环不断的,所以整个的这种运行机制又称为Event Loop(事件循环)。

    node里的process.nextTick指定的回调函数是在本次”事件循环”触发,而setImmediate指定的是在下次”事件循环”触发,所以很显然,前者总是比后者发生得早,而且执行效率也高。

    87 http http2 https

    http(超文本传输协议)是一种常用于应用层的协议,它是基于文本传输内容。

    https可以称为http安全版,主要是http下增加了SSL(安全套接层)或者TSL(传输层安全),在SSL或TSL在传输层对数据进行了加密处理。

    http/2(超文本传输协议第二版),他对http进行了一些升级改造

    新的二进制格式
    多路复用
    header压缩
    支持server push
    

    87 枚举

    88 meta属性

    1.name 网页描述

    a.keword

    b.description

    c.viewport

    2.http-equiv http相关描述

    a.content-type

    b.cache-control

    c.expires

    89 react 相关

    react router:

    实现URL与UI界面的同步。其中在react-router中,URL对应Location对象,而UI是由react components来决定的,这样就转变成location与components之间的同步问题。

    react事件:

    React并不是将click事件绑在该div的真实DOM上,而是在document处监听所有支持的事件,当事件发生并冒泡至document处时,React将事件内容封装并交由真正的处理函数运行。

    90 js css加载顺序

    js全阻塞,css半阻塞

    JS 会阻塞后续 DOM 解析以及其它资源(如 CSS,JS 或图片资源)的加载。
    CSS 不会阻塞后续 DOM 结构的解析,不会阻塞其它资源(如图片)的加载,但是会阻塞 JS 文件的加载。
    现代浏览器很聪明,会进行 prefetch 优化,浏览器在获得 html 文档之后会对页面上引用的资源进行提前下载。
    

    js为什么阻塞?

    JS 运行在浏览器中,是单线程的,每个 window 一个 JS 线程,所以当然会阻塞后续 DOM 树的解析咯。
    JS 有可能会修改 DOM 结构,给 DOM 添加样式等等,所以这就意味着在当前 JS 加载执行完成前,后续资源的加载可能是没有意义的
    

    css为什么阻塞js?

    JS 代码在执行前,浏览器必须保证在 JS 之前的所有 CSS 样式都解析完成,不然不就乱套了,前面的 CSS 样式可能会覆盖 JS 文件中定义的元素样式,这是 CSS 阻塞后续 JS 执行的根本原因。

    defer,async?

    JS 会阻塞后续 DOM 解析以及其它资源(如 CSS,JS 或图片资源)的加载,这是在没有考虑到 defer, async 的情况下。

    由于现代浏览器都存在 prefetch,所以 defer, async 可能并没有太多的用途,可以作为了解扩展知识,仅仅将脚本文件放到 body 底部就可以起到很不错的优化效果。
    defer 和 async 都是异步加载脚本文件,defer异步加载,最后执行。
    慎用 async,因为它完全不考虑依赖关系,只要下载完后就加载,不考虑此时页面样式先后的加载顺序,不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的,最典型的例子:Google Analytics。
    耗时较长的脚本代码可以使用 defer 来推迟执行。
    
    1. 三次握手四次挥手

    第一次握手:客户端请求与服务端建立连接。第二次:服务端返回确认信息。第三次:客户端收到。

    客户:喂?你在吗?我想跟你聊会儿天儿!(发送SYN请求同步报文)

    服务:好的,我听着呢(发送SYN请求同步报文,意思是说,咱俩同步着呢),你说吧!(发送ACK确认报文,即可以说了)

    客户:好的!(发送ACK确认报文,开始吐槽XXXX)

    第一次挥手:客户端传完了,想要断开连接。第二次:服务端收到,半关闭状态。第三次:服务端没信息发了,发送结束报文。第四次:客户端确认,关闭。

    然后客户有事儿要挂电话了,又有了下面一段对话,即四次挥手:

    客户:我有事儿要挂电话了!(发送Fin结束报文,1次挥手)

    服务:好吧(发送ACK确认报文,2次挥手),对了,还有个事儿要跟你说!

    服务:好了,就这些了,挂了吧!(发送Fin结束报文,3次挥手)

    客户:行,挂了吧!(发送ACK确认报文,4次挥手)

    服务挂断电话…

    2MSL后…

    客户:喂,你还在吗?

    啪!(这才断开连接)

    为什么四次挥手?

    当被动方收到主动方的FIN报文通知时,它仅仅表示主动方没有数据再发送给被动方了。

    但未必被动方所有的数据都完整的发送给了主动方,所以被动方不会马上关闭SOCKET,它可能还需要发送一些数据给主动方后,

    展开全文
  • 第二,目前市面上的面试题不是答案不准确就是内容覆盖面太窄,所以提供一份经典而又准确的面试题是非常有必要的;第三,本文会对部分面试题提供详细解读和代码案例,让读者知其然并知其所以然,从而学到更多的知识。...
  • web前端面试题总结

    2019-11-18 14:15:53
    伯乐在线 infoq 掘金 简书 慕课网 13:Node,Koa用的怎么样 koa是一个相对于express来说,更小,更健壮,更富表现力的Web框架,不用写回调 koa是从第一个中间件开始执行,遇到next 进入下一个中间件,一直执行到...
  • Js面试总结

    千次阅读 2018-12-27 10:58:59
    技术面试: ****JS原生基础 ****兼容性问题 ****前后端架构 ****HTTP基础 ****ES5/ES6 ****性能优化问题 ****webpack原理 2017春招 https://segmentfault.com/a/1190000010631325?_ea=2359607 ...
  • web前端常见面试题总结 1.为何选择前端这个方向? 对前端很感兴趣,之前也接触过其他语言,但是直到接触前端才发现真的有兴趣做下去,兴趣是一个人最好的老师。 前端很有前途,像现在node.js,rn,微信小程序这类工具...
  • 前端面试题总结

    2018-03-31 02:57:00
    # 前端面试题总结 基本信息 为何选择前端这个方向? 第一的话对互联网开发方面的东西很感兴趣,之前也接触过其他语言,但是直到接触到前端才发现很有兴趣做下去,兴趣是一个人最好的老师。 第二的话前端的发展...
  • HTML5面试题总结

    千次阅读 2019-04-10 17:33:03
    HTML5面试题 一、 Doctype的作用? 严格模式和混杂模式的区分,以及如何触发这2种模式? 声明位于文档中的最前面,处于 标签之前。告知浏览器的解析器,用什么文档类型 规范来解析这个文档。 DOCTYPE不存在或格式不...
  • 总结经验,分析问题发生的原因,避免下次出现同样问题。 二八定理 80%的缺陷出现在 20%的模块。 如何跟踪缺陷 当发现缺陷后,我们要在禅道上提交问题单给开发,并每隔一段时间(间隔一个小时,或两个小时都可以)去...
  • 今年的面试基本上都不会线下面试,都是采取线上电话/视频的形式来进行,今天我就总结一下,分享一下自己所遇到的一些面试题,希望大家在这次春招中能够拿到满意的offer!毕竟自己当初也是看了很多师兄姐的面经,算是...
  • 第二的话前端很有前途,像现在nodejs,rn,微信小程序这类工具和框架可以让前端进行后端和移动开发,所以我觉得前端的前途会更多一点。 理解: 首先前端工程师最核心的技能还是:Html、CSS、JS。前端负责的是用户...
  • 2017前端面试题及答案总结(一)

    千次阅读 2017-09-07 19:00:42
    为何选择前端这个方向和对前端的理解为什么: 第一的话就是对前端很感兴趣,之前也接触过其他的语言,但是直到接触到前端才发现真的有兴趣做下去,兴趣是一个人最好的老师, 第二的话前端很有前途,像现在nodejs,rn...
  • 前端面试题总结 1:为何选择前端这个方向和对前端的理解 为什么: 第一的话就是对前端很感兴趣,之前也接触过其他的语言,但是直到接触到前端才发现真的有兴趣做下去,兴趣是一个人最好的老师, 第二的话前端很...
  • 前端面试题大纲

    2020-06-12 18:49:29
    1、id选择器? #id /id选择器 #号/ #d1 { /将id为d1的标签内部文本内容改成绿色/ color: green;... 结果:李四 还有更多想了解的朋友可以去 含光丶 - 简书 看一下我之前发的文章,希望能够对你们有所帮助。
  • 1、2017前端面试题及答案总结 |掘金技术征文 "金三银四,金九银十",用来形容求职最好的几个月。但是随着行业的饱和,初中级前端er就业形势不容乐观。 行业状态不可控,我们能做的当然只是让自己变得更加具有竞争力...
  • HTML5面试题

    万次阅读 2019-04-10 17:39:26
    HTML5面试题 一、 Doctype的作用? 严格模式和混杂模式的区分,以及如何触发这2种模式? 声明位于文档中的最前面,处于 标签之前。告知浏览器的解析器,用什么文档类型 规范来解析这个文档。 DOCTYPE不存在或格式不...
  • 前端2020面试题195道

    千次阅读 2020-01-13 17:04:10
    HTML5面试题 一、 Doctype的作用? 严格模式和混杂模式的区分,以及如何触发这2种模式? <!DOCTYPE> 声明位于文档中的最前面,处于 标签之前。告知浏览器的解析器,用什么文档类型 规范来解析这个文档。 DOCTYPE...
  • 前端面试题整理

    2018-11-23 14:37:17
    面试经验谈--来自知乎芋头Live 目录 $HTML, HTTP,web综合问题 1、前端需要注意哪些SEO 2、&lt;img&gt;的title和alt有什么区别 3、HTTP的几种请求方法用途 4、从浏览器地址栏输入url到显示页面的步骤...
  •  由上面可以总结:  (a)全透明的png8可以在任一浏览器正常显示(就像gif一样)。半透明的png8在除了ie6及其以下的浏览器下错误的显示成全透明,其它浏览器都能正常显示半透明。这个bug并不需要特殊对待,因为在...
  • 前端面试题(一)

    2020-04-18 16:11:39
    八、算法: 有一个长度为n一1的数组,包含1一n中不重复的乱序的数,求寻找范围内不在数组中的数,考虑空间占用,性能优化,溢出等情况,至少写两个算法 当n不太大时,可以考虑求和。先算出1~n的所有数的和,然后...

空空如也

空空如也

1 2 3 4 5
收藏数 91
精华内容 36
关键字:

nodejs面试题总结简书