1、浏览器查找域名对应的 IP 地址(DNS 查询:浏览器缓存->系统缓存->路由器缓存->ISP
DNS 缓存->根域名服务器)
2、浏览器向 Web 服务器发送一个 HTTP 请求(TCP 三次握手)
3、服务器 301 重定向(从 HTTP://example.com 重定向到 HTTP://www.example.com)
4、浏览器跟踪重定向地址,请求另一个带 www 的网址
5、服务器处理请求(通过路由读取资源)
6、服务器返回一个 HTTP 响应(报头中把 Content-type 设置为 ‘text/html’)
7、浏览器进 DOM 树构建
8、浏览器发送请求获取嵌在 HTML 中的资源(如图片、音频、视频、CSS、JS 等)
9、浏览器显示完成页面
10、浏览器发送异步请求
Web 性能优化辅助工具
Lighthouse 详细的内容,可以去参考git:https://github.com/GoogleChrome/lighthouse
测试网站
https://www.webpagetest.org/
具体优化内容有:
原则:显示快,滚动流畅,懒加载,懒执行,渐进展现
websocket、SharedWorker
也可以调用 localstorge、cookies 等本地存储方式;
localstorge 另一个浏览上下文里被添加、修改或删除时,它都会触发一个事件;
我们通过监听事件,控制它的值来进行页面信息通信;
注意 quirks:Safari 在无痕模式下设置 localstorge 值时会抛出 QuotaExceededError 的异常。
共同点:都是保存在浏览器端、且同源的
区别:
1、cookie 数据始终在同源的 http 请求中携带(即使不需要),即 cookie 在浏览器和服务器
间来回传递,而 sessionStorage 和 localStorage 不会自动把数据发送给服务器,仅在本地保存。
cookie 数据还有路径(path)的概念,可以限制 cookie 只属于某个路径下;
2、存储大小限制也不同,cookie 数据不能超过 4K,同时因为每次 http 请求都会携带 cookie、
所以 cookie 只适合保存很小的数据,如会话标识。sessionStorage 和 localStorage 虽然也有存储大小的限制,但比 cookie 大得多,可以达到 5M 或更大;
3、数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭之前有效;localStorage:始
终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie:只在设置的 cookie 过期时间之前有效,即使窗口关闭或浏览器关闭;
4、作用域不同,sessionStorage 不在不同的浏览器窗口中共享,即使是同一个页面;localstorage在所有同源窗口中都是共享的;cookie 也是在所有同源窗口中都是共享的;
5、web Storage 支持事件通知机制,可以将数据更新的通知发送给监听者;
6、web Storage 的 api 接口使用更方便
1、GET 请求指定的页面信息,并返回实体主体。
2、HEAD 类似于 get 请求,只不过返回的响应中没有具体的内容,用于获取报头
3、POST 向指定资源提交数据进行处理请求(例如提交表单或者上传文件)。数据被
包含在请求体中。POST 请求可能会导致新的资源的建立和/或已有资源的修改。
4、PUT 从客户端向服务器传送的数据取代指定的文档的内容。
5、DELETE 请求服务器删除指定的页面。
6、CONNECT HTTP/1.1 协议中预留给能够将连接改为管道方式的代理服务器。
7、OPTIONS 允许客户端查看服务器的性能。
8、TRACE 回显服务器收到的请求,主要用于测试或诊断。
9、PATCH 实体中包含一个表,表中说明与该 URI 所表示的原内容的区别。
10、MOVE 请求服务器将指定的页面移至另一个网络地址。
11、COPY 请求服务器将指定的页面拷贝至另一个网络地址。
12、LINK 请求服务器建立链接关系。
13、UNLINK 断开链接关系。
14、WRAPPED 允许客户端发送经过封装的请求。
15、LOCK 允许用户锁定资源,比如可以再编辑某个资源时将其锁定,以防别人同时对
其进行编辑。
16、MKCOL 允许用户创建资源
17、Extension-mothed 在不改动协议的前提下,可增加另外的方法。
200( OK):请求已成功,请求所希望的响应头或数据体将随此响应返回。
303( See Other):告知客户端使用另一个 URL 来获取资源。
400( Bad Request):请求格式错误。1)语义有误,当前请求无法被服务器理解。
除非进行修改,否则客户端不应该重复提交这个请求;2)请求参数有误。
404( Not Found):请求失败,请求所希望得到的资源未被在服务器上发现。
500( Internal Server Error):服务器遇到了一个未曾预料的状况,导致了它无法完成对请求的处理。
100 => 正在初始化(一般是看不到的)
101 => 正在切换协议(websocket 浏览器提供的)
202 => 表示接受
301 => 永久重定向/永久转移
302 => 临时重定向/临时转移(一般用来做服务器负载均衡)
304 => 本次获取的内容是读取缓存中的数据,会每次去服务器校验
401 => 未认证,没有登录网站
403 => 禁止访问,没有权限
503 => 服务器超负荷(假设一台服务器只能承受 10000 人,
当第 10001 人访问的时候,如果服务器没有做负载均衡,
那么这个人的网络状态码就是 503)
var 声明变量可以重复声明,而 let 不可以重复声明;
var 是不受限于块级的,而 let 是受限于块级;
var 会与 window 相映射(会挂一个属性),而 let 不与 window 相映射
var 可以在声明的上面访问变量,而 let 有暂存死区,在声明的上面访问变量会报错;
const 声明之后必须赋值,否则会报错;
const 定义不可变的量,改变了就会报错;
const 和 let 一样不会与 window 相映射、支持块级作用域、在声明的上面访问变量会报错。
json对象转为 json字符串的方法
1、字符串转对象
第一种方式:eval();
var data=’{“student”:[{“name”:“张三”,“age”:“11”},{“name”:“李四”,“age”:“11”},{“name”:“王
五”,“age”:“11”}]}’;
eval(’(“+data+”)’); 第二种方式:JSON.parse();
var data=’{“student”:[{“name”:“张三”,“age”:“11”},{“name”:“李四”,“age”:“11”},{“name”:“王
五”,“age”:“11”}]}’;
JSON.parse(data);
与 eval()区别
eval()方法不会去检查给的字符串时候符合 json 的格式~同时如果给的字符串中存在 js 代
码 eval()也会一并执行~比如:
var data=’{“student”:[{“name”:“张三”,“age”:“11”},{“name”:"李四
",“age”:“alert(11)”},{“name”:“王五”,“age”:“11”}]}’;
此时执行 eval 方法后会先弹出一个提示框输出 11 的字符串; 这时候使用 JSON.parse()就会报错,显示错误信息为当前字符串不符合 json 格式;即
JSON.parse()方法会检查需要转换的字符串是否符合 json 格式
相比而言 eval()方法是很不安全,特别是当涉及到第三方时我们需要确保传给 eval()的
参数是我们可以控制的,不然里面插入比如window.location~指向一个恶意的连接总的来说,
还是推荐使用 JSON.parse()来实现 json 格式字符串的解析
2、对象转字符串
JSON.stringify(json)
jQuery 选择器支持 CSS 里的选择器,jQuery 选择器可用来添加样式和添加相应的行为 CSS 中的选择器是只能添加相应的样式。
1、标记清除(mark and sweep)
这是 JavaScript 最常见的垃圾回收方式,当变量进入执行环境的时候,比如函数中声明一个变量,垃圾回收器将其标记为“进入环境”,当变量离开环境的时候(函数执行结束)将其标记为“离开环境” 垃圾回收器会在运行的时候给存储在内存中的所有变量加上标记,然后去掉环境中的变量以及被环境中变量所引用的变量(闭包),在这些完成之后仍存在标记的就是要删除的变量了。
2、引用计数(reference counting)
在低版本 IE 中经常会出现内存泄露,很多时候就是因为其采用引用计数方式进行垃圾回收。 引用计数的策略是跟踪记录每个值被使用的次数,当声明了一个 变量并将一个引用类型赋值给该变量的时候这个值的引用次数就加 1,如果该变量的值变成了另外一个,则这个值得引用次数减1,当这个值的引用次数变为 0 的时 候,说明没有变量在使用,这个值没法被访问了,因此可以
将其占用的空间回收,这样垃圾回收器会在运行的时候清理掉引用次数为 0 的值占用的空间。
在 IE 中虽然 JavaScript 对象通过标记清除的方式进行垃圾回收,但 BOM 与 DOM 对象却是通过引用计数回收垃圾的,也就是说只要涉及 BOM 及 DOM 就会出现循环引用问题。
JS数据类型一共有 7 种:
Undefined、Null、Boolean、String、Symbol、Number、Object;
除了 Object 之外的 6 种属于原始数据类型。有时,我们还会细分 Object 的类型,比如 Array,Function,Date,RegExp 等;
typeof undefined // "undefined"
typeof null // "object"
typeof 1 // "number"
typeof "1" // "string"
typeof Symbol() // "symbol"
typeof function() {} // "function"
typeof {} // "object"
3 instanceof Number // false
'3' instanceof String // false
true instanceof Boolean // false
instanceof 可以用来判断对象的类型:
var date = new Date()
date instanceof Date // true var number = new Number()
number instanceof Number // true var string = new String()
string instanceof String // true
需要注意的是,instanceof 的结果并不一定是可靠的,因为在 ECMAScript7 规范中可以通过自定义 Symbol.hasInstance 方法来覆盖默认行为。
Array.isArray([]) // true
Array.isArray({}) // false
(function () {console.log(Array.isArray(arguments))}()) // false
适用范围不同 :@import 可以在网页页面中使用,也可以在 CSS 文件中使用,用来将多个 CSS 文件引入到一个 CSS 文件中;而 link 只能将 CSS 文件引入到网页页面中;
功能范围不同 :link 属于 XHTML 标签,而@import 是 CSS 提供的一种方式,link 标签除了可以加载 CSS 外,还可以定义 RSS,定义 rel 连接属性等,@import 就只能加载 CSS;
加载顺序不同 :当一个页面被加载的时候,link 引用的 CSS 会同时被加载,而@import 引用的 CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import 加载 CSS 的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显;
兼容性: 由于@import 是 css2.1 提出的,所以老的浏览器不支持,@import 只有在 IE5
以上的才能识别,而 link 标签无此问题
控制样式时的差别 使用 link 方式可以让用户切换 CSS 样式.现代浏览器如
Firefox,Opera,Safari 都支持 rel=”alternate stylesheet”属性(即可在浏览器上选择不同 的风格), 当然你还可以使用 Javascript 使得 IE 也支持用户更换样式
权重区别: link 引入的样式权重大于@import 引入的样式
1、使用 es6 set 方法
[...new Set(arr)] let arr = [1,2,3,4,3,2,3,4,6,7,6]; let unique = (arr)=>
[...new Set(arr)]; unique(arr); // [1, 2, 3, 4, 6, 7]
2、利用新数组 indexOf 查找:
indexOf() 方法可返回某个指定的元素在数组中首次出现的位置。
如果没有就返回-1。
3、for 双重循环:通过判断第二层循环,去重的数组中是否含有该元素,如果有就退出第二层循环,如果没有 j==result.length 就相等,然后把对应的元素添加到最后的数组 里面。
let arr = [1,2,3,4,3,2,3,4,6,7,6];
let result = [];
for(var i = 0 ; i < arr.length; i++) {
for(var j = 0 ; j < result.length ; j++) {
if( arr[i] === result[j]){
break;
};
};
if(j == result.length){
result.push(arr[i]);
};
};
console.log(result);
4、利用 for 嵌套 for,然后 splice 去重:
functionunique(arr){
for(vari=0; i
5、利用 filter :
let arr = [1,2,3,4,3,2,3,4,6,7,6];
let unique = (arr) => {
return arr.filter((item,index) => {
return arr.indexOf(item) === index;
})
};
unique(arr);
6、
let arr = [1,2,3,4,3,2,3,4,6,7,6];
let unique = (arr) => {
return arr.filter((item,index) => {
return arr.indexOf(item) === index;
})
};
unique(arr);
7、利用 Map 数据结构去重:
let arr = [1,2,3,4,3,2,3,4,6,7,6]; let unique = (arr)=> {
let seen = new Map();
return arr.filter((item) => {
return !seen.has(item) && seen.set(item,1);
});
}; unique(arr);
同:都是异步请求的方式来获取服务端的数据;
异:
1、请求方式不同:
$ . get() 方法使用 GET 方法来进行异步请求;
$. post() 方法使用 POST 方法来进行异步请求。
2、参数传递方式不同:get 请求会将参数跟在 URL 后进行传递,而 POST 请求则是作为 HTTP 消息的实体内容发送给 Web 服务器的,这种传递是对用户不可见的。
3、数据传输大小不同:get 方式传输的数据大小不能超过 2KB 而 POST 要大的多。
4、安全问题:GET 方式请求的数据会被浏览器缓存起来,因此有安全问题
background-size、background-origin 、background-clip
默认值 | auto |
---|---|
继承性: | no |
版本: | CSS3 |
JavaScript语法: | object.style.backgroundSize=“60px 80px” |
background-size: length|percentage|cover|contain;
值 | 描述 |
---|---|
length | 设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 “auto”。 |
percentage | 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 “auto”。 |
cover | 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 |
contain | 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。 |
注释:如果背景图像的 background-attachment 属性为 “fixed”,则该属性没有效果。
默认值: | padding-box |
---|---|
继承者: | no |
版本: | CSS3 |
JavaScript 语法: | object.style.backgroundOrigin=“content-box” |
background-origin: padding-box|border-box|content-box;
值 | 描述 |
---|---|
padding-box | 背景图像相对于内边距框来定位。 |
border-box | 背景图像相对于边框盒来定位。 |
content-box | 背景图像相对于内容框来定位。 |
默认值: | padding-box |
---|---|
继承者: | no |
版本: | CSS3 |
JavaScript 语法: | object.style.backgroundClip=“content-box” |
background-clip: border-box|padding-box|content-box;
值 | 描述 |
---|---|
border-box | 背景被裁剪到边框盒。 |
padding-box | 背景被裁剪到内边距框。 |
content-box | 背景被裁剪到内容框。 |
hsla() 函数使用色相、饱和度、亮度、透明度来定义颜色。
HSLA 即色相、饱和度、亮度、透明度(英:Hue, Saturation, Lightness, Alpha )。
色相(H)是色彩的基本属性,就是平常所说的颜色名称,如红色、黄色等。
饱和度(S)是指色彩的纯度,越高色彩越纯,低则逐渐变灰,取 0-100% 的数值。
亮度(L) 取 0-100%,增加亮度,颜色会向白色变化;减少亮度,颜色会向黑色变化。
透明度(A) 取值 0~1 之间, 代表透明度。
方法一:利用定位(常用方法,推荐)
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.parent {
width: 500px;
height: 500px;
border: 1px solid #000;
position: relative;
}
.child {
width: 100px;
height: 100px;
border: 1px solid #999;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
style>
head>
<body>
<div class="parent">
<div class="child">我是子元素div>
div>
body>
html>
方法二:利用 margin:auto;
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.parent {
width: 500px;
height: 500px;
border: 1px solid #000;
position: relative;
}
.child {
width: 100px;
height: 100px;
border: 1px solid #999;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
style>
head>
<body>
<div class="parent">
<div class="child">我是子元素div>
div>
body>
html>
方法三:利用 display:table-cell
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.parent {
width: 500px;
height: 500px;
border: 1px solid #000;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.child {
width: 100px;
height: 100px;
border: 1px solid #999;
display: inline-block;
}
style>
head>
<body>
<div class="parent">
<div class="child">我是子元素div>
div>
body>
html>
方法四:利用 **display:flex;**设置垂直水平都居中
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.parent {
width: 500px;
height: 500px;
border: 1px solid #000;
display: flex;
justify-content: center;
align-items: center;
}
.child {
width: 100px;
height: 100px;
border: 1px solid #999;
}
style>
head>
<body>
<div class="parent">
<div class="child">我是子元素div>
div>
body>
html>
方法五:计算父盒子与子盒子的空间距离(这跟方法一是一个道理)
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.parent {
width: 500px;
height: 500px;
border: 1px solid #000;
}
.child {
width: 100px;
height: 100px;
border: 1px solid #999;
margin-top: 200px;
margin-left: 200px;
}
style>
head>
<body>
<div class="parent">
<div class="child">我是子元素div>
div>
body>
html>
方法六:利用 transform
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.parent {
width: 500px;
height: 500px;
border: 1px solid #000;
position: relative;
}
.child {
width: 100px;
height: 100px;
border: 1px solid #999;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
style>
head>
<body>
<div class="parent">
<div class="child">我是子元素div>
div>
body>
html>
#container { //
的容器设置如下
display:table-cell;
text-align:center;
vertical-align:middle;
}
1、利用定位实现两侧固定中间自适应
1.1)父盒子设置左右 padding 值
1.2)给左右盒子的 width 设置父盒子的 padding 值,然后分别定位到 padding 处.
1.3)中间盒子自适应
具体 CSS 代码
html 结构
<div class="father">
<div class="left">div>
<div class="center">div>
<div class="right">div>
div>
2、利用 flex 布局实现两侧固定中间自适应
2.1)父盒子设置 display:flex;
2.2)左右盒子设置固定宽高
2.3)中间盒子设置 flex:1 ;
html 结构
<div class="father">
<div class="left">div>
<div class="center">div>
<div class="right">div>
div>
3、利用 bfc 块级格式化上下文 , 实现两侧固定中间自适应
3.1)左右 固定宽高,进行浮动
3.2)中间 overflow: hidden;
html 结构
<div class="father">
<div class="left">div>
<div class="right">div>
<div class="center">div>
div>