面试题(2017~now)

ES6

解构赋值/ 模版字符串 / 箭头函数 / 模块 / 扩展运算符 / 函数默认参数 / Promise/ assign

this

  1. 指向函数的调用者
  2. 没有调用者,普通模式指向window,严格模式指向undefined
  3. 箭头函数本身没有自己的this,导致内部的this就是外层代码块的this。(所以定义时就确定)
  4. call,apply,bind(ES5新增)绑定的,this指的是绑定的对象

原型链

构造函数有一个原型对象,原型对象有一个指向构造函数的指针,实例对象有一个指向原型对象的指针。

实现继承:将子类的原型对象等于父类的实例对象。

浏览器工作原理

(解析HTML构建DOM树 && 解析CSS信息生成样式规则) -> 构建渲染树 -> 布局 -> 绘制

  1. 解析HTML过程中遇到<img>标签请求图片
  2. 构建渲染树会忽略display:none的元素 ,此时才请求css中的背景图,

⚠️整个过程并不是逐步的,而是解析完一部分内容就构建显示一部分内容。

数组方法

  1. shift()
    删除并返回数组的第一个元素

  2. unshift()
    向数组的开头添加一个或更多元素,并返回新的长度。

  3. pop():
    删除并返回数组的最后一个元素

  4. push()
    向数组的末尾添加一个或更多元素,并返回新的长度。

  5. concat()
    连接两个或更多的数组,并返回结果。

  6. splice()
    删除元素,并向数组添加新元素。

  7. reverse()
    颠倒数组中元素的顺序。

  8. sort()
    对数组的元素进行排序

  9. slice()
    从某个已有的数组返回选定的元素

  10. join()
    把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

null和undefined的区别?

  1. typeof 区别
  2. null是一个表示"无"的对象,转为数值时为0;undefined是一个表示"无"的原始值,转为数值时为NaN。
  3. null表示"没有对象",即该处不应该有值。undefined表示"缺少值",就是此处应该有一个值,但是还没有定义。

TCP 三次握手

参考文献

  1. 客户端发送连接请求SYN报文段;

  2. 服务器收到客户端的SYN报文段,并将SYN+ACK报文段发送回客户端

  3. 客户端收到服务器的SYN+ACK报文段,向服务器发送ACK报文段

为什么要三次握手? 为了防止已失效的连接请求报文段突然又传送到了服务端,因而产生错误。

TCP 四次挥手

  1. 主机1(可以使客户端,也可以是服务器端)向主机2发送一个FIN报文段

  2. 主机2收到了主机1发送的FIN报文段,向主机1回一个ACK报文段,

  3. 主机2向主机1发送FIN报文段,请求关闭连接

  4. 主机1收到主机2发送的FIN报文段,向主机2发送ACK报文段,主机2收到主机1的ACK报文段以后,就关闭连接

react组建生命周期

  1. 创建期

    • construct( getInitState, getDefaultProps)
    • componentWillMount
    • render
    • componentDidMount
  2. 存在期:

    • componentWillReceiveProps
    • componentShouldUpdate
    • componentWillupdate
    • render
    • componentDidUpdate
  3. 销毁期:

    • componentWillUnmount

js 内存

执行上下文 -> (变量对象 | 作用域链 | this指向)

变量对象 -> (arguments | function声明 | var声明 )

闭包

闭包就是能够读取其他函数内部变量的函数。通过访问外部变量,一个闭包可以维持(keep alive)这些变量。

跨域

同源策略(协议/域名/端口号)

  1. jsonp

    动态创建script标签,将(回调函数)函数名通过script的src属性传递给服务器-> 服务器接收到回调函数,将数据同函数一起发送给客户端-> 客户端执行该函数

  2. window.name
    一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的

  3. postMessage(H5)
    它允许程序员跨域在两个窗口/frames间发送数据信息,但不是浏览器跟服务器之间交互,而是在两个客户端之间通信。

cookies, sessionStorage 和 localStorage

cookie数据保存在客户端,session数据保存在服务器端。

  1. 是否在所有同源窗口中都是共享 (cookies 和 localStorage )
  2. 大小限制 ( sessionStorage 和 localStorage大 )
  3. 是否过期 (cookies在设定时间内一直有效,sessionStorage在浏览器窗口关闭失效,localStorage永久有效)
  4. 是否自动在请求中携带(cookies)

new 操作符

function Person(){
    this.name = "jack"
}

var p = new Person();

// 等价于
var p = newAlias(Person);

function newAlias(constructor){
    var obj ={};  //创建一个新对象
    obj._proto_ = constructor.prototype; //将新对象的`_proto_`指向构造函数的原型
    Person.call(obj); //将this指向这个新对象
    this = {} //或者
    return obj;  // 返回这个新对象
}

浏览器原理

  1. 渲染引擎
  2. JS引擎。

一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?

  1. 查找浏览器缓存
  2. DNS解析、查找该域名对应的IP地址、重定向(301)、发出第二个GET请求
  3. 进行HTTP协议会话
  4. 客户端发送报头(请求报头)
  5. 服务器回馈报头(响应报头)
  6. html文档开始下载
  7. 文档树建立,根据标记请求所需指定MIME类型的文件
  8. 文件显示

单页面应用的路由实现

  1. ajax请求替换内容
  2. Hash值
  3. h5的history

浏览器缓存|http缓存

缓存状态码: 304

参考

实现思路:

  1. 服务端与客户端约定有效时间,未过期则读缓存

    • Expires / Cache-Control

      Expires规定了缓存失效时间(日期格式),Cache-Control规定了缓存有效时间(秒单位的时长格式)

  2. 有效时间过期后,check服务端文件是否更新,没有更新则读取缓存

    • Last-Modified/If-Modified-Since

      要配合Cache-Control使用,If-Modified-Since的日期会和服务端该文件的最后修改日期对比,如果相同,则从缓存读数据;如果不相同,则返回新文件数据,同时通过响应头更新last-Modified的值(以备下次对比)。

    • ETag/If-None-Match

      ETag的值,是一串可以代表该文件唯一的字符串,通过在请求中发送If-None-Match选项,值即为上次请求后响应头的ETag值,该值在服务端和服务端代表该文件唯一的字符串对比(如果服务端该文件改变了,该值就会变),如果相同,则直接读取缓存,如果不相同,下载正确的数据,更新ETag值。

http 和 HTTPs 的脚本能相互加载吗

http能加载HTTPs的脚本
HTTPs不能加载http的脚本,会报“不安全”的错误

cookie作用域

  1. 当前域名或者父域名下的Cookie;
  2. 当前路径或父路径下的Cookie。
    要满足以上两个条件的Cookie才会被提交

网站优化

  1. CDN加速
    实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。
  2. HTTP缓存
  3. 静态资源设置多域名
    http1.0/1.1 支持同时发多个请求,并发请求多个资源当然比一个一个的请求快,可是在同一个域名下,浏览器并发请求的数量是有限制的(chrome为6个),如果先要突破限制,就只能使用不同域名来请求资源。
  4. 开启GZip

react通信:

  1. 父元素到子元素
    直接通过props传递。
  2. 子元素到父元素
    子元素通过调用父元素传递过来的函数来修改父元素状态。
  3. 兄弟元素
    上面俩者的结合,子元素通过调用父元素传递过来的函数来修改父元素状态,父元素状态修改之后,另外一个子元素的this.props会发生变化。

客户端/服务端 清除缓存

  1. 客户端
    • meta方法,设置不缓存
      <META HTTP-EQUIV="pragma" CONTENT="no-cache"> 
      <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"> 
      <META HTTP-EQUIV="expires" CONTENT="0">
      
    • ajax请求服务器最新文件,并加上请求头If-Modified-Since和Cache-Control
    • 版本号

webview与H5之间的通信

react setState后发生了什么

  1. React 会将传入的参数对象与组件当前的状态合并;
  2. 根据新的状态构建 React 元素树,并且计算出新的树与老树的节点差异;
  3. 根据差异对界面进行最小化重渲染。

有赞面试总结

  1. 如何创建私有作用域,及私有变量
  2. 任务队列 Event Loop
  3. this.xx在原型链中取值
  4. 实现继承
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,835评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,598评论 1 295
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,569评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,159评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,533评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,710评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,923评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,674评论 0 203
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,421评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,622评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,115评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,428评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,114评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,097评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,875评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,753评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,649评论 2 271

推荐阅读更多精彩内容