GithubHelp home page GithubHelp logo

interview's Introduction

前端面试笔记

行列元素和块级元素区别

行内元素 与其他行内元素并排 不能设置宽高,默认的宽度就是文字的宽度

块级元素一定的范围,可以设置宽高

Object.assign方法

用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)

Null和Undefined的区别

1、undefined  表示"缺少值",就是此处应该有一个值,但是还没有定义  典型用法是:   (1)变量被声明了,但没有赋值时,就等于undefined。   (2) 调用函数时,应该提供的参数没有提供,该参数等于undefined。   (3)对象没有赋值的属性,该属性的值为undefined。   (4)函数没有返回值时,默认返回undefined。

2、null  表示"没有对象",即该处不应该有值。  典型用法是:   (1) 作为函数的参数,表示该函数的参数不是对象。   (2) 作为对象原型链的终点

固定宽高垂直居中

position: absolute;
left: 50%;
top: 50%;
width:200px;
height:100px;
margin-left:-100px;
margin-top:-50px;

对前端性能优化有什么了解?

1.代码层面:规范代码,少用闭包,代码压缩 2.网络请求层面:减少网络请求次数,合理配置http缓存,使用内容分发网页cdn,减少cookies传输

react的生命周期分为三个阶段:

Mounting 挂载 render 渲染 Updating 更新 Unmounting 卸载

redux中间件

在action 和reducer之间做一些处理

postion(定位)

absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative 生成相对定位的元素,相对于其正常位置进行定位。

因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

static 默/认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 inherit 规定应该从父元素继承 position 属性的值。

闭包

函数内定义的函数可以调用外部函数的变量

好处:

1.希望一个变量长期存储在内存中。 2.避免全局变量的污染。 3.私有成员的存在。

缺点:

1.常驻内存,增加内存使用量。 2.使用不当会很容易造成内存泄露。

JavaScript里arguments究竟是什么?

arguments虽然有一些数组的性质,但其并非真正的数组,只是一个类数组对象。 Array.prototype.slice.apply(arguments)

事件委托

事件委托就是利用事件冒泡,指定一个事件处理程序,就可以管理某一类型的所有事件,事件冒泡就是从最深的节点开始逐步向上传播的事件

react 子父组件通信

1,父组件可以向子组件传递props,props中带有初始化子组件的数据,还有回调函数 2,子组件的state发生变化时,在子组件的事件处理函数中,手动触发父函数传递进来的回调函数,同时时将子组件的数据传递回去

stateprops 区别是啥

state 是组件自己管理数据,控制自己的状态,可变; props 是外部传入的数据参数,不可变 ; 没有state的叫做无状态组件,有state的叫做有状态组件; 多用 props,少用 state,也就是多写无状态组件。

DOCTYPE的作用

主要作用是告诉浏览器的解析器使用哪种HTML规范或者XHTML规范来解析页面。

v-if和v-show

相同点:v-if与v-show都可以动态控制dom元素显示隐藏 不同点:v-if显示隐藏是将dom元素整个添加或删除,而v-show隐藏则是为该元素添加css--display:none,dom元素还在。

es6新特性

letconst let 块级作用域 const定义常量

箭头函数 ES6中的函数定义不再使用关键字function(),而是利用了()=>来进行定义,默认定义了this

for of循环 对带有迭代器的进行遍历

async、await   使用 async/await, 搭配promise,可以通过编写形似同步的代码来处理异步流程, 提高代码的简洁性和可读性   async 用于申明一个 function 是异步的,而 await 用于等待一个异步方法执行完成

... 展开运算符

redux

首先由view dispatch拦截action,然后执行对应reducer并更新到store中,最终views会根据store数据的改变执行界面的刷新渲染操作。

promise

对象的状态不受外界影响,promise对象代表一个异步操作,有三种状态,pending(进行中)、fulfilled(已成功)、rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态, Promise 对象的 then 方法接受两个参数: promise.all

em

自身fontsize

原型原型链

每一个构造函数都拥有一个prototype属性,这个属性指向一个对象,也就是原型对象。当使用这个构造函数创建实例的时候,prototype属性指向的原型对象就成为实例的原型对象。 原型对象默认拥有一个constructor属性,指向指向它的那个构造函数(也就是说构造函数和原型对象是互相指向的关系)。 每个对象都拥有一个隐藏的属性[[prototype]],指向它的原型对象,这个属性可以通过

Object.getPrototypeOf(obj) 或 obj.proto 来访问。 实际上,构造函数的prototype属性与它创建的实例对象的[[prototype]]属性指向的是同一个对象,即 对象.proto === 函数.prototype 。 如上文所述,原型对象就是用来存放实例**有的那部分属性。 在JavaScript中,所有的对象都是由它的原型对象继承而来,反之,所有的对象都可以作为原型对象存在。 访问对象的属性时,JavaScript会首先在对象自身的属性内查找,若没有找到,则会跳转到该对象的原型对象中查找。

ie低版本兼容bug

1.opacity 不识别 2.双边距问题 3.最小高度bug

判断一个变量是数组还是对象

Object.prototype.toString.call()方法可以精准判断变量类型

html5的新特性

1.添加了用于媒介回放的

CSS3的新特性

1.媒体查询 2.选择器 3.圆角

浏览器性能优化

  1. 浏览器的回流和重绘:

    回流必将引起重绘,重绘不一定会引起回流。

  2. 如何避免回流重绘:

css:

避免使用 table 布局。

尽可能在 DOM 树的最末端改变 class。

避免设置多层内联样式。

将动画效果应用到 position 属性为 absolute 或 fixed 的元素上。

避免使用 CSS 表达式(例如:calc())。

js:

1.避免频繁操作样式,最好一次性重写 style 属性,或者将样式列表定义为 class 并一次性更改 class 属性。
2.避免频繁操作 DOM,创建一个 documentFragment,在它上面应用所有 DOM 操作,最后再把它添加到文档中。
3.也可以先为元素设置 display: none,操作结束后再把它显示出来。因为在 display 属性为 none 的元素上进行的 DOM 操作不会引发回流和重绘。
4.避免频繁读取会引发回流/重绘的属性,如果确实需要多次使用,就用一个变量缓存起来。
对具有复杂动画的元素使用绝对定位,使它脱离文档流,否则会引起父元素及后续元素频繁回流。

防抖和节流:

防抖:触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间 通过定时器,让一秒钟内只发生一次调用 缺点:如果事件在规定的时间间隔内被不断的触发,则调用方法会被不断的延迟

function debounce(func, wait) {
    var timeout;
    return function () {
        clearTimeout(timeout)
        timeout = setTimeout(func, wait);
    }
}

节流: 高频事件触发,但在n秒内只会执行一次,所以节流会稀释函数的执行频率

双向绑定

1.Object.defineProperty 的第一个缺陷,无法监听数组变化。 然而Vue的文档提到了Vue是可以检测到数组变化的,但是只有以下八种方法,vm.items[indexOfItem] = newValue这种是无法检测的。 的第二个缺陷,只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历,如果属性值也是对象那么需要深度遍历,显然能劫持一个完整的对象是更好的选择 2.proxy 通过调用proxy 方法进行,可以直接监听对象而非属性

函数柯里化

在一个函数中,首先填充几个参数,然后再返回一个新的函数的技术,称为函数的柯里化。通常可用于在不侵入函数的前提下,为函数 预置通用参数,供多次重复调用。

网络相关

跨域

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

从输入URL到页面加载发生了什么?

1、浏览器的地址栏输入URL并按下回车。 2、浏览器查找当前URL是否存在缓存,并比较缓存是否过期。 3、DNS解析URL对应的IP。 4、根据IP建立TCP连接(三次握手)。 5、HTTP发起请求。 6、服务器处理请求,浏览器接收HTTP响应。 7、渲染页面,构建DOM树。 8、关闭TCP连接(四次挥手)。

tcp 和 udp 的区别

TCP(Transmission Control Protocol,传输控制协议)提供的是面向连接,可靠的字节流服务。即客户和服务器交换数据前,必须现在双方之间建立一个TCP连接,之后才能传输数据。并且提供超时重发,丢弃重复数据,检验数据,流量控制等功能,保证数据能从一端传到另一端。

UDP(User Data Protocol,用户数据报协议)是一个简单的面向数据报的运输层协议。它不提供可靠性,只是把应用程序传给IP层的数据报发送出去,但是不能保证它们能到达目的地。由于UDP在传输数据报前不用再客户和服务器之间建立一个连接,且没有超时重发等机制,所以传输速度很快。

http和https的区别

  • Http:超文本传输协议(Http,HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。设计Http最初的目的是为了提供一种发布和接收HTML页面的方法。它可以使浏览器更加高效。Http协议是以明文方式发送信息的,如果黑客截取了Web浏览器和服务器之间的传输报文,就可以直接获得其中的信息。

  • Https:是以安全为目标的Http通道,是Http的安全版。Https的安全基础是SSL。SSL协议位于TCP/IP协议与各种应用层协议之间,为数据通讯提供安全支持。SSL协议可分为两层:SSL记录协议(SSL Record Protocol),它建立在可靠的传输协议(如TCP)之上,为高层协议提供数据封装、压缩、加密等基本功能的支持。SSL握手协议(SSL Handshake Protocol),它建立在SSL记录协议之上,用于在实际的数据传输开始前,通讯双方进行身份认证、协商加密算法、交换加密密钥等。

interview's People

Contributors

wlancer1 avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.