web前端面试总结

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

摘要:前端的东西特别多,面试的时候我们如何从容应对,作为一个老兵,我在这里分享几点我的经验。

一、javascript 基础(es5)

1、原型:这里可以谈很多,只要围绕 [[ prototype ]] 谈,都没啥问题

2、闭包:牵扯作用域,可以两者联系起来一起谈

3、作用域:词法作用域,动态作用域

4、this:不同情况的调用,this 指向分别如何。顺带可以提一下 es6 中箭头函数没有 this, arguments, super 等,这些只依赖包含箭头函数最接近的函数

5、call,apply,bind 三者用法和区别:参数、绑定规则(显示绑定和强绑定),运行效率(最终都会转换成一个一个的参数去运行)、运行情况(call,apply 立即执行,bind 是return 出一个 this “固定”的函数,这也是为什么 bind 是强绑定的一个原因)。

6、json jsonp json 数据格式,什么是真正的json,理解跨域的原理,如何解决跨域。

二、JS 基础(ES6)

  1. let,const:let 产生块级作用域(通常配合 for 循环或者 {} 进行使用产生块级作用域),const 申明的变量是常量(内存地址不变)

  2. Promise:这里你谈 promise 的时候,除了将他解决的痛点以及常用的 API 之外,最好进行拓展把 eventloop 带进来好好讲一下,microtask、macrotask 的执行顺序,如果看过 promise 源码,最好可以谈一谈 原生 Promise 是如何实现的。Promise 的关键点在于callback 的两个参数,一个是 resovle,一个是 reject。还有就是 Promise 的链式调用(Promise.then(),每一个 then 都是一个责任人)。

  3. Generator:遍历器对象生成函数,最大的特点是可以交出函数的执行权

  • function 关键字与函数名之间有一个星号;

  • 函数体内部使用 yield 表达式,定义不同的内部状态;

  • next 指针移向下一个状态

这里你可以说说 Generator 的异步编程,以及它的语法糖 async和 awiat,传统的异步编程。ES6 之前,异步编程大致如下

  • 回调函数

  • 事件监听

  • 发布/订阅

传统异步编程方案之一:协程,多个线程互相协作,完成异步任务。

  1. async、await:Generator 函数的语法糖。有更好的语义、更好的适用性、返回值是 Promise。

  • async => *

  • await => yield

基本用法

async function timeout (ms) { await new Promise((resolve) => { setTimeout(resolve, ms) })}async function asyncConsole (value, ms) { await timeout(ms) console.log(value)}asyncConsole('hello async and await', 1000)

注:最好把2,3,4 连到一起讲

  1. AMD,CMD,CommonJs,ES6 Module:解决原始无模块化的痛点

  • AMD:requirejs 在推广过程中对模块定义的规范化产出,提前执行,推崇依赖前置

  • CMD:seajs 在推广过程中对模块定义的规范化产出,延迟执行,推崇依赖就近

  • CommonJs:模块输出的是一个值的 copy,运行时加载,加载的是一个对象(module.exports 属性),该对象只有在脚本运行完才会生成

  • ES6 Module:模块输出的是一个值的引用,编译时输出接口,ES6 模块不是对象,它对外接口只是一种静态定义,在代码静态解析阶段就会生成。

三、框架相关

  1. 数据双向绑定原理:常见数据绑定的方案

  • Object.defineProperty(vue):劫持数据的 getter 和 setter

  • 脏值检测(angularjs):通过特定事件进行轮循

  • 发布/订阅模式:通过消息发布并将消息进行订阅

  1. VDOM:三个 part,

  • 虚拟节点类,将真实 DOM 节点用 js 对象的形式进行展示,并提供 render 方法,将虚拟节点渲染成真实 DOM

  • 节点 diff 比较:对虚拟节点进行 js 层面的计算,并将不同的操作都记录到 patch 对象

  • re-render:解析 patch 对象,进行 re-render

补充1:VDOM 的必要性?

  • 创建真实DOM的代价高:真实的 DOM 节点 node 实现的属性很多,而 vnode 仅仅实现一些必要的属性,相比起来,创建一个 vnode 的成本比较低。

  • 触发多次浏览器重绘及回流:使用 vnode ,相当于加了一个缓冲,让一次数据变动所带来的所有 node 变化,先在 vnode 中进行修改,然后 diff 之后对所有产生差异的节点集中一次对 DOM tree 进行修改,以减少浏览器的重绘及回流。

补充2:vue 为什么采用 vdom?

引入 Virtual DOM 在性能方面的考量仅仅是一方面。

性能受场景的影响是非常大的,不同的场景可能造成不同实现方案之间成倍的性能差距,所以依赖细粒度绑定及 Virtual DOM 哪个的性能更好还真不是一个容易下定论的问题。

Vue 之所以引入了 Virtual DOM,更重要的原因是为了解耦 HTML 依赖,这带来两个非常重要的好处是:

  • 不再依赖 HTML 解析器进行模版解析,可以进行更多的 AOT 工作提高运行时效率:通过模版 AOT 编译,Vue 的运行时体积可以进一步压缩,运行时效率可以进一步提升;

  • 可以渲染到 DOM 以外的平台,实现 SSR、同构渲染这些高级特性,Weex 等框架应用的就是这一特性。

综上,Virtual DOM 在性能上的收益并不是最主要的,更重要的是它使得 Vue 具备了现代框架应有的高级特性。

  1. vue 和 react 区别

  • 相同点:都支持 ssr,都有 vdom,组件化开发,实现 webComponents 规范,数据驱动等

  • 不同点:vue 是双向数据流(当然为了实现单数据流方便管理组件状态,vuex 便出现了),react 是单向数据流。vue 的 vdom 是追踪每个组件的依赖关系,不会渲染整个组件树,react 每当应该状态被改变时,全部子组件都会 re-render。

上面提到的每个点,具体细节还得看自己的理解

  1. 为什么用 vue :简洁、轻快、舒服、没了

四、缓存

首先得明确 http 缓存的好处

1、减少了冗余的数据传输,减少网费

2、减少服务器端的压力

3、Web 缓存能够减少延迟与网络阻塞,进而减少显示某个资源所用的时间

4、加快客户端加载网页的速度

常见 http 缓存的类型

1、私有缓存(一般为本地浏览器缓存)

2、代理缓存

然后谈谈本地缓存

本地缓存是指浏览器请求资源时命中了浏览器本地的缓存资源,浏览器并不会发送真正的请求给服务器了。它的执行过程是

1、第一次浏览器发送请求给服务器时,此时浏览器还没有本地缓存副本,服务器返回资源给浏览器,响应码是200 OK,浏览器收到资源后,把资源和对应的响应头一起缓存下来。

2、第二次浏览器准备发送请求给服务器时候,浏览器会先检查上一次服务端返回的响应头信息中的Cache-Control,它的值是一个相对值,单位为秒,表示资源在客户端缓存的最大有效期,过期时间为第一次请求的时间减去Cache-Control的值,过期时间跟当前的请求时间比较,如果本地缓存资源没过期,那么命中缓存,不再请求服务器。

3、如果没有命中,浏览器就会把请求发送给服务器,进入缓存协商阶段。

  • 更多分享请关注,微信公众号:xiaohumuhe13,或今日头条号:(大话前端),还能获得海量视频资源哦~
  • 我的目标:做最好最全的前端资源分享 ​

转载于:https://my.oschina.net/jinsanpang/blog/1608811

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/391431.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

783. 二叉搜索树节点最小距离(dfs)

给你一个二叉搜索树的根节点 root ,返回 树中任意两不同节点值之间的最小差值 。 注意:本题与 530:https://leetcode-cn.com/problems/minimum-absolute-difference-in-bst/ 相同 示例 1: 输入:root [4,2,6,1,3] 输…

linux epoll机制对TCP 客户端和服务端的监听C代码通用框架实现

1 TCP简介 tcp是一种基于流的应用层协议,其“可靠的数据传输”实现的原理就是,“拥塞控制”的滑动窗口机制,该机制包含的算法主要有“慢启动”,“拥塞避免”,“快速重传”。 2 TCP socket建立和epoll监听实现 数据结构…

linux中安装robot环境

https://www.cnblogs.com/lgqboke/p/8252488.html(文中验证robotframework命令应该为 robot --version) 可能遇到的问题: 1、python版本太低 解决:升级python https://www.cnblogs.com/huaxingtianxia/p/7986734.html 2、pip安装报…

angular 模块构建_我如何在Angular 4和Magento上构建人力资源门户

angular 模块构建Sometimes trying a new technology mashup works wonders. Both Magento 2 Angular 4 are very commonly talked about, and many consider them to be the future of the development industry. 有时尝试新技术的mashup会产生奇迹。 Magento 2 Angular 4都…

tableau破解方法_使用Tableau浏览Netflix内容的简单方法

tableau破解方法Are you struggling to perform EDA with R and Python?? Here is an easy way to do exploratory data analysis using Tableau.您是否正在努力使用R和Python执行EDA? 这是使用Tableau进行探索性数据分析的简单方法。 Lets Dive in to know the …

六周第三次课

2019独角兽企业重金招聘Python工程师标准>>> 六周第三次课 9.6/9.7 awk awk也是流式编辑器,针对文档中的行来操作,一行一行地执行。 awk比sed更强大的功能是它支持了分段。 -F选项的作用是指定分隔符,如果不加-F选项,…

面试题字符集和编码区别_您和理想工作之间的一件事-编码面试!

面试题字符集和编码区别A recruiter calls you for a position with your dream company. You get extremely excited and ask about their recruiting process. He replies saying “Its nothing big, you will have 5 coding rounds with our senior tech team, just the sta…

初探Golang(1)-变量

要学习golang,当然要先配置好相关环境啦。 1. Go 安装包下载 https://studygolang.com/dl 在Windows下,直接下载msi文件,在安装界面选择安装路径,然后一直下一步就行了。 在cmd下输入 go version即可看到go安装成功 2. Golan…

macaca web(4)

米西米西滴,吃过中午饭来一篇,话说,上回书说道macaca 测试web(3),参数驱动来搞,那么有小伙本又来给雷子来需求, 登录模块能不能给我给重新封装一下吗, 我说干嘛封装&…

linux中安装cx_Oracle

https://blog.csdn.net/w657395940/article/details/41144225 各种尝试都,最后 pip install cx-Oracle 成功导入 转载于:https://www.cnblogs.com/gcgc/p/11447583.html

rfm模型分析与客户细分_如何使用基于RFM的细分来确定最佳客户

rfm模型分析与客户细分With some free time at hand in the midst of COVID-19 pandemic, I decided to do pro bono consulting work. I was helping a few e-commerce companies with analyzing their customer data. A common theme I encountered during this work was tha…

leetcode 208. 实现 Trie (前缀树)

Trie(发音类似 “try”)或者说 前缀树 是一种树形数据结构,用于高效地存储和检索字符串数据集中的键。这一数据结构有相当多的应用情景,例如自动补完和拼写检查。 请你实现 Trie 类: Trie() 初始化前缀树对象。 void…

那些年收藏的技术文章(一) CSDN篇

#Android ##Android基础及相关机制 Android Context 上下文 你必须知道的一切 Android中子线程真的不能更新UI吗? Android基础和运行机制 Android任务和返回栈完全解析,细数那些你所不知道的细节 【凯子哥带你学Framework】Activity启动过程全解析 【凯子…

chrome json插件_如何使用此免费的Chrome扩展程序(或Firefox插件)获取易于阅读的JSON树

chrome json插件JSON is a very popular file format. Sometimes we may have a JSON object inside a browser tab that we need to read and this can be difficult.JSON是一种非常流行的文件格式。 有时我们可能需要在浏览器选项卡中包含一个JSON对象,这很困难。…

test10

test10 转载于:https://www.cnblogs.com/Forever77/p/11447638.html

数据仓库项目分析_数据分析项目:仓库库存

数据仓库项目分析The code for this project can be found at my GitHub.该项目的代码可以在我的GitHub上找到 。 介绍 (Introduction) The goal of this project was to analyse historic stock/inventory data to decide how much stock of each item a retailer should hol…

leetcode 213. 打家劫舍 II(dp)

你是一个专业的小偷,计划偷窃沿街的房屋,每间房内都藏有一定的现金。这个地方所有的房屋都 围成一圈 ,这意味着第一个房屋和最后一个房屋是紧挨着的。同时,相邻的房屋装有相互连通的防盗系统,如果两间相邻的房屋在同一…

HTTP缓存的深入介绍:Cache-Control和Vary

简介-本文范围 (Introduction - scope of the article) This series of articles deals with caching in the context of HTTP. When properly done, caching can increase the performance of your application by an order of magnitude. On the contrary, when overlooked o…

059——VUE中vue-router之路由嵌套在文章系统中的使用方法:

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>vue-router之路由嵌套在文章系统中的使用方法&#xff1a;</title><script src"vue.js"></script><script src"v…

web前端效率提升之浏览器与本地文件的映射-遁地龙卷风

1.chrome浏览器&#xff0c;机制是拦截url&#xff0c;      1.在浏览器Element中调节的css样式可以直接同步到本地文件&#xff0c;反之亦然&#xff0c;浏览器会重新加载css&#xff0c;省去刷新   2.在source面板下对js的编辑可以同步到本地文件&#xff0c;反之亦然…