interview

lle_genius
205 阅读12分钟

  1. 页面布局 三栏布局 两栏布局： float position:absolute flex display:table display：grid

  2. 盒模型：content padding border margin 标准模型（content 默认） ie模型（content padding border） 样式：内联（Dom） 嵌入（header） 外部样式表link标签 导入@import获取盒模型对应宽高：dom.style.width只能取内联的宽，dom.currentStyle.width/height 能获取渲染后的宽高 但 只有IE兼容，window.getComputedStyle(dom).width/height 兼容性更好

  3. BFC：创建方式：overflow：hidden float不为none position不是static/reactive display跟table相关的几个。 特性：1.垂直方向边距重叠（父子、兄弟）-- BFC可打破重叠  2.BFC区域不会有浮动元素重叠 3.独立的容器 4.计算BFC高度浮动元素也会参与计算

  4. DOM事件：DOM事件级别：DOM0即element.onclick() DOM2加了addEventListener DOM3增加了很多事件类型。

  5. DOM事件模型：捕获冒泡，事件传播三阶段（点击 <td>，事件首先通过祖先链向下到达元素（捕获阶段），然后到达目标（目标阶段），最后上升（冒泡阶段），在途中调用处理程序。捕获阶段调用事件程序用的少，只需capture 选项设置为 true，elem.addEventListener(..., true)，capture 选项有两个可能的值：如果为 false（默认值），则在冒泡阶段设置处理程序，如果为 true，则在捕获阶段设置处理程序。zh.javascript.info/bubbling-an…

  6. Event对象：阻止事件冒泡应该叫阻止传播：event.stopPropagation()，event.preventDefault() stopImmediatePropagation()阻止监听同一事件的其他事件监听器被调用 event.currentTarget event.target

  7. 自定义事件 var event = new Event('XXX')  element.addEventListener('XXX',()=>{}),使用 element.dispatchEvent(event) 事件触发,也可以使用CustomEvent创建自定义事件，相较与Event可以添加参数（‘XXX’，prama1）

  8. HTTP协议（特点：无连接即连接一次就断掉、无状态即这一次请求和上一次请求是没有任何关系的） 报文组成包括请求报文和响应报文：请求行（页面地址、http方法、协议、版本）请求头（key:value）空行请求体、状态行响应头空行响应体。请求 GET POST PUT DELETE HEAD。
    post、get区别：get通过URL传递参数，参数长度有限制，并被浏览器缓存，post的参数放请求体中更安全。400客户端语法 401未授权 404资源不存在。持久连接（Keep Alive HTTP1.1是支持持久连接的，避免重新建立连接，普通模式的HTTp是无连接的）、管线化建立在持久连接的基础上，只有get跟head可以使用，原本的持久连接是请求1-》响应1-》请求2-》响应2.... 管线化就变成了：请求1 请求2-》响应1 响应2

  9. 面向对象：创建对象几种方法：字面量等同于new Object()、使用构造函数/类 function/class X().. new X()、Object.create({...})创建的对象把参数放在原型对象;

  10. 继承：1借助构造函数实现继承Parent.call(this)，部分继承！parent原型链上的东西并没有被继承 .2.借助原型链实现继承Child.prototype=new Parent(),缺点原型对象指向一个new对像，被多个实例对象共用时，改了属性会一起变动 3.组合方式 1+2 Child.prototype=Object.create(Parent.prototype) 创建一个中间变量避免共用空间，Child.prototype.construstor=Child 纠正构造函数

  11. 原型链就是指从一个实例对象往上找构造这个实例的相关联的对象，然后这个相关联对象再往上找，它又有创造它的上一级的原型对象，以此类推，层层向上直到一个对象的原型对象为 null,程序通过prototype属性与-proto-向上寻找，原型链上的方法和属性都是被实例所共享的，节省内存空间。
    instanceOf方法的原理就是判断实例._proto_===构造函数.prototype,往上走处在原型链上的构造函数都是返回true，用constructor来判断更严谨obj._proto_.constructor===X ；

typeOf null;//返回Object js的bug 跟instanceOf（操作符返回bool）不同它是操作符返回类型字符串![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3ca7d76268bb4b77ad771d1e192684a2~tplv-k3u1fbpfcp-watermark.image)

  1. call() 使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数、apply() 用数组表示参数

  2. 前后端通信：同源策略：协议域名端口。通信方式：ajax(同源策略下的通信方式) websocket（不受同源策略控制） CORS（支持跨域也支持同源）

  3. ajax老版的ie不支持，创建ajax：

    var xhr = XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP') //1.创建XMLHttpRequest对象 xhr.open(type,url,true) //2.建立一个请求type：请求方法 true表示异步 xhr.send(null);// 3.发送请求 xhr.onload =()=>{ //4.获取异步调用返回的数据 var res =xhr.responseText }

  4. 跨域通信的几种方式:
    JSONP(在很早以前一直用的，利用script 标签的异步加载，把请求写在src里面，关键在于服务端要在返回的数据外层包裹一个客户端已经定义好的函数) Hash(url地址中#后面的东西，hash变动页面不会刷新) postMessage（h5新增的，直接调用API，message事件获取返回信息） websocket（不受同源，直接new websocket('wss://.....')wss表示加密，ws非加密） CORS（支持跨域通信的ajax,浏览器会在请求头中origin允许ajax，ajax新加的fetch，在里面去配置）
    Q1：webpack没有配置跨域 竟然没报错是什么原因？---使用的CORS，只需要后端配置access-control-allow-origin:*，浏览器在发送请求时，检测到跨域时，会自动加上一个额外的 Origin 头部，前端不用做任何操作即可访问
    Q2：配置pathrewrite？？---通常是因为API对应了多个服务器域名，用作区分匹配，匹配完之后再改回来，如果没有做区分可以不加pathrewrite
    Q3: get请求—带#号是什么意思？？—获取到资源文件
    Q4:'/api': 'http://localhost:3000'表示----'/api',表示如果API中有这个字符串，会被代理到请求 http://localhost:3000/api/xxx，target表示需要跨域的地址，设置target后，devserver会弄一个代理服务器去模拟浏览器发送请求。如果target是个域名，需要设置changeOrigin:true，否则会代理失败;如果要设置支持https协议，设置secure:false，不检查安全问题 axios: url:'/assess/xxx',baseUrl:'/api',baseUrl自动加在url前面除非url是个绝对URL，假设你vue-cli起了一个开发环境，地址为http://localhost:8080，那么最终请求地址就是http://localhost:8080/api/assess/xxx

  5. 前端安全：
    CSRF跨站请求伪造：网站B 引诱用户点击一个连接 从而去请求用户登陆过的网站A的接口，浏览器会自动上传url匹配的cookie；解决方法：Token验证（用户登陆系统还会获取一个token需手动上传token，浏览器无法自动）、reffer验证（判断请求站点来源）、隐藏令牌（跟token验证差不多）。
    XSS（跨站脚本攻击）:采用合法渠道像页面注入脚本攻击，恶意代码未经过滤，与网站正常的代码混在一起，通常出现在文本的输入，解决：通过前后端设置过滤，让插入的js不可执行，进行HTML转义等等。
    为什么jwt同时需要access_token refresh_token,等access_token过期后再用refresh_token去刷新它：因为为了防止access_token泄漏，所以把它的时间设置很短！

  6. 浏览器渲染机制：DOCTYPE：DTD告诉l浏览器是什么文档类型（html/xml）,DOCType声明就是告诉浏览器当前使用的是哪个DTD。
    浏览器渲染过程：解析HTML得到HTML树，解析CSS得到CSSOM树->将两者结合得到render树->结合layout（计算每个节点的位置、宽高）---浏览器就可以开始画图了
    重排:DOM节点发生改变时、修改默认字体、CSS样式、resize窗口等等情况，浏览器会将元素重新放在它该出现的位置。重排一定会导致重绘
    重绘：DOM改动CSS改动会触发，浏览器把页面要呈现的内容全画出来，批量操作DOM或者样式是修改
    浏览器的布局方式

  7. js运行机制：单线程 先同后异 先微后宏 ；
    事件循环：js把同步任务放入执行栈，执行完后，去异步队列找还没有没执行的任务，放入运行栈执行，这样子循环。juejin.cn/post/684490…
    闭包：函数内部的函数可以访问函数的变量，跟GC机制有关，如果一个对象不再被引用，就会被回收；假设函数A里面定义了函数B，B依赖于A，只要B被引用了A就不会被回收，一直存在于内存中。
    闭包的应用：可以读取函数内部的变量、使局部变量能长期存在于内存（因为返回了一个函数跟全局变量扯上了关系）。

  8. 页面性能：压缩资源、缓存（强缓存、协商缓存，强缓存在一定时间内不需问服务器直接就拿缓存用了）、CDN、非核心代码异步加载(js动态创建节点、defer（html解析完之后加载）、async（执行顺序跟加载顺序无关，哪个小哪个先）都是在script标签加上)、预解析DNS（<link ref='dns-prefetch'） 、路由懒加载----------------------------------------------答：从网络层面和浏览器层面两个层面优化，保证资源更快的 加载速度，保证视图更快的 渲染速度/交互速度。网络层面：压 缩资源体积，使用gzip格式进行http压缩、压缩图片资源、减少http请求数量、减少不必要的coolie、CDN托管静态资源+HTTP缓存 、HTTP协议升级为2.0。渲染层面：减少阻塞渲染的因素、懒加载、白屏优化、服务端渲染、预渲染。交互层面：减少回流/重绘/、 注意防抖/节流、使用web worker 、使用虚拟列表、大文件分片上传

1.节流与防抖  

节流比较简单，每100ms只会执行一次操作；防抖是说在用户停止触发后100ms,会执行一次，在此时间段，如果一直点点点就不会触发回调  
2.用到**哪些动画**？canvas svg  
  
**3.VUE**  
特性：数据双向绑定、组件化、虚拟DOM  
双向绑定原理：使用数据劫持跟订阅发布模式实现双向绑定，vue在初始化数据时，会使用Object.defineProperty()方法为data里的每个属性加了get() set()方法，当页面使用对应属性时，首先会进行依赖收集(收集当前组件的`watcher`)如果属性发生变化会通知相关依赖进行更新操作(`发布订阅`)。  
虚拟DOM：当数据变化导致页面需要更新的时候，会先生成新的虚拟DOM树，通过新老虚拟DOM对比，得出其中差异，再把这些差异去应用到真实DOM上。  
MVVM：数据、视图、同步view model关联  
生命周期：beforeCreate() （完成实例初始化，一些生命周期初始化）created(data props computed 等等初始化完成 未挂载DOM不能使用$ref) beforeMount(有了el之后 开始组件周期) mounted（完成DOM渲染之后）beforeUpdate updated activated(keep alive组件激活) deactivated(移除后) beforeDestroy destroyed  
assets（打包压缩） static文件夹（打不包）  
VUEX：state（基本数据）getter（相当于计算属性）mutation（更新数据） action（可异步）module（分割成不同模块）  
 keep-alive 组件：还有两个钩子函数activated deactivated 被缓存组件激活/停用,<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。保持这些组件的状态，以避免反复重渲染导致的性能问题,,(vue-router keep-alive就是保持组件活跃，不会被destroy销毁掉，组件上挂载的数据还在—http协议的请求头里面也有一个keep-alive，意思是保持http通话，思想是一样的)

vue的data为什么是个函数？如果是对象的话，复用组件的data都会指向一个地址  
computed（支持缓存，依赖数据变化时会跟着发生变化，不支持异步）跟watch的区别（监听属性，可以是个对象由handler、deep、immediate）  
this.$nextTick():下次 DOM 更新结束之后执行回调,因为vue的数据发生改变后不会立即更新DOM。  
由于Vue DOM更新是异步执行的，即修改数据时，视图不会立即更新，而是会监听数据变化，并缓存在同一事件循环中，等同一数据循环中的所有数据变化完成之后，再统一进行视图更新。  
**vue router两种模式**：改变视图的同时不会向后端发出请求  
hash(通过window.onhashchange()监听路由修改，url中的#号后面的，它的值改变不会重新加载页面，刷新页面发送请求不带#后面的东西，能兼容低版本浏览器) ；；history（充分利用 history.pushState/repalceState() API 来完成URL 跳转而无须重新加载页面 ,页面刷新的时候，会请求当前地址栏中完成的 url，history还需后台配置支持)

共同点：改变视图的同时不会向后端发出请求（前端路由的核心）  
  
4.es6常用语法：箭头函数、import  export class定义类、字符串模版、解构  
  
5.ts是js的超集，相对js ts更像Java，数据要求带有明确的类型，JavaScript不要求，类 接口 模块 泛型编程（参数化类型，**把类型当作是参数一样传递）  
  
7.webpack：  
**loader:babel-loader 把ES6转成ES5 css-loader:加载css  sass-loader:转化成CSS、eslint-loader, style-loader:css注入js中 vue-loader html-loader  
plugin: html-webpack-plugin :简化创建html文件 clean-webpack-plugin目录清理 HotModulePlugin热更新  
loader：（以前的webpack只认识js）,loader是将其他语言转化，plugin是插件，可以扩展webpack的功能  
webpack构建流程 :初始化配置，加载plugin,实例化compiler,开始编译从entry出发，调用loader去加载模块，将模块转化成chunk文件，最后输出到outputdir  
跨域：添加dev server 配置，配置port,proxy属性  
**  
8.浏览器兼容性：\*{margin padding 0}  加浏览器前缀packag配置postcss插件；ie9一下opacity要加个filter 图片默认有间距使用float布局 css hack根据不同的浏览器写不同的CSS  
  
  
9.wepy:生命周期onLoad onReady ... 事件broadcast emit invoke,props传递需要加上.sync修饰符,子组件props要加twoway:true  
  
10 项目难点：  
H5网页在本地调试微信环境：在微信开发的时候，要填写与微信服务器相连接的url,它必须是外网域名，直接用本地会进不去一些网页，有两种方式解决：第一种就是使用花生壳那种外网映射工具，它会给你一个外网地址，你把地址填入微信需要url里，它访问的实际上是本机的地址，就可以在本地开发调试了。  
还有一种：利用虚拟域名，首先你得配置80端口，之后使用管理员方式运行项目，把host检测关闭，然后修改host文件，将后端给的测试地址 跟本地ip形成映射关系，当你输入这个地址，就可以访问网页了  
**
avatar
文章
阅读
粉丝