web基础知识
⼀、浏览器：
1、常见的浏览器内核有哪些?
浏览器/RunTime内核（渲染引擎）JavaScript 引擎
Chrome Blink（28~） Webkit（Chrome 27）V8
FireFox Gecko SpiderMonkey
Safari Webkit JavaScriptCore
Edge EdgeHTML Chakra(for JavaScript)
IE Trident Chakra(for JScript)
Node.js-V8
2、浏览器的主要组成部分是什么？
1. ⽤户界⾯ - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗⼝显⽰的您请求的页⾯外，其他显⽰的各个部分都属于⽤户界
⾯。
2. 浏览器引擎 - 在⽤户界⾯和呈现引擎之间传送指令。
3. UI呈现引擎 - 负责显⽰请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显⽰在屏幕上。
4. ⽹络 - ⽤于⽹络调⽤，⽐如 HTTP 请求。其接⼝与平台⽆关，并为所有平台提供底层实现。
5. ⽤户界⾯后端 - ⽤于绘制基本的窗⼝⼩部件，⽐如组合框和窗⼝。其公开了与平台⽆关的通⽤接⼝，⽽在底层使⽤操作系统的⽤户界
⾯⽅法。
6. JavaScript 解释器。⽤于解析和执⾏ JavaScript 代码。
7. 数据存储。这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie。新的 HTML 规范 (HTML5) 定义了“⽹络数据库”，这是⼀个
完整（但是轻便）的浏览器内数据库。
设置纵向自动滚动条css3、浏览器是如何渲染UI的？
1. 浏览器获取HTML⽂件，然后对⽂件进⾏解析，形成DOM Tree
2. 与此同时，进⾏CSS解析，⽣成Style Rules
3. 接着将DOM Tree与Style Rules合成为 Render Tree
4. 接着进⼊布局（Layout）阶段，也就是为每个节点分配⼀个应出现在屏幕上的确切坐标
5. 随后调⽤GPU进⾏绘制（Paint），遍历Render Tree的节点，并将元素呈现出来
4、浏览器如何解析css选择器？
浏览器会『从右往左』解析CSS选择器。
我们知道DOM Tree与Style Rules合成为 Render Tree，实际上是需要将Style Rules附着到DOM Tree上，因此需要根据选择器提供的信息对DOM Tree进⾏遍历，才能将样式附着到对应的DOM元素上。
若从左向右的匹配，过程是：
1. 从⽗tree开始，遍历⼦节点
2. 然后各⾃向⼦节点tree遍历。
3. 最后遍历⽬标节点，⼀颗DOM树的节点动不动上千，这种效率很低。
如果从右⾄左的匹配：
1. 先到符合条件的最右选择器，再符合层层左边选择器
2. 最后到根选择器。
后者匹配性能更好，是因为从右向左的匹配在第⼀步就筛选掉了⼤量的不符合条件的最右节点（叶⼦节点）；⽽从左向右的匹配规则的性能都浪费在了失败的查上⾯。
5、浏览器重绘与重排的区别？
重排: 部分渲染树（或者整个渲染树）需要重新分析并且节点尺⼨需要重新计算，表现为重新⽣成布局，重新排列元素
重绘: 由于节点的⼏何属性发⽣改变或者由于样式发⽣改变，例如改变元素背景⾊时，屏幕上的部分内
容需要更新，表现为某些元素的外观被改变
单单改变元素的外观，肯定不会引起⽹页重新⽣成布局，但当浏览器完成重排之后，将会重新绘制受到此次重排影响的部分
重排和重绘代价是⾼昂的，它们会破坏⽤户体验，并且让UI展⽰⾮常迟缓，⽽相⽐之下重排的性能影响更⼤，在两者⽆法避免的情况下，⼀般我们宁可选择代价更⼩的重绘。
『重绘』不⼀定会出现『重排』，『重排』必然会出现『重绘』。
6、如何触发重排和重绘？
任何改变⽤来构建渲染树的信息都会导致⼀次重排或重绘：
添加、删除、更新DOM节点
通过display: none隐藏⼀个DOM节点-触发重排和重绘
通过visibility: hidden隐藏⼀个DOM节点-只触发重绘，因为没有⼏何变化
移动或者给页⾯中的DOM节点添加动画
添加⼀个样式表，调整样式属性
⽤户⾏为，例如调整窗⼝⼤⼩，改变字号，或者滚动。
7、同源策略、cookie、localstorage、sessionStorage
同源策略：域名，协议，端⼝相同
如果不是同源：
(1)Cookie、LocalStorage和IndexDB ⽆法读取
(2)DOM⽆法获得
(3)AJAX请求不能发送
# cookie 同源
1.当前域名或者⽗域名下的Cookie；
2.当前路径或⽗路径下的Cookie
3.每次发起同域下的 HTTP 请求时，都会携带当前域名下的 Cookie；
4.⽀持设置为 HttpOnly，防⽌ Cookie 被客户端的 JavaScript 访问。
cookie localstorage sessionStorage
默认浏览器关闭，可以设置永久，需主动removeItem会话级别时间
4k5m5m⼤⼩
http请求携带客户端信息存储和使⽤客户端信息存储和使⽤特点
需要封装，推荐jsCookie内置api，容易使⽤内置api，容易使⽤使⽤
8、浏览器缓存机制
9、postMessage
⼆、html5
1、如何理解HTML语义化
便于代码可读性
便于seo
有例⼦举例⼦
2、哪些是块级元素、哪些是内联元素
Display: block/table: 有div h1 tabble ol ul p等
display：inline/inline-block; 有 span img input button等
三、CSS + flex + less
1、盒模型
box-sizing: content-box|border-box|inherit;
2、块级元素和⾏内元素
display: none|block|inline-block|flex|inline-block
·
块级元素
1.总是从新的⼀⾏开始
2.⾼度、宽度都是可控
3.宽度没有设置时，默认为100%
4.块级元素中可以包含块级元素和⾏内元素
·⾏内元素
1.和其他元素都在⼀⾏
2.⾼度、宽度以及内边距都是不可控的
3.宽⾼就是内容的⾼度，不可以改变
4.⾏内元素只能⾏内元素，不能包含块级元素
3、常⽤客户端尺⼨和移动端尺⼨
客户端尺⼨：
%百分⽐
em 1em 等于当前的字体尺⼨。2em 等于当前字体尺⼨的两倍。例如，如果某元素以 12pt 显⽰，那么 2em 是24pt。在 CSS 中，em 是⾮常有⽤的单位，因为它可以⾃动适应⽤户所使⽤的字体。
px像素 (计算机屏幕上的⼀个点)
移动端尺⼨：
%rpx（responsive pixel）: 可以根据屏幕宽度进⾏⾃适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素
rem始终是基于根元素，代表倍数。设备屏幕的像素，浏览器的默认字体⾼都是 16px; 可以结合px2rem使⽤
vh
/vw等于视⼝的1/100，window.innerHeight/window.innerWith
media-query：
4、常⽤颜⾊：三基⾊R(Red)、G(Green)、B(Blue)
颜⾊颜⾊ HEX颜⾊ RGB
⿊ black#000000rgb(0,0,0)
红 red#FF0000rgb(255,0,0)
绿 green#00FF00rgb(0,255,0)
蓝 blue#0000FF rgb(0,0,255)
黄 yellow#FFFF00rgb(255,255,0)
青蓝#00FFFF rgb(0,255,255)
洋红⾊#FF00FF rgb(255,0,255)
银⾊ silver#C0C0C0rgb(192,192,192)
⽩⾊ white#FFFFFF rgb(255,255,255)
5、display 和 visiblity 、opacity的区别：
1.当为元素设置display:none；时，元素在页⾯中不占据任何位置，⽽visibility:hidden；时，元素依旧占据位置;opacity: 0也会被⼦元
素继承，但是不能通过设置⼦元素opacity: 0使其重新显⽰
2.对⼦元素的影响
⽗元素为display:none；时，⼦元素设置display:block;⽆效
⽗元素为visibility:hidden；时，⼦元素设置visibility:visible；元素再次显⽰
3.不管设置哪个，如果⼦元素为图⽚的时候，都会请求图⽚
4.visibility:hidden⽐display:none性能上要好，display:none切换显⽰时，页⾯产⽣回流,⽽visibility切换是否显⽰时则不会引起回流
5.opacity: 0元素上⾯绑定的事件是可以触发的
6、⽔平垂直居中、对齐的问题
⽔平居中：
inline: text-aligin:center；
Block: margin； auto；
absulote： left: 50% + marginl-left
垂直居中:
Inline: line-height 等于height
absulote： top: 50% + margin-top 负值
absulote: transform(-50%, -50%) ===> transform相对⾃⼰移动
absulote： top,left,bottom,right = 0; + margin: auto
flex, transform + absolute, 同时适⽤于⽔平居中和垂直居中
absolute相对于最近的有定位的元素进⾏定位
图⽚和⽂字的对齐
7、滚动条
.test-1::-webkit-scrollbar {
/*滚动条整体样式*/
width : 10px;  /*⾼宽分别对应横竖滚动条的尺⼨*/
height: 1px;
}
.test-1::-webkit-scrollbar-thumb {
/*滚动条⾥⾯⼩⽅块*/
border-radius: 10px;
box-shadow  : inset 0 0 5px rgba(0, 0, 0, 0.2);
background  : #535353;
}
.test-1::-webkit-scrollbar-track {
/*滚动条⾥⾯轨道*/
box-shadow  : inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 10px;
background  : #ededed;
}
8、margin 纵向重叠、margin 负值
margin负值：
Margin-top,margin-left 负值，元素向上、元素向左移动
margin-right负值，右侧元素左移，⾃⾝不受影响
margin-bottom负值、下⽅元素上移，⾃⾝不受影响
9、BFC 理解和应⽤ hasLayout
Block format context, 块级盒⼦上下⽂
⼀块独⽴的渲染区域，内部元素的渲染不会影响边界以为的元素形成BFC的常见条件：
float 不是none
position：是absolute 或者fixed
overflow 不是visible
display: flex 、inline-block
清除浮动：
.claerfix::after{
content； '.';
height: 0;
display: block;
clear: both;
visibility:hidden;
}
.claerfix{
*zoom: 1
}
10、float 布局的问题，以及clearfix
圣杯和双飞翼布局的⽬的
三栏布局，中间⼀栏最先加载和渲染
两侧内容固定，中间内容随着宽度⾃适应
⼀般⽤于PC
11、flex
flex画骰⼦
12、border的三⾓形，border属性有哪些问题
13、伪元素和伪类
伪类：L,V,H,A ===> css 相同权重后⾯覆盖前⾯
a:link 表⽰未被访问的链接（在页⾯上写了，还没有访问过）
a:visited 表⽰已经被访问过后的链接（访问过了，注：判断是否访问过，是以浏览器的浏览记录为依据）a:hover 表⽰⿏标指针位于其上的链接
a:active 表⽰活动链接（当⿏标点下时的链接）
14、line-height的继承
四、 JS ES6
1、js 的继承原型和 ES类原型本质
原型和原型链的图⽰
属性和⽅法的执⾏规则 ===> 通过链查
new Object（ target ）和ate()的区别
{} 等同于new Object(), target__ proto __ = Object.prototype
new 调⽤
如何实现继承？
2、深度克隆的原理，为什么要实现深度克隆，为什么不使⽤ JSON.parse(JSON.stringfy(data))、
值类型和引⽤数据类型?
typeof Symbol() // 'symbol'
typeof Number() // 'number'
typeof Sring() // 'string'
typeof Function() // 'function'
typeof Objecr() // 'object' ===> typeof Array()
typeof Boolean() // 'boolean'
typeof null() // 'object' ===> 特殊引⽤类型，指针指向为空地址
typeof undefined() // 'undefined'
栈（stack）和堆（heap：⼀般是在堆的头部⽤⼀个字节存放堆的⼤⼩）
⽅法⼀
function deepClone(obj) {
let newObj = Array.isArray(obj) ? [] : {}
if (obj && typeof obj === "object") {

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。