Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

2019年3月1日的面试题-瀚一数据 #1

Open
CharlesGC opened this issue Mar 9, 2019 · 0 comments
Open

2019年3月1日的面试题-瀚一数据 #1

CharlesGC opened this issue Mar 9, 2019 · 0 comments
Labels

Comments

@CharlesGC
Copy link
Owner

CharlesGC commented Mar 9, 2019

Q: Chrome中如何找到需要设置断点的JS文件
A: ctrl + o

Q: Chrome中如何查看特定标签页占用的内存、CPU、网络使用情况
A: shift + esc

Q: 几个img标签放在一起的时候,有些浏览器会有默认的间距
A: CCS里: *{margin:0; padding:0}或者使用float属性为img布局

Q: Chrome的调试器中Network标签下面,选中一个请求后,右侧Timing标签有什么用途
A: Timing标签中可以显示资源在整个请求生命周期过程中各部分时间花费信息

Q: Timing标签里面每个进度条分别代表什么含义
A:
Resource Scheduling(资源调度)
Queueing(排队)
排队的时间花费。可能由于该请求被渲染引擎认为是优先级比较低的资源(图片)、服务器不可用、超过浏览器的并发请求的最大连接数(Chrome的最大并发连接数为6)
Connection Start
Stalled
从HTTP连接建立到请求能够被发出送出去(真正传输数据)之间的时间花费。包含用于处理代理的时间,如果有已经建立好的连接,这个时间还包括等待已建立连接被复用的时间
Proxy Negotiation
与代理服务器连接的时间花费
DNS Lookup
执行DNS查询的时间。网页上每一个新的域名都要经过一个DNS查询。第二次访问浏览器有缓存的话,则这个时间为0
Initial connection
建立连接的时间花费,包含了TCP握手及重试时间
SSL
完成SSL握手的时间花费
Request/Response
Request sent
发起请求的时间
Waiting(Time to first byte (TTFB))
是最初的网络请求被发起到从服务器接收到第一个字节这段时间,它包含了TCP连接时间,发送HTTP请求时间和获得响应消息第一个字节的时间
Content Download
获取Response响应数据的时间花费

Q: src和href的区别
A:
src指向外部资源的位置, 用于替换当前元素, 比如js脚本, 图片等元素
href指向网络资源所在的位置, 用于在当前文档和引用资源间确定联系, 加载css

Q: 如果网页内容需要多语言,要怎么做
A:
采用统一编码utf-8模式
charset=uft-8 unicode多语言

Q: 请描述一下 cookies,sessionStorage 和 localStorage 的区别
A:
Cookie
cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)
cookie数据始终在同源的http请求中携带(即使不需要),只会在浏览器和服务器间来回传递
cookie数据大小不能超过4k
设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭
在所有同源窗口中都是共享的
sessionStorage
不会自动把数据发给服务器,仅在本地保存
存储大小可以达到5M或更大
数据在当前浏览器窗口关闭后自动删除
不在不同的浏览器窗口中共享,即使是同一个页面
window.sessionStorage
localStorage
不会自动把数据发给服务器,仅在本地保存
存储大小可以达到5M或更大
存储持久数据,浏览器关闭后数据不丢失除非主动删除数据
在所有同源窗口中都是共享的
window.localStorage

Q: img设置属性title和alt的区别?
A:
Alt是img的特有属性, 或与<input type="image">配合使用,规定图像的替代文本. 如果无法显示图像, 浏览器将显示替代文本. 用于图片无法加载显示、读屏器阅读图片,可提高图片可 访问性,搜索引擎会重点分析。最长可包含1024个字符
Title为元素提供附加的提示信息,用于鼠标滑到元素上的时候显示。其值可以比alt属性值设置的更长, 但是有些浏览器会截断过长的文字

Q:display:none 和 visibility: hidden的区别
A:
display:none  隐藏对应的元素,在文档布局中不再给它分配空间,它各边的元素会合拢,就当他从来不存在
visibility:hidden  隐藏对应的元素,但是在文档布局中仍保留原来的空间

Q: 什么是闭包
A: 闭包是指有权访问另一个函数作用域中的变量的函数. 创建闭包常见方式,就是在一个函数内部创建另一个函数

Q: 闭包有什么作用
A:
匿名自执行函数  (function (){ ... })();   创建了一个匿名的函数,并立即执行它,由于外部无法引用它内部的变量,因此在执行完后很快就会被释放,关键是这种机制不会污染全局对象。
缓存, 可保留函数内部的值
实现封装
实现模板

Q: ajax请求是对createXMLHTTPRequest的封装,他有2个状态readyState和status用于判断返回状态,请说明下这2个状态有什么作用
A:
readyState是请求的状态
0 (未初始化): (XMLHttpRequest)对象已经创建,但还没有调用open()方法;
1 (载入):已经调用open() 方法,但尚未发送请求;
2 (载入完成): 请求已经发送完成;
3 (交互):可以接收到部分响应数据;
4 (完成):已经接收到了全部数据,并且连接已经关闭。
status是服务器方的返回状态
100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本
200——成功
201——提示知道新文件的URL
300——请求的资源可在多处得到
301——删除请求数据
404——没有发现文件、查询或URl
500——服务器产生内部错误

Q: 关于js的垃圾回收
A:
离开作用域的值将被自动标记为可以回收, 因此将在垃圾收集期间被删除
"标记清除"是目前主流的垃圾收集算法, 这种算法的思路是给当前不使用的值加上标记, 然后再回收其内存。另一种垃圾收集算法是"引用计数", 这种算法的思想是跟踪记录所有值被引用的次数. js引擎目前都不再使用这种算法, 但在IE中访问非原生JS对象(如DOM元素)时, 这种算法仍然可能会导致问题
当代码中存在循环引用现象时, "引用计数" 算法就会导致问题
解除变量的引用不仅有助于消除循环引用现象, 而且对垃圾收集也有好处. 为了确保有效地回收内存, 应该及时解除不再使用的全局对象, 全局对象属性以及循环引用变量的引用

Q: MVVM
A:
MVVM 是 Model-View-ViewModel 的缩写。
Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑。
View 代表UI 组件,它负责将数据模型转化成UI 展现出来。
ViewModel 监听模型数据的改变和控制视图行为、处理用户交互,简单理解就是一个同步View 和 Model的对象,连接Model和View。在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel 之间的交互是双向的, 因此View 数据的变化会同步到Model中,而Model 数据的变化也会立即反应到View 上。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。

Q: Vue的生命周期
A:Vue 实例从创建到销毁的过程,就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程,称之为 Vue 的生命周期。

Q: 生命周期阶段
A:
beforeCreate(创建前) 在数据观测和初始化事件还未开始
created(创建后) 完成数据观测,属性和方法的运算,初始化事件,$el属性还没有显示出来
beforeMount(载入前) 在挂载开始之前被调用,相关的render函数首次被调用。实例已完成以下的配置:编译模板,把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
mounted(载入后) 在el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用。实例已完成以下的配置:用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。
beforeUpdate(更新前) 在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态,不会触发附加的重渲染过程。
updated(更新后) 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作。然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
beforeDestroy(销毁前) 在实例销毁之前调用。实例仍然完全可用。
destroyed(销毁后) 在实例销毁之后调用。调用后,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

Q: Vue的路由有哪些方式
A:
hash模式:在浏览器中符号“#”,#以及#后面的字符称之为hash,用window.location.hash读取;hash虽然在URL中,但不被包括在HTTP请求中;用来指导浏览器动作,对服务端安全无用,hash不会重加载页面。hash 模式下,仅 hash 符号之前的内容会被包含在请求中,如 http://www.xxx.com,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误。
history模式:history采用HTML5的新特性;且提供了两个新方法:pushState(),replaceState()可以对浏览器历史记录栈进行修改,以及popState事件的监听到状态变更。history 模式下,前端的 URL 必须和实际向后端发起请求的 URL 一致,如 http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理,将返回 404 错误。Vue-Router 官网里如此描述:“不过这种模式要玩好,还需要后台配置支持……所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。

Q: v-on 可以绑定多个方法吗
A: 可以

Q: 简述一下Sass、Less
A: 他们是动态的样式语言,是CSS预处理器,CSS上的一种抽象层。他们是一种特殊的语法/语言而编译成CSS。

Q: 说明Sass、Less区别
A:
变量符不一样,less是@,而Sass是$;
Sass支持条件语句,可以使用if{}else{},for{}循环等等。而Less不支持;
Sass是基于Ruby的,是在服务端处理的,而Less是需要引入less.js来处理Less代码输出Css到浏览器

**Q: 前后端分离,解决跨域问题的方法
A:

跨域资源共享(CORS)

CORS(Cross-Origin Resource Sharing)跨域资源共享
'Access-Control-Allow-Origin:*'//或指定域 //指定允许其他域名访问
'Access-Control-Allow-Methods:GET,POST' //响应类型
'Access-Control-Allow-Headers:x-requested-with,content-type' //响应头设置

通过jsonp跨域

callback({"name","trigkit4"});
通过script标签引入一个js文件,这个js文件载入成功后会执行我们在url参数中指定的函数,并且会把我们需要的json数据作为参数传入。
JSONP的优点是:它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;它的兼容性更好,在更加古老的浏览器中都可以运行,不需要XMLHttpRequest或ActiveX的支持;并且在请求完毕后可以通过调用callback的方式回传结果。
JSONP的缺点则是:它只支持GET请求而不支持POST等其它类型的HTTP请求;它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

通过修改document.domain来跨子域

浏览器都有一个同源策略,其限制之一就是第一种方法中我们说的不能通过ajax的方法去请求不同源中的文档.它的第二个限制是浏览器中不同域的框架之间是不能进行js的交互操作的。

使用window.name来进行跨域

window对象有个name属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的,每个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的,并不会因新页面的载入而进行重置。

使用HTML5的window.postMessage方法跨域

window.postMessage(message,targetOrigin)  方法是html5新引进的特性,可以使用它来向其它的window对象发送消息,无论这个window对象是属于同源或不同源,目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。调用postMessage方法的window对象是指要接收消息的那一个window对象,该方法的第一个参数message为要发送的消息,类型只能为字符串;第二个参数targetOrigin用来限定接收消息的那个window对象所在的域,如果不想限定域,可以使用通配符 *  。

websockets

websockets是一种浏览器的API,它的目标是在一个单独的持久连接上提供全双工、双向通信。(同源策略对web sockets不适用)web sockets原理:在js创建了web socket之后,会有一个HTTP请求发送到浏览器以发起连接。取得服务器响应后,建立的连接会使用HTTP升级从HTTP协议交换为web sockt协议。只有在支持web socket协议的服务器上才能正常工作。

图像ping(单向)

图像ping是与服务器进行简单、单向的跨域通信的一种方式,请求的数据是通过查询字符串的形式发送的,而相应可以是任意内容,但通常是像素图或204相应(No Content)。 图像ping有两个主要缺点:首先就是只能发送get请求,其次就是无法访问服务器的响应文本。**

Q: Git 分支 - 分支的新建与合并
A: 查看分支:git branch
创建分支:git branch
切换分支:git checkout
创建+切换分支:git checkout -b
合并某分支到当前分支:git merge
删除分支:git branch -d

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant