-
Accept 可接受响应类型 : Accept:text/plain
-
Accept-Charest 可接受的字符集 :Accept-Charest:utf-8
-
Accept-Encoding 可接受响应内容编码方式
-
Accept-Language
-
Accept-Datetime
-
Cache-Control 是否使用缓存机制 :Cache-Control:no-cache
-
Cookie
-
If-None-Match
-
If-Modified-Since
常见响应头,列举几个:
-
Access-Control-Allow-Origin 指定哪些网站可以跨域资源共享
-
Etag
-
Last-Modified
-
Expires
-
Cache-Control,如Cache-Control:max-age=3600
-
Set-Cookie
答:常见状态码分五大类
-
1** —— 服务器收到请求。需要请求者继续执行操作
-
2** —— 成功。操作成功并被处理
-
3** —— 重定向。需要进一步操作以完成请求
-
4** —— 客户端错误。请求包含语法错误或无法完成请求
-
5** —— 服务器错误。服务器在处理请求的过程中发生了错误
具体如下:
一、1 ** 服务器收到请求。需要请求者继续执行操作
-
100 —— Continue:客户端继续其请求
-
101 —— Switching Protocols:切换协议,服务器根据客户端请求而切换协议。
二、2 ** 成功。操作成功并被处理
-
200 —— OK:已成功。请求成功。
-
201 —— Created:已创建。成功请求并创建了新的资源。
-
202 —— Accepted:已接收。请求被接收,但未完成处理。
-
203 —— Non-Authoritative Information:未授权信息。即请求成功,但返回的meta信息不在原始服务器,是一个副本。
-
204 —— No Content:无内容。请求成功,处理成功后并无内容返回。
-
205 —— Reset Content:重置内容。服务器处理成功,用户终端应重置文档视图(可根据205清除表单域)。
-
206 —— Partial Content:部分内容。服务器成功处理了部分Get请求
三、3 ** 重定向。需要进一步操作才能完成请求。
-
300 —— Multiple Choices:多种选择。请求的资源有多个位置供用户终端选择。
-
301 —— Moved Permanently:永久移动。请求的资源已被移到新的URL,返回信息包含新URL。浏览器会自动定向到新URL。之后的请求应用新URL代替。
-
302 —— Found:临时移动。用户终端继续使用原本的URL。
-
303 —— See Other:查看其它地址
-
304 —— Not Modified:未修改。不返回新的内容,可通过缓存访问。
四、4 ** 客户端错误。
-
400 —— Bad Request:客户端请求语法错误。
-
401 —— Unauthorized:请求需要用户的身份认证。
-
403 —— Forbidden:服务器理解客户端的请求,但拒绝执行。
-
404 —— Not Found:根据请求服务器找不到相关资源。
-
405 —— Method Not Allowed:客户端请求中的方法被禁止。
-
408 —— Request Time-Out:服务端等待时间过长,请求超时。
五、5 ** 服务器错误
-
500 —— Internal Server Error:服务器内部错误。
-
501 —— Not Implemented:服务器不支持请求的功能。
-
502 —— Bad Gateway:作为网关或代理工作的服务器执行请求时,从远端服务器接收到无效响应。
-
503 —— Service Unavailable:由于超载或系统维护,暂时不能处理客户端请求
-
504 —— Gateway Time-out:充当网关或代理服务器,未能及时从远端请求。
一、HTTP请求报文
组成:
-
请求行 ( 请求方法字段 URL字段 HTTP协议版本字段 )如“ GET data/index.html HTTP/1.1”
-
请求头部 ( 常见有Accept,Host,If-Modified-Since )
-
空行 ( 表示请求头部到此为止 )
-
请求数据 (若是GET则为空;若是POST,则如user=admin&psw=177777)
一图概况:
二、HTTP响应报文
组成:
-
响应行 (http协议版本 状态码 描述)如HTTP/1.1 200 OK
-
响应头
-
响应体
回答参考我这篇笔记
JavaScript 创建对象 (工厂模式、构造函数模式、原型模式、组合使用构造函数模式与原型模式)
深拷贝与浅拷贝的内涵,实现深拷贝的几种方法,深拷贝解决项目异常bug
========================================================================
今日新鲜出炉:
回答:
-
Jquery的源码封装在一个匿名函数的自执行环境中,有利于防止变量的全局污染
-
传入window对象当作局部变量用,jquery访问window对象则不需要将作用域链退到最顶层作用域,可以更快访问window对象。
-
传入undefined,也可缩短查询undefined的作用域链
-
jQuery把常用原型属性和方法封装在jQuery.prototype,为缩短名称又赋给jQuery.fn
(function( window, undefined ) {
//用一个函数域包起来,就是所谓的沙箱
//在这里边var定义的变量,属于这个函数域内的局部变量,避免污染全局
//把当前沙箱需要的外部变量通过函数参数引入进来
//只要保证参数对内提供的接口的一致性,你还可以随意替换传进来的这个参数
window.jQuery = window.$ = jQuery;
})( window );
③ opacity:0、Display:none 、visibility:hidden 有什么区别
答如:
opacity:0、Display:none 、visibility:hidden
答如:
答如:
========================================================================
回流(重排)与重绘 —— 什么是回流和重绘,造成的原因是什么,如何去减少?
=======================================================================
答如:
-
输入URL到浏览器地址栏
-
先查看是否存在缓存(强缓存 / 协商缓存)
-
若无缓存,DNS解析URL对应的IP
-
根据解析出的IP,通过三次握手建立TCP连接
-
客户端浏览器发出HTTP请求
-
服务器处理请求,响应浏览器
-
浏览器解析、渲染页面
-
四次挥手关闭TCP连接
一、块级元素
div、段落、标题、列表、表格、表单,即:
-
div
-
p
-
h1 ~ h6
-
dl 带有项目和描述的描述列表 dt项目/名字,dd相关描述
-
ol 有序列表
-
ul 无序列表
-
table
-
form
二、行内元素
-
span
-
a 链接
-
br 换行
-
b 加粗
-
strong 逻辑加粗
-
i 斜体
-
em 逻辑斜体
-
label
三、空元素
-
area
-
base
-
br
-
col
-
colgroup
-
command
-
embed
-
hr
-
img
-
input
-
keygen
-
link
-
meta
-
param
-
source
-
track
-
wbr
二者区别,答如:
-
href是超文本引用,用于a和link元素;src是资源引用,即source,用于img,script和iframe上。
-
href使得元素与引用超文本建立联系;src将资源引入,并替换当前元素。
二者相同点:二者都是引入外部CSS样式的方法:link是链接法,@import是导入法。
二者不同点,答如:
-
link是html元素,无兼容性上的问题;@import由CSS提供,IE5上才能被识别。
-
使用link,是一边载入页面一边载入样式效果,使用体验良好;使用@import,则是加载完页面才载入样式。
-
link的优先级高于@import。
-
link除了引入CSS文件,还可以引入图标icon等其它信息;而@import只能引入CSS文件。
-
link支持JS去控制DOM改变样式;@import不支持。
参考:
=======================================================================
margin外边距叠加,实际上其原理是和BFC息息相关的。
margin外边距叠加的由来:
- margin外边距叠加,实际上是为了方便文章段落的排版。
margin外边距叠加的原因( BFC 块级格式化上下文 ):
- 在同一个BFC中,相邻块级盒子的margin-bottom和margin-top会发生叠加,即外边距叠加(相邻盒子的垂直方向上的外边距会叠加)。
margin外边距叠加的三种情况:
-
兄弟盒子
-
父子盒子 (无padding或border分隔开二者的margin)
-
空元素(无padding或border)
margin外边距叠加的计算规则是:
-
若margin-bottom和margin-top都是正值,取最大值
-
若不全是正值,则对负值取绝对值,用正值减去最大值
-
若都是负值,都取绝对值,用 0 减去最大值
margin外边距叠加的解决:
-
通过触发BFC —— 同一个BFC下才会发生垂直外边距叠加的问题,让相邻盒子不在同一个BFC,即触发新BFC即可。
-
适当添加padding或border —— 父子或空元素,是因为没有padding或border分隔开margin才导致其外边距叠加。那么可以适当添加相同颜色的padding或border,隔开margin。
答如:
一、水平居中
-
① 若待处理元素为行内元素,且其父元素为块级元素,则父元素设置 text-align:center
-
② 若待处理元素为行内元素,但其父元素非块级元素,将父元素设置为块级元素 display:block,再设置text-align:center
—————————————————————————
-
③ 若待处理元素是块级元素,且其是定宽度,给待处理元素设置 margin:0 auto;
-
④ 若待处理元素是块级元素,但其不定宽度,将子元素设置为display:inline-block或display:inline,父元素设置text-align:center (回到第一种情况)
-
⑤ 使用position (子绝父相)。若处理元素(子元素)是定宽度,设置子元素为left:50%,再设置margin-left: - 子元素宽度的一半 或 transform:translateX(-50%)
-
⑥ 使用position(子绝父相)。若处理元素(子元素)不定宽度,设置子元素为left:50%,设置子元素 transform:translateX(-50%)
-
⑦ 使用flex布局。给待处理元素的父级元素设置display:flex和justify-content:center;
二、垂直居中
-
① 若待处理元素是单行行内元素,则设置该元素行高等于父级盒子高度即可。#father { height:300px },#son { line-height:300px }
-
② 若待处理元素是多行行内元素,父元素设置vertical-align:middle或display:table-cell
————————————————
-
③ 使用position(子绝父相)。若处理元素(子元素)是定高度,设置子元素为top:50%,再设置margin-top: - 子元素高度的一半 或 transform:translateY(-50%)
-
④ 使用position(子绝父相)。若处理元素(子元素)不定高度,设置子元素为top:50%,再设置transform:translateY(-50%)
-
⑤ 使用flex布局。给待处理元素的父级元素设置display:flex和align-items:center
=======================================================================
区别如下,答如:
block
-
独占一行
-
可定义width,height,默认宽度为100%
-
可定义四个方向上的margin和padding
-
内部可容纳其它block元素或inline元素
inline
-
不独占一行
-
不可定义width,height,默认宽度为自身内容宽度
-
只能定义margin-left,margin-right和padding-left,padding-right
-
内部只能容纳其它inline元素或文本
inline-block
-
不独占一行
-
可定义width,height,但默认宽度为自身内容宽度
-
可定义四个方向上的margin和padding
入门概念:
-
flex布局就是弹性布局。
-
设置成display:flex的元素,则变成flex容器。
-
flex容器有有两根轴:水平的主轴和垂直的交叉轴。主轴开始的地方叫main start,结束的地方叫main end;交叉轴开始的地方cross start,结束的地方叫cross end。
相关属性:
-
flex-direction :控制项目排列方向和顺序,取值有row,row-reverse,column,column-reverse。如,row就是横向正序排列,row-reverse就是横向反序排列。
-
flex-wrap :控制项目是否换行,取值有nowrap,wrap,wrap-reverse。如,nowrap是不换行,wrap换行且第一行在上方,wrap-reverse换行且第一行在下方。
-
flex-flow :该属性是flex-direction和flex-wrap的简写集合。
-
justify-content :控制项目在横轴的对齐方式,取值有flex-start(左对齐),flex-end(右对齐),center(水平居中),space-between(两端对齐,项目之间间隔相等),space-around(每个项目两侧间隔相等)
-
align-items :控制项目在纵轴的对齐方式,取值有flex-start(交叉轴的起点对齐),flex-end(交叉轴的终点对齐),center(垂直居中),basline(基线对齐),stretch(默认值,若项目为设置高度或为auto,则拉长占满整个容器)
=======================================================================
答如:
对浏览器的理解
- 用户通过URL(统一资源定位符)去访问指定的资源,浏览器则负责将用户请求访问的内容呈现、展示出来。
浏览器分作两部分
-
Shell —— 浏览器的外壳,为用户提供界面操作(菜单或工具栏等)
-
内核 —— 内核是浏览器的核心,Shell依靠内核才可实现浏览器的各种交互功能。
关于浏览器的内核
-
渲染引擎 —— 取得网页的内容、处理讯息、计算网页的显示方式、将内容输出到显示器上
-
JS引擎 —— 解析、执行JavaScript
常见浏览器内核
-
Trident : IE浏览器
-
Webkit : Safari、Chrome
参考:
-
CSS盒模型包括IE盒子模型和标准盒模型
-
IE盒子模型的width包括content,padding和border
-
标准盒模型的width包括content
-
CSS3有box-sizing属性,可设置content-box(标准盒模型),border-box(IE盒模型)和padding-box。
主要有三点区别,答如:
-
var是函数作用域(局部或全局);let,const是块级作用域(花括号内)
-
var存在变量提升的现象;let,const不存在变量提升的现象(暂时性死区)
-
var变量可以重复声明;let不可以重复声明、const变量得初始化成常量且不能修改
经典面试题:
for ( var i = 0; i<10; i++ ){
setTimeout(function(){
console.log(i);
},100)
};
由于JS事件循环机制,执行setTimeout这一步时,由var声明的i已经变成了10。所以会输出10个10;
for ( let i = 0; i<10; i++ ){
setTimeout(function(){
console.log(i);
},100)
};
改成let,才会输出0-9.
我们都知道:const声明的变量,得直接初始化,使其成为一个常量,但这不意味const声明的变量里的内容不可以修改。
const person = {
name = ‘Lin’;
age = 22;
}
// after One year
person.age = 23; // 不报错,person这个指针引用的还是同一个对象。
// 若是让person这个变量指向别的引用数据类型,让其指向别的对象,那就相当于改变了常量
//报错
person = {
name = ‘error’;
age = 10;
}
⑤ setTimeout()延迟器 和 setInterval() 定时器 的区别
一、setTimeout()超时调用
-
setTimeout()是超时调用,延迟一定时间后,将待执行任务插入到执行队列,并不是即刻执行
-
setTimeout()接收两个参数,要执行的代码和延迟的时间毫秒数。
-
调用setTimeout()后,会返回一个超时调用Id,该Id用于唯一标识该超时调用。可用clearTimeout(id)来取消超时调用。
使用如:
// setTimeout()
var timeId = setTimeout(function(){
alert(‘set time out’);
},2000)
clearTimeout(timeId);
二、setInterval()间歇调用
-
setInterval()是间歇调用。间隔一定时间,不断重复执行.
-
setInterval()接收两个参数,待执行的函数和定时间隔时间。
-
调用setInterval()也会返回一个id,于setTimeout()类似。clearInterval(id)取消定时器。
三、关于setInterval()定时器需要注意的地方
-
取消定时器间歇调用即clearInterval()的重要性高于取消超时调用。因为若不加干涉,间歇调用会一直调用下去直至页面卸载。
-
若定时器待执行的函数func()需要执行的时间长于间隔时间t,如长到第二次触发定时器时,第一次func()还没有执行完。那么第二次func()就只能进入任务队列等待调度。这样函数的执行间隔时间就不是t了。
-
若第一个func()执行时间特别长,长到后续触发了第二个、第三个func(),都还没有处理完。那么会导致第三个func()及以后的函数被忽略。因为任务队列里不能同时有两个及以上同一个定时器的回调函数。
正因如此,经常用超时调用setTimeout()来模拟间歇调用setInterval()。
=======================================================================
eval(str);
-
接收一个字符串str作参数,并把str当作JavaScript代码执行
-
若str执行结果返回一个值,则返回该值,否则返回undefined
-
eval()不会创建新的作用域;若要将eval()的作用域作为全局,可以用window.eval()
function test(){
eval(“var a = 1”);
console.log(a); //1;
}
test();
console.log(a); //error
事件循环其原理图:
基本概念:
-
Call Stack 调用栈 : 后进先出。所有的代码都要放到调用栈等待主线程执行。函数被调用时,添加到Call Stack顶部;执行完则退出Call Stack。
-
Event Table 事件表格 : 事件表格可认为是一张存储 异步事件和该异步事件所对应的回调函数的表格。即 异步事件 =》回调函数。
-
Event Queue 事件队列 : 先进先出。当Event Table中的某一异步事件被触发,则其对应的回调函数进入 Event Queue。
-
Macro Task 宏任务 : setTimeout(),setInterval()
-
Micro Task 微任务 : new Promise(),new MutaionObserver()
Event Loop的原理是:
-
任务进入 Call Stack 调用栈。
-
若是同步任务,待在调用栈等待主线程执行;若是异步任务,则从 Call Stack 移入 Event Table 注册(形成异步事件与其回调函数的一一对应关系)。
-
若 Event Table 中的异步事件被触发,则将其对应的回调函数添加到 Event Queue 中 ( 分为微任务队列和宏任务队列两种 )。
-
** 当主线程将执行栈中的任务执行完(Call Stack栈空),主线程处于闲置状态。主线程先去查看 微任务队列 是否有任务存在。若微任务队列存在待处理函数,则逐个取出到栈中执行;若微任务队列为空,再去宏任务队列中取出一个函数到栈中执行。
========================================================================
基本数据类型:
-
Undefined
-
Null
-
Boolean
-
Number
-
String
复杂数据类型:
- Object
NaN定义:
-
NaN 即 Not A Number,是用于表示本来要返回数值的操作数但却没有返回数值的情况。
-
返回NaN,避免抛出错误,也避免了代码因此停止执行。
NaN特点:
-
操作数中包含NaN,都返回NaN
-
NaN与任何值都不相等 (NaN == NaN // false)
-
typeof NaN 返回 Number
isNaN()
- isNaN()函数可以判断参数是否“不是数值”。该函数可以接受任何类型的参数。先尝试能否转换为数值,可以的话就返回false,不可以就返回true,表明是NaN。
alert(NaN/10); //NaN
alert(NaN==0); //false
alert(NaN==NaN);//false
alert(isNaN(NaN)); //true
alert(isNaN(10)); //false 10是数值
alert(isNaN(‘10’)); //false 可以转成数值
alert(isNaN(true)); //false 可以转成数值
alert(isNaN(‘blue’)); //true 不可以转成数值
答如:
typeof根据不同情况返回以下各字符串:
-
undefined —— 若未定义或未初始化
-
boolean —— 若变量的值是布尔值
-
number —— 若变量的值是数值或者NaN
-
string —— 若变量的值是字符串
-
object —— 若变量的值是对象或者null
-
function —— 若变量的值是函数
注意:
-
未声明的变量只可以进行typeof操作
-
typeof null 返回的是object,因为null实际上是空对象指针
-
typeof NaN 返回的是Number
一、 === 判断的规则
简单来说:
-
如果二者类型不同,直接不等,返回false
-
如果二者类型相同,且值都相同,才相等,返回true
详细:
-
如果二者都是undefined,则相等
-
如果二者都是null,则相等 ( undefined === null // false)
-
如果二者是Boolean类型,都是true或者都是false,则相等
-
如果二者是Number,且是同一个值,则相等。( 涉及NaN的则不等 )
-
如果二者是String,且字符串完全匹配,则相等
-
如果二者是Object,引用同一个对象或函数,则相等。
注意:
-
undefined === null 是不成立的,返回false;因为undefined是Undefined类型,null是Null类型。类型不同,直接不等!
-
若是Number类型比较,涉及到NaN的都是不等的。
二、==的判断
两个值的类型不同,会先根据以下规则进行类型转换,再比较:
-
undefined 和 null 二者相等,即 undefined == null // true
-
若任一值是true,则转为1;若是false,转为0再比较
-
若一值是字符串,一值是数值,字符串转为数值再比较(若字符串为空转为0,若有其它格式字符则转为NaN)
-
若一个是对象,一个是数值或字符串,则把对象转为基础类型值再比较(通过valueOf方法或toString方法)。
========================================================================
ECMAScript有两种属性,一个就是数据属性,另外一个是访问器属性。
数据属性包含4个描述其行为的特性:
-
[[Configurable]]:表示能否通过delete删除属性从而定义新属性;表示能否修改属性的特性;表示能否把属性改成访问器属性。
-
[[Enumerable]]:表示能否通过forin循环返回属性。
-
[[Writable]]:表示能否修改属性的值。
-
[[Value]]:包含这个属性的数据值。读取时从这个位置读取,写入时将新值保存到这里。默认值为undefined
var person = {
name:‘kabukiyo’,
age:22
}
注意:
-
直接在对象上定义的数据属性,其三个特性[[Configurable]],[[Enumerable]],[[Writable]]默认值都是true;而[[Value]]特性则保存为具体设定的值。
-
若要修改数据属性的默认特性,则需要通过Object.defineProperty() 方法。
关于Object.defineProperty()方法
-
接收三个参数:属性所在的对象、属性的名字、一个描述符对象
-
若不指定[[Configurable]]、[[Enumerable]]、[[Writable]],其特性就都是false
-
若把[[Configurable]]设置为false,那么就不可以设置回true了(因为false表明不可以修改属性的特性)
var person = {};
Object.defineProperty(person,“name”,{
configurable:false,
value:‘kabukiyo’
})
访问器属性有四个特性:
-
[[Configurable]]:表示能否通过delete删除属性从而重新定义属性;表示能否修改属性的特性;表示能否把属性改成数据属性
-
[[Enumerable]]:和数据属性的一样
-
[[Get]]:在读取属性时调用的函数,默认为undefined
-
[[Set]]:在写入属性时调用的函数,默认为undefined
注意:
- 访问器属性不能直接定义,得通过Object.defineProperty()定义
通过Object.defineProperty()为person添加age访问器属性,如:
var person = {
_name:‘kabukiyo’
}
Object.defineProperty(person,“age”,{
get:function(){
return this._name;
},
set:function(value){
最后
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
Writable]],其特性就都是false
- 若把[[Configurable]]设置为false,那么就不可以设置回true了(因为false表明不可以修改属性的特性)
var person = {};
Object.defineProperty(person,“name”,{
configurable:false,
value:‘kabukiyo’
})
访问器属性有四个特性:
-
[[Configurable]]:表示能否通过delete删除属性从而重新定义属性;表示能否修改属性的特性;表示能否把属性改成数据属性
-
[[Enumerable]]:和数据属性的一样
-
[[Get]]:在读取属性时调用的函数,默认为undefined
-
[[Set]]:在写入属性时调用的函数,默认为undefined
注意:
- 访问器属性不能直接定义,得通过Object.defineProperty()定义
通过Object.defineProperty()为person添加age访问器属性,如:
var person = {
_name:‘kabukiyo’
}
Object.defineProperty(person,“age”,{
get:function(){
return this._name;
},
set:function(value){
最后
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
[外链图片转存中…(img-QScslXww-1715893483220)]
[外链图片转存中…(img-D2FapkSp-1715893483221)]
[外链图片转存中…(img-B6k0Q06O-1715893483221)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!