1.0 HTML&CSS章节
1.0.0 盒子模型
两种盒模型的区别：标准盒模型内容大小就是content大小，而IE盒模型内容大小则是content+padding+border总的大小
通过设置box-sizing属性为content-box（默认值，标准盒模型）、border-box（IE盒模型）。
IE8以下浏览器的盒模型中定义的元素的宽高不包括内边距和边框
1.0.1 BFC概念及应用
BFC (Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型
Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用
BFC布局规则
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算
哪些元素会生成BFC
- 根元素
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible
BFC常见应用
//清除浮动
body{width:400px;height:400px;}
.left{ float:right,width:100px;height100px;background:red}
.right{background:green,height:400px;overflow:hidden}
<body>
<div class="left"></div>
<div class="right"></div>
</body>
上面的例子如果不给。right元素加上overflow，或者其他生成BFC的方式，right元素会有一部分在left元素下面，给right加上overflow；hidden之后，right就会作为一个单独的BFC区域进行布局
// 防止垂直 margin 重叠
.right,left{width:100px;height:100px;margin:100px;}
<div class="left"></div>
<div class="wrap">
<div class="right"></div>
</div>
上面的例子如果不给right元素加一个外包裹wrap，使right属于wrap元素的BFC区域的话，就会造成两个元素之间的margin值重叠
1.0.2 双飞燕和圣杯布局
圣杯布局和双飞翼布局解决的问题是一样的，就是两边定宽，中间自适应的三栏布局，中间栏要放在文档流前面以优先渲染。
1.0.3 清除浮动
- 01-给浮动元素的父级加上指定高度(治标不治本)
- 02-浮动元素父级页浮动(要是有多个父级呢)
- 03-浮动元素父级设置为inline-block (IE6 7不支持)
- 04-在浮动元素下加<div class="clear"></div>
.clear{ height:0px;font-size:0;clear:both;overflow:hilien;}(鸡肋) - 05-在浮动元素下加<br class="clear"/>clear{ height:0px;font-size:0;clear:both;}(不符合W3C标准)
.clearfix:after{
content:"";//设置内容为空
height:0;//高度为0
line-height:0;//行高为0
display:block;//将文本转为块级元素
visibility:hidden;//将元素隐藏
clear:both//清除浮动
}
.clearfix{
zoom:1;为了兼容IE
}
1.0.4 CSS垂直居中的几种解决方案
已知父元素宽高的垂直居中
.box{
background: red;
width:100px;
height: 100px;
}
.box span.sBox{
position: absolute;
width:50px;
height: 20px;
top:50%;
left:50%;
margin-left:-25px;
margin-top:-10px;
text-align: center;
}
<div class="box box3">
<span class="sBox">绝对定位居中</span>
</div>
未知父元素宽高(inline-block)
.box6{
text-align:center;
font-size:0;
}
.box6 span{
vertical-align:middle;
display:inline-block;
font-size:16px;
}
.box6:after{
content:'';
width:0;
height:100%;
display:inline-block;
vertical-align:middle;
}
<div class="box box6">
<span >inline-block垂直居中</span>
</div>
未知父元素宽高(flex)
.box2{
display:flex;
justify-content: center;
align-items: center;
}
<div class="box box2">
<span>Flex垂直居中</span>
</div>
1.0.5 图片格式及区别
- png-8 每一张“png8”图像，都最多只能展示256种颜色，所以“png8”格式更适合那些颜色比较单一的图像，例如纯色、logo、图标等；因为颜色数量少，所以图片的体积也会更小；
- png-24 最多可展示的颜色数量多大1600万；所以“png24”所展示的图片颜色会更丰富，图片的清晰度也会更好，图片质量更高，当然图片的大小也会相应增加，所以“png24”的图片比较适合像摄影作品之类颜色比较丰富的图片；
- jpeg 体积小，用于一般的网络图片
- gif 动态图，体积相对小
- svg 矢量图，放大不失真
- webp 谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器宽带资源和数据空间
- Apng 是PNG的位图动画扩展，可以实现png格式的动态图片效果，有望代替GIF成为下一代动态图标准。
1.0.6 图片优化解决方案
- 图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
- 如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
- 如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。
- 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
- 如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致
1.0.7 link和@import有什么区别
- link属于XHTML标签，除了加载CSS外，还能用于定义RSS（简易信息聚合，是一种基于XML标准，在互联网上被广泛采用的
内容包装和投递协议），rel连接属性等作用；@import是CSS提供的，只能用于加载CSS - 页面被加载时，link会同时被加载；而@import引用的CSS会等到页面被加载完成后再加载
- link是XHTML标签，没有兼容问题；而@import只有在IE5以上才能被识别
- link支持使用JavaScript控制DOM修改样式；而@import不支持
1.0.8 HTML结构的语义化的理解
HTML结构语义化：根据根据页面内容的予以机构，选择合适的HTML标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
为什么要语义化 ？
- 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
- 用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
- 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
- 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
- 便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
1.0.9 H5和CSS3新API和特性有哪些
H5新API：
- 用于绘画 canvas 元素。
- 用于媒介回放的 video 和 audio 元素。
- 离线缓存 mainfest清单文件
- 页面头部像下面一样加入一个manifest的属性；
- 在cache.manifest文件的编写离线存储的资源；
- 在离线状态时，操作window.applicationCache进行需求实现。
-
webWorker类多线程使用
- 主线程采用new命令，调用Worker()构造函数，新建一个 Worker 线程。
- 主线程调用worker.postMessage()方法，向 Worker 发消息
- 主线程通过worker.onmessage指定监听函数，接收子线程发回来的消息
- Worker 完成任务以后，主线程就可以把它关掉
- 地理位置(Geolocation)
- notification网页通知
- 文件拖放(drag/drop)
- 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失； sessionStorage 的数据在浏览器关闭后自动删除。
- 语意化更好的内容元素，比如 article、footer、header、nav、section,figure,aside,command
- 表单控件，calendar、date、time、email、url、search
IE8/IE7/IE6支持通过document.createElement方法产生的标签， 可以利用这一特性让这些浏览器支持HTML5新标签， 浏览器支持新标签后，还需要添加标签默认的样式：
1.1.0 渐进增强和优雅降级
- 渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
- 优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容
1.1.1 CSS的Reset和normalize
Reset.css通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。相比之下，Normalize.css保持了许多默认的浏览器样式。这就意味着你不用再为所有公共的排版元素重新设置样式
1.1.2 重排（reflow）与重绘（repaint）
重绘 是一个元素外观的改变所触发的浏览器行为（例如改变visibility，outline，background等属性），浏览器会根据元素的新属性重新绘制，是元素呈现新的外观
重排 时更明显的一种改变，可以理解为渲染树需要重新计算。常见的触发重排的操作：
- DOM元素的几何属性变化
- DOM树的结构变化（例如节点的增减、移动）
- 获取某些属性（例如offsetTop，offsetLeft，offsetHeight，offsetWidth，clientWidth，clientHeight等）
- 改变元素的一些样式（例如调整浏览器窗口大小）
重绘不会带来重新布局，并不一定伴随着重排。在实践中，应该尽量减少重排次数和缩小重排的影响范围。有以下几种方法：
- a.将多次改变样式属性的操作合并成一次操作
- b.将需要多次重排的元素，position属性设为absolute或fixed，使其脱离文档流，这样它的变化就不会影响到其他元素
- c.在内存中多次操作节点，完成后再添加到文档中去
- d.如果要对一个元素进行复杂的操作，可以将其display属性设置为none使其隐藏，待操作完成后再显示
- e.在需要经常获取那些引起浏览器重排的属性值时，要缓存到变量
document.write只能重绘整个页面
innerHTML可以重绘页面的一部分
1.1.3 css选择符优先级
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
1.1.4 flex布局-阮一峰
采用 Flex 布局的元素，它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
容器属性
- flex-direction属性决定主轴的方向（即项目的排列方向）
row（默认值）：主轴为水平方向，起点在左端,即子项从左到右排列。
row-reverse：主轴为水平方向，起点在右端，即子项从右到左排列。
column：主轴为垂直方向，起点在上沿，即子项从上到下排列。
column-reverse：主轴为垂直方向，起点在下沿，即子项从下到上排列。
- flex-wrap 属性定义，如果一条轴线排不下，如何换行
nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse换行，第一行在下方。
- flex-flow 属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
- justify-content 属性定义了项目在主轴上的对齐方式
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
- align-items 属性定义项目在交叉轴上如何对齐。
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
- align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
align-item和align-content区别
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
容器子项目属性
- order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
- flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
- flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。负值对该属性无效。
- flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
- flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
- align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
flex弹性布局实战篇
1.1.5 Doctype作用? 文档类型有哪些？它们有何意义?
Doctype作用 <!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器以何种模式来渲染文档。
该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。
Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页
DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
1.1.6 HTML与XHTML二者有什么区别
1.所有的标记都必须要有一个相应的结束标记
2.所有标签的元素和属性的名字都必须使用小写
3.所有的XML标记都必须合理嵌套
4.所有的属性必须用引号""括起来
5.把所有<和&特殊符号用编码表示
6.给所有属性赋一个值
7.不要在注释内容中使“--”
8.图片必须有说明文字
1.0.7 src与href的区别
<script src="http://localhost:3000/admin/manage.js"></script>
src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
- src 当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，img和iframe等元素也如此
<link rel="stylesheet" href="localhost:3000/admin/css/my.css">
- href 指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接,上述代码浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理 这也是为什么建议使用link方式来加载css，而不是使用@import方式,另外link标签还可以指定rel属性例如shortcut
1.1.7 浏览器标准模式和怪异模式之间的区别
W3C标准推出以后，浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的IE）。这样浏览器渲染上就产生了Quircks mode和Standars mode，两种渲染方法共存在一个浏览器上。IE盒子模型和标准W3C盒子模型：ie的width包括：padding\border。标准的width不包括：padding\border
在js中如何判断当前浏览器正在以何种方式解析？
document对象有个属性compatMode,它有两个值：BackCompat对应quirks mode，CSS1Compat对应strict mode。
1.1.8 媒体查询
媒体查询，就是响应式布局。通过不同的媒介类型和条件定义样式表规则。媒介查询让CSS可以更精确作用于不同的媒介类型和同一媒介的不同条件。
语法结构及用法：@media 媒体类型and （媒体特性）{你的样式}
@media screen and (max-width:480px){
.box{
display:none;
}
}
//and关键字
@media screen and (min-width:600px) and (max-width:900px){
body {background-color:#f5f5f5;}
}
//link标签写法
<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />
//not 关键字排除某种制定的媒体类型
@media not print and (max-width: 1200px){样式代码}
//only关键字指定某种特定的媒体类型
<linkrel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" />
1.1.9 为什么利用多个域名来提供网站资源会更有效
- CDN缓存更方便
- 突破浏览器并发限制
- 节约cookie带宽,其实安全隔离才是主要的
- 节约主域名的连接数，优化页面响应速度
- 防止不必要的安全问题
1.2.1 伪类和伪元素
伪类列表.png
伪类：为了通过选择器，格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息。eg::first-child,:last-child,:first-of-type
伪元素：伪元素可以创建一些文档语言无法创建的虚拟元素。比如：文档语言没有一种机制可以描述元素内容的第一个字母或第一行，但伪元素可以做到(::first-letter、::first-line)。同时，伪元素还可以创建源文档不存在的内容，比如使用 ::before 或 ::after,::selection（匹配被用户选中的部分）
2.0 网站优化
2.0.1 SEO优化
站内优化
站内优化网站本身内部的优化，SEO站内优化包括代码标签优化、内容优化和URL优化 。
- 1、网站标题和描述优化
<meta name="keywords" content="网站关键词布局,优化百度,网站优化" /><meta name="description" content="" />
- 2、网站URL优化
像上面的URL结构最后几个英文拼接起来的字符串就是一个报错项的内容，类似的谷歌百度这类搜索引擎在抓取的时候就很具体，如果出现同样的问题，那么搜索引擎一定会将这条记录排在最前面。
- 3、网站导航优化
好的网站导航，便于搜索引擎的抓取，网站导航还具有权重传递功能，首页权重传递给内页，内页链接首页，再把权重传递给首页 - 4、内容优化
内容是一个网站的灵魂，好的网站必然是建立在内容的基础上的。搜索引擎的作用就是把用户所需要的内容展现给客户，所以必然的需要抓取网站的内容进行存储。 - 5、代码优化
代码优化就涉及到上面讲的 HTML结构的语义化的理解
站外优化
站外优化用通俗的话理解就是，增加外部链接.外部优化中链接的建立也并不是越多越好，其精髓主要体现在链接的质量和相关性上
2.0.2 性能优化
大致的网站优化性能步骤不外乎减少HTTP请求次数，减少DNS访问，减少对DOM的操作，缩减请求的文件大小/cookie大小等等
常见网站性能优化方法
网站性能优化
3.0 浏览器
3.0.1 浏览器缓存
浏览器缓存指的是http缓存，而storage是应用层缓存
浏览器缓存分为两类：强缓存和协商缓存
对http请求来说，客户端缓存分三类：
不发任何请求，直接从缓存中取数据，代表的特性有： Expires ，Cache-Control=<number！=0>和appcache,其中Cache-Control是HTTP1.1的东西，expires是根据服务器的时间来的，而Cache-Control是相对的的时间
发请求确认是否新鲜，再决定是否返回304并从缓存中取数据 :代表的特性有：Last-Modified/If-Modified-Since，Etag/If-None-Match
直接发送请求， 没有缓存，代表的特性有：Cache-Control：max-age=0/no-cache
浏览器缓存.png
浏览器缓存
expires,cache-control,last-modified,etag详细说明
Expires和Cache-Control
HTTP缓存机制及原理
强缓存和协商缓存
浏览器缓存
3.0.2 DNS解析和CDN
DNS解析： 网络中我们定位是通过ip而不是域名，所以将域名解析为IP的过程就叫做DNS解析。DNS解析一般会有以下几个步骤
- 浏览器首先搜索浏览器自身缓存的DNS记录(Chrome浏览器通过输入：chrome://net-internals/#dns 打开DNS缓存页面)
- 如果记录丢失或者过期，则搜索hosts文件和操作系统缓存
- Windows系统中，可以通过 ipconfig /displaydns 命令查看本机当前的dns缓存。
- 在windows系统的%systemroot%\system32\drivers\etc和Linux的/etc/hosts可以手动指定一个域名和其对应的IP解析结果，并且该结果一旦被使用，同样会被缓存到操作系统缓存中
- 如果上述都没有或者过期，向域名解析服务器发送解析请求
DNS域名解析.jpg
根域服务器记录的是com域服务器的IP、cn域服务器的IP、org域服务器的IP……
CDN加速：CDN(Content Delivery Network)叫内容分发网络，是依靠部署在各地的边缘服务器，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度。
3.0.4 cookies & session和localStorage & sessionStorage联系
1-Cookie和Session
服务器第一次接收到浏览器的请求时，会开辟一段Session空间（创建了Session对象）同时生成一个Session id 并通过响应头的Set_Cookie：“JSESSIONID=XXXXXXX”命令，向客户端发送要求设置cookie的响应； 客户端收到响应后，在本机客户端设置了一个JSESSIONID=XXXXXXX的cookie信息，该cookie的过期时间为浏览器会话结束。接下来客户端每次向同一个网站发送请求时，请求头都会带上该cookie信息（包含Session id）； 然后，服务器通过读取请求头中的Cookie信息，获取名称为JSESSIONID的值，得到此次请求的Session id；
cookie_session关系图.jpg
_服务器只会在客户端第一次请求响应的时候，在响应头上添加Set-Cookie：“JSESSIONID=XXXXXXX”信息，接下来在同一个会话的第二第三次响应头里，是不会添加Set- Cookie：“JSESSIONID=XXXXXXX”信息的； 而客户端是会在每次请求头的cookie中带上JSESSIONID信息
cookie和session的特点
存储内容：cookie只能保存字符串类型，以文本的方式；session通过类似与Hashtable的数据结构来保存，能支持任何类型的对象(session中可含有多个对象)
存储的大小：cookie：单个cookie保存的数据不能超过4kb；session大小没有限制。
安全性：cookie：针对cookie所存在的攻击：Cookie欺骗，Cookie截获；session的安全性大于cookie。
session的缺陷
- cookie+session在跨域的情境下表现不好
- 在分布式项目中，需要做多机共享session的操作，增加了成本
- 基于cookie，容易被CSRF
- 查询session需要数据库操作
localStorage和sessionStorage
localStorage和sessionStorage是H5提供的客户端存储数据的API。
生命周期：localStorage:localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失， sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。sessionStorage在同一网站多个标签页内共享数据,但是：
...data stored in sessionStorage gets cleared when the page session ends...Opening a page in a new tab or window will cause a new session to be initiated, which differs from how session cookies work.
通过点击链接（或者用了 window.open）打开的新标签页之间是属于同一个 session 的，但新开一个标签页总是会初始化一个新的 session，即使网站是一样的，它们也不属于同一个 session。
存储大小：一般为5M
存储位置：存储在客户端，不与服务端进行交互
数据类型：字符串类型
3.0.5 浏览器兼容性
3.0.6 跨域解决方案
- iframe：document.domain+iframe的设置 (只有在主域相同的时候才能使用该方法)，我们只能把document.domain设置成自身或更高一级的父域，且主域必须相同，比如a.b.example.com 中某个文档的document.domain 可以设成a.b.example.com、b.example.com 、example.com中的任意一个，但是不可以设成 c.a.b.example.com,因为这是当前域的子域。
//a.html
<body>
<div>A页面</div>
<iframe id="iframe" src="http://example.com/b.html" style="display:none;"></iframe>
// 相当于用一个隐藏的iframe来做代理
<script>
$(function(){
try{
document.domain = "example.com"; //这里将document.domain设置成一样
}catch(e){}
$("#iframe").load(function(){
var iframe = $("#iframe").contentDocument.$;//这里一定要等B页面加载完全之后才能去获取b页面的contentDocument对象，否则为空
ifram.get("http://example.com/接口",function(data){});
});
});
</script>
<body>
b.html
<body>
<div>B页面</div>
<script>
$(function(){
try{
document.domain = "example.com"; //这里将document.domain设置成一样
}catch(e){}
});
</script>
</body>
上面这种跨域方式有个缺陷就是必须两个页面的主域名必须相同，但是因为iframe在网站中存在阻塞主页面的加载情况，所以一般情况下我们很少用iframe的方式。
-
JSONP JSONP是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，老式浏览器全部支持，服务器改造非常小。它的基本思想是，网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。
eg：JSONP百度搜索的实现
JSONP跨域的方式只能支持GET请求，POST请求无法实现 -
postMessage postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。
postMessage(data,origin)方法接受两个参数
1.data:要传递的数据，html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器都做到了这点儿，部分浏览器只能处理字符串参数，所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化，在低版本IE中引用json2.js可以实现类似效果。
2.origin：字符串参数，指明目标窗口的源，协议+主机+端口号[+URL]，URL会被忽略，所以可以不写，这个参数是为了安全考虑，postMessage()方法只会将message传递给指定窗口，当然如果愿意也可以建参数设置为"*"，这样可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。
//http://source.com/a.html
window.onload = function(){
window.postMessage("要发送的数据"，"http://target.com/b.html")
}
//http:target.com/b.html
window.addEventListener('message',function(e){
if(e.source!=window.parent) return;//防盗链
console.log(e.data)//e是一个MessageEvent对象
},false);
MessageEvent对象的一些重要数据值
data：顾名思义，是传递来的message
source：发送消息的窗口对象
origin：发送消息窗口的源（协议+主机+端口号）
-
跨域资源共享 CORS 详解
CORS是跨源资源分享（Cross-Origin Resource Sharing）的缩写。它是W3C标准，是跨源AJAX请求的根本解决方法。相比JSONP只能发GET请求，CORS允许任何类型的请求.CORS需要浏览器和服务器同时支持。其中服务器端需要添加的一个比较重要的配置就是Access-Control-Allow-Origin："请求的源" -
webSocket:webSocket是让浏览器和服务器之间可以建立无限制的全双工通信，例如服务器可以在任意时刻发送消息给浏览器。而HTTP协议是一个请求－响应协议，浏览器不主动请求，服务器是没法主动发数据给浏览器的。当然HTTP也可以实现上述功能，比如用轮询，轮询是指浏览器通过JavaScript启动一个定时器，然后以固定的间隔给服务器发请求，询问服务器有没有新消息。这个机制的缺点一是实时性不够，二是频繁的请求会给服务器带来极大的压力
3.0.7 地址栏输入地址+Enter发生了什么
- 浏览器到DNS查找域名对应的IP地址
浏览器缓存->系统缓存->路由器缓存->ISP DNS缓存->递归搜索 ,从根域名服务器到顶级域名服务器到你查询的域名服务器。
- 拿到域名对应的IP地址之后，User-Agent（一般是指浏览器）会以一个随机端口（1024 < 端口 < 65535）向服务器的WEB程序（常用的有tomcat,nginx等）80端口发起TCP的连接请求，然后并发送HTTP请求
- 服务器给浏览器进行一个301永久重定向响应。该IP对应的服务器很可能是代理服务器，比如你输入“http://jianshu.com”,而不是“http://www.jianshu.com”,按道理这两个网址对应的是同一个网页，因此通过代理服务器的方式进行重定向相应，让这两个网址访问的是同一个网页。
- 浏览器根据重定向地址再次建立TCP连接，然后发起http请求
- 浏览器向服务器发送请求（SYN=1）,等待服务器确认；
- 服务器收到请求并确认，回复一个指令（SYN=1，ACK=1）
- 客户端收到服务器的回复指令，并返回确认（ACK=1）
- 服务器端响应http请求，浏览器得到html代码
- 浏览器的渲染引擎开始dom解析过程
构建DOM树->渲染树（Render tree）->布局render树->绘制render树
- 浏览器解析html代码，并请求html代码中的资源
- 对于静态的页面内容，浏览器通常进行缓存
- 浏览器对页面进行渲染呈现给用户
- 整个过程结束之后，浏览器关闭TCP连接
4.0 网络
4.0.0 HTTP(S)协议
HTTP：协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则，超文本传输协议(HTTP)是一种通信协议，它允许将超文本标记语言(HTML)文档从Web服务器传送到客户端的浏览器
HTTP请求报文组成:请求行(请求方法)、请求头(消息报头)、请求正文。请求头后面以空白行代表请求头结束
http请求格式.png
HTTP响应报文组成:状态行、消息报头、空行和响应正文。
HTTP/1.1 200 OK
Content-Length: 8653
Last-Modified: Sun, 03 Nov 2013 02:18:18 GMT
Cache-Control: max-age=0
Content-Type: application/javascript; charset=utf-8
Date: Sun, 10 Mar 2019 10:16:35 GMT
Connection: keep-alive
状态码：
HTTP/1.1中定义了5类状态码， 状态码由三位数字组成，第一个数字定义了响应的类别
- 1XX 提示信息 - 表示请求已被成功接收，继续处理
- 2XX 成功 - 表示请求已被成功接收，理解，接受
- 201 Created 请求成功并且服务器创建了新的资源
- 202 Accepted 服务器已接受请求，但尚未处理
- 3XX 重定向 - 要完成请求必须进行更进一步的处理
- 302 Found 重定向，新的URL会在response 中的Location中返回，浏览器将会自动使用新的URL发出新的Request
- 304 Not Modified 代表上次的文档已经被缓存了， 还可以继续使用，
- 4XX 客户端错误 - 请求有语法错误或请求无法实现
- 400 Bad Request 客户端请求与语法错误，不能被服务器所理解
- 403 Forbidden 服务器收到请求，但是拒绝提供服务
- 404 Not Found 请求资源不存在（输错了URL）
- 5XX 服务器端错误 - 服务器未能实现合法的请求
- 500 Internal Server Error 服务器发生了不可预期的错误
- 503 Server Unavailable 服务器当前不能处理客户端的请求，一段时间后可能恢复正常
4.0.1 HTTP1.0和HTTP1.1的区别
- HTTP1.0默认使用的是短连接。也就是说，浏览器和服务器每进行一次HTTP操作，就建立一次连接，但任务结束就中断连接。
但从 HTTP/1.1起，默认使用长连接，用以保持连接特性。使用长连接的HTTP协议，会在响应头有加入这行代码：
Connection:keep-alive
在使用长连接的情况下，当一个网页打开完成后，客户端和服务器之间用于传输HTTP数据的 TCP连接不会关闭，如果客户端再次访问这个服务器上的网页，会继续使用这一条已经建立的连接。Keep-Alive不会永久保持连接，它有一个保持时间，可以在不同的服务器软件（如Apache）中设定这个时间。实现长连接要客户端和服务端都支持长连接。长连接可以省去较多的TCP建立和关闭的操作，减少浪费，节约时间。
HTTP协议的长连接和短连接，实质上是TCP协议的长连接和短连接。
- HTTP 1.1增加host字段
- 缓存处理，在HTTP1.0中主要使用header里的If-Modified-Since,Expires来做为缓存判断的标准，HTTP1.1则引入了更多的缓存控制策略例如Entity tag，If-Unmodified-Since, If-Match, If-None-Match等更多可供选择的缓存头来控制缓存策略
参考资源
4.0.3 Https了解
Https和http的区别
- HTTPS协议需要到CA申请证书，一般免费证书很少，需要交费。
- HTTP协议运行在TCP之上，所有传输的内容都是明文，HTTPS运行在SSL(Secure Sockets Layer 安全套接层)/TLS(Transport Layer Security 传输安全层)之上，SSL/TLS运行在TCP之上，所有传输的内容都经过加密的。
- HTTP和HTTPS使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
- HTTPS可以有效的防止运营商劫持，解决了防劫持的一个大问题。
- 使用对称加密方式加密传输的内容
- 非对称方式加密上面加密数据用的解秘密钥
- 服务器向ca机构申请证书(包括加密过的服务器的公钥和权威机构的信息)
防治中间人攻击，伪造公钥给客户端
- ca机构用非对称的私钥加密上面的证书，并对证书进行签名
权威机构会和主流的浏览器或操作系统合作，将他们的公钥内置在浏览器或操作系统环境中。客户端收到证书之后，只需要从证书中找到权威机构的信息，并从本地环境中找到权威机构的公钥，就能正确解密A公钥。签名的目的是防止证书被掉包，同时确保下发的证书没有被篡改过以及确保证书是服务器下发的
- 客户端用证书中的公钥加密自己对称加密的秘钥
5.0 TCP/IP协议
网络模型.jpg
IP协议主要解决网络路由和寻址问题，TCP协议主要解决如何在IP层之上可靠的传递数据包，使在网络上的另一端收到发端发出的所有包，并且顺序与发出顺序一致
网友评论