前端面试知识点整理(持续更新)

HTML

在地址栏里输入一个URL,到这个页面呈现出来，中间会发生什么？

参考回答：
输入url后，首先需要找到这个url域名的服务器ip,为了寻找这个ip，浏览器首先会寻找缓存，查看缓存中是否有记录，缓存的查找记录为：浏览器缓存-》系统缓存-》路由器缓存，缓存中没有则查找系统的hosts文件中是否有记录，如果没有则查询DNS服务器，得到服务器的ip地址后，浏览器根据这个ip以及相应的端口号，构造一个http请求，这个请求报文会包括这次请求的信息，主要是请求方法，请求说明和请求附带的数据，并将这个http请求封装在一个tcp包中，这个tcp包会依次经过传输层，网络层，数据链路层，物理层到达服务器，服务器解析这个请求来作出响应，返回相应的html给浏览器，因为html是一个树形结构，浏览器根据这个html来构建DOM树，在dom树的构建过程中如果遇到JS脚本和外部JS连接，则会停止构建DOM树来执行和下载相应的代码，这会造成阻塞，这就是为什么推荐JS代码应该放在html代码的后面，之后根据外部样式，内部样式，内联样式构建一个CSS对象模型树CSSOM树，构建完成后和DOM树合并为渲染树，这里主要做的是排除非视觉节点，比如script，meta标签和排除display为none的节点，之后进行布局，布局主要是确定各个元素的位置和尺寸，之后是渲染页面，因为html文件中会含有图片，视频，音频等资源，在解析DOM的过程中，遇到这些都会进行并行下载，浏览器对每个域的并行下载数量有一定的限制，一般是4-6个，当然在这些所有的请求中我们还需要关注的就是缓存，缓存一般通过Cache-Control、Last-Modify、Expires等首部字段控制。 Cache-Control和Expires的区别在于Cache-Control使用相对时间，Expires使用的是基于服务器端的绝对时间，因为存在时差问题，一般采用Cache-Control，在请求这些有设置了缓存的数据时，会先查看是否过期，如果没有过期则直接使用本地缓存，过期则请求并在服务器校验文件是否修改，如果上一次响应设置了ETag值会在这次请求的时候作为If-None-Match的值交给服务器校验，如果一致，继续校验 Last-Modified，没有设置ETag则直接验证Last-Modified，再决定是否返回304

什么是跨域，怎么解决跨域

协议、域名、端口三者中有不一样的就是跨域
解决方法：

CORS. 通过设置 access-control-allow-origin: *

nginx 反向代理。通过设置proxy_pass

jsonp

src与href的区别

src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和 frame 等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js 脚本放在底部而不是头部。
href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，浏览器会识别该文档为 css 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加载 css，而不是使用@import 方式。

DOM

input与change的区别

input在输入框输入的时候会实时触发
change只会在输入框失去焦点且值改变了的情况下才会触发

若一个页面有多个同名id的DOM元素，通过getElementById获取到的是怎样的值

同名的第一个DOM元素

CSS

什么是伪类，什么是伪元素，两个的区别

伪类：伪类用于当已有的元素处于某个状态时，为其添加样式。这个状态时根据用户行为而动态变化的。
伪元素：伪元素用于创建一些不在文档树中的元素，并为其添加样式。
两者的区别是：有没有创建一个文档树外的元素。伪类的操作对象是文档树中已有的元素，而伪元素则是创建了一个文档树外的元素。

使用伪元素的优点

能减少DOM元素的渲染数量

position有哪些属性，分别如何定位的

1. static 默认值，没有定位。出现在正常文档流中
2. relative 相对定位。相对于其正常位置进行定位
3. absolute 绝对定位。相对于 static 定位之外的第一个父元素进行定位
4. fixed 绝对定位。相对于浏览器窗口进行定位
5. sticky 基于用户的滚动位置进行定位。相当于relative于fixed的结合体。

说一下em的使用方式

子元素的字体大小是相对于父元素字体大小
元素的width/height/margin/padding用em的话是相对于该元素的font-size

line-height分别取值为[1.5, 1.5em, 150%]的区别

line-height是相对于元素自身的font-size大小来取值的，但同时会被继承。所以当line-height设置为1.5em 或者 150% 可能会出现问题。
比如：
父元素： font-size: 18px; line-height: 1.5em，他的line-height计算下来是27px, (150%同理)。
子元素： font-size: 30px，在没有设置line-height的情况下，它继承父元素的line-height为27px，此时会出现问题

JS

includes 与 indexOf 的区别

includes 能判断是否包含NaN， indexOf 不能

当数组中有空值(empty)，includes会认为是undefined, indexOf不会

使用js实现重载

/*** 实现的原理是使用闭包*/
function addMethod(object, name, fn){// 把前一次添加的方法存在一个临时变量old里面let old = object[name]// 重写object[name]object[name] = function(){let executeFn = fn.length == arguments.length ? fn : oldreturn executeFn.apply(this,arguments)}
}

看知识点累了，我们来做道题吧。(手动狗头) 点击查看详细题解

var x = 1;
function f(x, y = function () { x = 3; console.log(x); }) {console.log(x)var x = 2y()console.log(x)
}
f()
console.log(x)
//1、上面的代码输出的是什么？
//2、如果把var x = 2注释掉，输出的又是什么？
//3、如果把f函数第一个参数x改成xx，输出的又是什么？
//4、如果把f函数第一个参数x设置了默认值为4，输出的又是什么？/*** 注意的点* 1. 设置了默认值的函数在进行初始化声明的时候， 参数会形成一个单独的作用域* 2. 函数能访问的变量是在定义的时候确定的，不是在执行的时候确定的* 3. 函数体内的变量名与参数相同，提升后的变量变量初始值与初始化后的参数一致。（var变量声明提升时会将参数的默认值赋给变量）* * 答案* 1. undefined 3 2 1* 2. undefined 3 3 1* 3. undefined 3 2 3* 4. 4 3 2 1*/

CommonJS 与 ES Module的区别

CommonJS 是同步导入，因为用于服务端，文件都在本地，同步导入即使卡住主线程影响也不大。而ES Module 是异步导入，因为用于浏览器，需要下载文件，如果也采用同步导入会对渲染有很大影响

CommonJS 导出时都是值拷贝，就算导出的值改变了，导入的值也不会变。ES Module 采用实时绑定的方式，导入导出的值都指向同一个内存地址，所以导入值会随着导出值改变。

typeof 能否正确判断类型？

typeof 对于原始类型来说，除了null外都能正确判断类型。typeof null 会输出object。在JS的最初版本中使用的是32位系统，为了性能考虑使用低位存储变量的类型信息， 000 开头代表对象，而null表示为全零，所以会将他错误判断为object。虽然现在的内部类型判断代码已经改变，但是这个bug却一直流传下来。
typeof 对于对象类型来说，除了函数都会显示为object。故不能正确判断对象类型的变量的类型

instanceof 能正确判断对象的原理是什么？

instanceof 的判断机制是通过原型链来判断的。 instanceof 不是百分百准确的。可以通过改写静态方法 Symbol.hasInstance 来自定义instanceof行为

VUE

组件间传值的方式

$attrs 与 listeners分别传递属性与事件。（要注意的是listeners 分别传递属性与事件。（要注意的是listeners分别传递属性与事件。（要注意的是listeners在vue3移除了。统一通过$attrs进行传递）

props、$emit

EventBus(emit、emit、emit、on)

Vuex

provide、inject

parent、parent、parent、children

在keepAlive中同时设置include与exclude，哪个优先级高

exclude的优先级高。

解析：

从红框中，我们可以看到如果满足如下两个条件之一就会直接返回组件不缓存组件:

有设置include 且 ( name为空或者 name不在include里面)

有设置exclude 且 name有值且 name在exclude里面

现在题目是假设name有值，且同时设置在了include与exlude里面。此时根据逻辑判断，它在判断1中为false，在判断2中为true，所以它满足if的条件判断，直接返回组件。

前端面试知识点整理(持续更新)相关推荐

面试看这里！！！2020年前端面试知识点（持续更新）
this指向: a.如果是一般函数,this指向全局对象window; b.在严格模式下"use strict",为undefined. c.对象的方法里调用,this指向调用该方 ...
前端面试知识点整理——网络
前端面试知识点整理--网络文章目录一. 进程(process)和线程(thread) 二. 浏览器属于一种多进程的架构三.CRP,关键渲染路径(critical rendering path) ...
前端面试知识点整理——项目整理
前端面试知识点整理--项目整理文章目录一.华工线上黑市(安卓) 二.二手闲置商场&健身管理系统(小程序) 三.birthday app(swift) 四.给Joey的生日页面(移动端) 五 ...
乾坤微前端_前端优秀资源整理(持续更新~)
入门必备 developer-roadmap: 超级全的2020年前端学习路线 freeCodeCamp: 一步一步在线引导学习, 有很多开源的课程和代码职场必备 front-end-intervi ...
覆盖所有面试知识点，持续更新中
我所接触的Android开发者,百分之九十五以上都遇到了以下几点致命弱点! 如果这些问题也是阻止你升职加薪,跳槽大厂的阻碍. 那么我确信可以帮你突破瓶颈! 应届坎坷求职路一个广州非985/211普 ...
[日常] 面试知识点总结(持续更新)
数据结构和算法:物理结构和逻辑结构1.逻辑结构(集合结构,线性结构,树形结构,图形结构)2.物理结构一般是讲内存,顺序存储结构,链式存储结构浅谈算法中,高斯算法从1加到100,循环的话是100次,高斯 ...
iOS 知识点整理 (持续更新...)
整理了些iOS相关的基础问题,每个问题可能会再写些扩展,需要具体了解可以看题目下方的链接如有错漏,欢迎指出,谢谢一.Swift 1.给一个数组,要求写一个函数,交换数组中的两个元素(swift可用 ...
前端面试问题（持续更新）
1.有关BFC的理解 2.盒模型的理解 3.box-sizing的理解 4.渐进增强 VS 优雅降级 5.url->页面加载完成的整个流程 6.js组成部分 7.如何跨域访问 8.js判断数组 ...
前端面试经历（持续更新）
2017/11/08 (个推二面) 前端知识框架angular,有用到angular的一些什么功能 flex布局兼容性数组去重方法 √ 跨域问题 √ 本地存储,cookie安全性 √ 怎么定义声明 ...

前端面试知识点整理(持续更新)

HTML

DOM

CSS

JS

VUE

前端面试知识点整理(持续更新)相关推荐

最新文章

热门文章