27、移动端响应式布局开发

响应式布局开发

1、什么是响应式布局开发？
把我们开发完成的产品，能够让其适配不同的设备屏幕：PC、PAD、PHONE
2、H5
现在的H5已经成为移动端开发（响应式布局）的代名词
目前我们开发一款app需要h5的介入，在native-app（内置app）中嵌入H5页面（web-app），我们这种模式称之为Hybrid混合App开发

1、其实就是个HTML页面， 需要基于浏览器运行（PC或者移动端浏览器再或者V8内核的工具也可以），如果想要操作手机内部的软件或者硬件，需要浏览器的支持；
2、相比于native-app来说性能不好
3、所有的请求访问都必须基于联网的状态，虽然h5中支持manifest离线缓存，但是这个技术不怎么好用；
native-app不需要联网，是因为所有的代码文件都在手机上，一些需要联网访问的，native-app都可以做离线缓存（如缓存视频）；H5页面部署到了自己的服务器上，源文件都在服务器上，用户想要看页面，必须从服务器上重新拉取才可以；
4、好处：更新比较及时：H5只需要把服务器上的文件更新，用户每次访问看到的都是最新版本的；
H5是否能操作手机内部的软件或者硬件，取决于浏览器是否支持，如果浏览器支持，H5页面则可以调用，反之则不可以；例如：H5中想要调取摄像头，
[图片上传失败...(image-ecaa5e-1541658084393)]

常见的项目类型

1、PC端和移动端公用一套项目（同一个地址），我们也要保持良好得展示性，如：猎豹浏览器、华为官网等简单得展示网站
2、PC端和移动端用的是不同的项目，如：京东、淘宝、淘宝等
PC端固定布局即可
移动端响应式开发
1、放在浏览器中运行
2、放在第三方平台中运行（微信）
3、放在自己公司的native-app中运行；

手机常用尺寸
iphone3-5宽度：320px
iphone4：320480
iphone5：320568
iphone6：375667
iphone6plus：414736

做H5页面开发之前，需要先从设计师手里索要UI设计图，设计图提供了专门做移动端项目的设计稿尺寸
640960
6401136
750*1334设备像素密度比

如何做响应式布局开发？

只要当前页面需要在移动端访问，必然要加下面的代码
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
不加VP,不管手机设备有多宽,我们HTML页面的宽度都是980(如果在320的手机上观看HTML页面,为了保证把页面呈现完全,需要HTML缩小大概三倍左右,所有内容都变小了),为了不让页面缩放,我们需要让HTML的宽度和手机的宽度保持一致
width=device-width：让HTNML的宽度和设备的宽度保持一致
没有加VP：全体缩小了，需要手动缩放着看

//=>JS中动态设置vp
var vp=document.createElement('meta');
vp.name='viewport';
vp.content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0';
document.head.appendChild(vp);

REM响应式布局

和px像素一样，它是一个CSS样式单位
PX：固定单位
REM：相对单位（相对于页面根元素HTML字体大小设定的单位）
真实项目中如何使用REM实现响应式布局
1、先给文档（html）设置一个font-size=100px；
2、然后严格按照设计稿中提供的尺寸进行样式编写（不管是宽高、还是MARGIN、还是字体）;
3、根据当前屏幕的宽度和设计稿的宽度来计算我们HTML的fontSize的值
设计稿宽：640 时 fontSize=100px 。 盒子宽度 ：600px 我们则写6rem
手机宽：320 (320/640)100->只需要修改fontSize=50px就可以
手机宽：375 (375/640)100->修改fontSize=58.59375px就行了
根据当前屏幕的宽度和设计稿的宽度的比例，动态计算一下当前宽度下的fontSize的值应该是多少，fontSize改变，之前设定的所有rem单位的值会自动跟着放大或缩小；
公式：当前设备的宽度/设计稿宽度*100='当前手机下REM和PX的换算比例'

REM等比缩放响应式布局：目前在市场上，如果单独做移动端项目（项目只在移动端访问，PC端有单独的项目），我们选择响应式适配的最佳方案就是REM布局（当然细节处理可能会用到flex或者@media）

//如果当前屏幕的宽度已经大于设计稿的宽度，为了保证图片的良好展示，我们一般都不让其继续变大了，以设计稿的宽度为最后宽度，剩余的部分留空白显示；（如京东）
动态计算fontSize值的自执行函数（放在JS中即可）

~function(w){//w设计稿宽度
    var winW=document.documentElement.clientWidth//当前窗口宽
//如果当前屏幕的宽度已经大于设计稿的宽度，为了保证图片的良好展示，我们一般都不让其继续变大了，以设计稿的宽度为最后宽度，剩余的部分留空白显示；（如京东）
    if(winW>=w){
        document.documentElement.style.fontSize='100px';
        return;
    }
document.documentElement.style.fontSize=winW/w*100+"px";
}(传入的设计稿宽)；

28、移动端常用类库

Zepto

一个小型的，专门针对于移动端开发的JS类库，它的开发原理以及使用方式都非常接近于jq，所以很多人也把它称之为小型JQ
1、zepto不支持IE6-8,有一些方法连IE高版本都不支持，是专门为移动端准备的；
2、zepto只实现了部分JQ中常用的方法，有一些方法在zepto中无法使用，例如：JQ支持animate、hide、show、slideDown、slideUp……这些动画，但是zepto中只有animate，其他快捷动画不支持
zepto类库的体积比jQuery小很多
3、zepto中提供了移动端专用的事件操作方法，而jquery中没有；
tap(点击)
singleTap(单击)
doubleTap(双击)
longTap(长按)
swipe(滑动)
swipeUp(上滑)
swipeDown(下滑)
swipeLeft(左滑)
swipeRight(右滑)...
pinchIn/Out:放大缩小

$('selector').tap(function(e){
    实现点击的时候要做什么事
    e：手指事件对象 this：当前操作的元素
})

4、zepto中的animate支持transform变形，jQuery中是不支持的

$('selector').stop().animate({
    top:100,
    rotate:'360deg'
},1000,'linear',function(){
})

Swiper

swiper其实是一个UI组件，目的就是解决移动
如果我们采用的滑动效果（effect）是3D的（coverflow），最好不要采用无缝衔接（loop：true），这块的处理是有bug的；
zepto中常用的属性：

initialSlide:设定初始化时slide的索引。
direction:可设置滑动的方向：水平(horizontal)或垂直(vertical)。
speed:滑动一次所需要的时间
autoplay:自动轮播的时间间隔，不设置不会自动轮播
loop:设置为true 则开启无缝滚动模式
autoplayDisableOnInteraction:用户操作swiper之后，是否禁止自动轮播。默认为true：停止。
effect:切换效果。"slide" 位移切换(默认)
                "fade"  淡入
                "cube"  方块
                "coverflow"3d流
                "flip"  3d翻转
onlyExternal:值为true时，slide无法拖动
pagination:是否有分页器（如果需要，则需要给个标签类名），
    演示pagination:<div class="swiper-pagination"></div>
    pagination:'.swiper-pagination'
paginationType:分页器样式类型:'bullets'    圆点（默认）
                            'fraction'  分式 
                            'progress'  进度条
                            'custom'    自定义
paginationClickable:设置为true时，点击分页器的指示点分页器会控制Swiper切换
prevButton:'.swiper-button-prev'(上一张图片的按钮)
nextButton:'.swiper-button-next'(下一个图片的按钮)
lazyLoading:设为true开启图片延迟加载,要将图片img标签的src改写成data-src，并且增加类名swiper-lazy。
lazyLoadingInPrevNext:设为true允许将延迟加载应用到最接近的slide的图片（前一个和后一个slide）。

29、SEO与SEM优化

SEO和SEM是两种常规的推广手段
SEO：互联网推广
SEM：百度竞价
搜索引擎：百度、谷歌、360、搜狗...

当我们在百度搜索框中输入一个关键词，下面会呈现出很多网站，有的靠前有的靠后。如果想要靠前，就需要SE0优化技巧

1、各大网站都有一个自己的爬虫，每天都会去各个网站中检索内容，把一些内容或者关键词收录到自己的搜索引擎库中

2、当用户在搜索框中输入一个关键词，搜索引擎会通过关键词到自己的词库中进行检索，把所有匹配到内容对应的网站给检索出来，并且呈现给用户（谁的关键词被检索的次数多或者其他原因，决定排名的前后）

通过 site:网站的域名 可以查看出当前网站被搜索引擎收录的内容，我们也可以下载一些专门做SEO优化的工具 爱站工具…

对于前端开发而言，哪些事情有助于SEO优化

1、给网站设置META标签以及设置title（设置的内容可以找专业的优化人员要）

   1、title不可以乱写，这个是一个优化技巧

<meta name="keywords" content="">
  2、keywords这个META标签是用来设置网站关键词的
<meta name="description" content="">
   3、description这个META标签是设置网站的描述

2、注意代码上的优化，合理使用HTML标签，以及注意代码的SEO优化技巧

1、标签语义化
2、一个页面中的H1标签只能使用一次
3、img标签都要设置alt属性，在这个属性中声明当前图片的信息（蜘蛛不能收录图片，但是可以用抓取到图片alt属性的值）
4、HTML的层级不要太深，太深的层级，蜘蛛可能不会抓取和收录
5、把需要推广的关键词尽可能的在页面中曝光（最好写在H2-6标签中）

3、尽量不要使用前后端分离

在前后端分离的项目中，页面中的数据绑定交给后台处理（由服务器渲染页面），如果交给前端处理（由客户端渲染页面），渲染出来的数据，搜索爬虫是抓取不到的（在网站源码中无法看见通过客户端渲染数据的代码）

所有通过JS字符串拼接（ES6模版字符串、模版引擎..）绑定的数据，在网站源代码中都看不见，也就是无法收录

常用的meta标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    viewport对于移动端设备来说非常的重要，用于定义视口的各种行为。其中最为重要的就是要设定一个展示页面的宽度width=device-width
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title>Title</title>
</head>
<body>
</body>
</html> 

[不管是PC还是移动端都经常使用的]
http://www.zhufengpeixun.com/qianduanjishuziliao/CSS3heHTML5zhuanti/2016-06-29/457.html

[移动端常用的]
http://www.zhufengpeixun.com/qianduanjishuziliao/CSS3heHTML5zhuanti/2016-07-02/480.html

30、浏览器访问优化

1、减少HTTP请求

每发送一次请求都要完成一次HTTP事务，会消耗时间，也可能会导致HTTP链接通道的堵塞，为了提高页面加载速度，我们要减少HTTP请求次数和请求资源的大小(请求内容越大，消耗时间越长)

• 1）合并CSS、合并JS、CSS Sprites：将浏览器一次访问需要的javascript和CSS合并成一个文件，这样浏览器就只需要一次请求。图片也可以合并，多张图片合并成一张，合并成的图片大小应该是图片本身的大小。通过background-position来控制需要显示的图片位置。如果每张图片都有不同的超链接，可通过CSS偏移响应鼠标点击操作，构造不同的URL。

• 2）合理设置HTTP缓存：原则很简单，能缓存越多越好，能缓存越久越好。例如，很少变化的图片资源可以直接通过 HTTP Header中的Expires设置一个很长的过期头 ;变化不频繁而又可能会变的资源可以使用 Last-Modifed来做请求验证。尽可能的让资源能够在缓存中待得更久。

  1、Expires/Cache-Control Header是控制浏览器是否直接从浏览器缓存取数据还是重新发请求到服务器取数据。只是Cache-Control比Expires可以控制的多一些， 而且Cache-Control会重写Expires的规则。
2、Last-Modified/If-Modified-Since和ETag/If-None-Match是浏览器发送请求到服务器后判断文件是否 已经修改过，如果没有修改过就只发送一个304回给浏览器，告诉浏览器直接从自己本地的缓存取数据；如果修改过那就整个数据重新发给浏览器。

• 3）启用Gzip压缩
  Gzip的思想就是把文件先在服务器端进行压缩，然后再传输。

• 客户端可以通过HTTP请求头中的Accept-Encoding属性来标识对压缩的支持（Accept-Encoding：gzip,deflate），服务器看到请求中有这个头，就会使用客户端列出的一种方法来压缩响应。这样可以显著减少文件传输的大小。传输完毕后浏览器会 重新对压缩过的内容进行解压缩，并执行。一般Gzip的压缩率为85%左右；

• 4）图片延迟加载与数据懒加载：这条策略实际上并不一定能减少 HTTP请求数，但是却能在某些条件下或者页面刚加载时减少 HTTP请求数。对于图片和数据而言，在页面刚加载的时候可以只加载第一屏，当用户继续往后滚屏的时候才加载后续的图片和数据。这样一来，假如用户只对第一屏的内容感兴趣时，那剩余的图片和数据请求就都节省了。
• 5）使用字体图标代替页面中的位图，可以减少HTTP请求次数（类似雪碧图）
• 6）配置ETags： Etag是服务器告诉浏览器缓存，缓存里的内容是否已经发生变化的一种机制，通过Etag，浏览器就可以知道现在的缓存中的内容是不是最新的，需不需要重新从服务器上下载

2、使用浏览器缓存（使用loaclstorage）

• 对一个网站而言，CSS、javascript、logo、图标这些静态资源文件更新的频率都比较低，而这些文件又几乎是每次http请求都需要的，将这些文件通过loaclstroge缓存在浏览器中，可以极好的改善性能。

3、使用CDN（内容发布网络）

• CDN是一组分布在多个不同地理位置的web服务器，如果web服务器离服务器更近，则一个HTTP请求的响应时间将缩短。每个服务器都拥有所有网站的文件副本，用户访问网站时，就可以从离用户最近的服务器发送所需的文件给客户端。

4、将CSS放在顶部head中，JS放在body尾部

• 由于CSS放在document底部时，在IE下，为了防止重画页面元素，会禁止HTML正常加载顺序，会等到CSS加载完之后再加载HTML，那么在这段期间用户只能看到空白页面。火狐浏览器不会禁止HTML正常加载，但是意味着css下载后，有些元素样式要重画，这样就会导致页面闪烁的问题；
• 将脚本放在顶部或页面中，浏览器会对script标签内的内容进行解析，从而阻塞样式的渲染。除此之外，HTTP1.1规范建议浏览器从每个主机并行的下载两个组件，在高版本的IE和chrome、Firefox等浏览器则支持并行下载六个组件。但script会阻塞并行下载。因此我们应该将脚本放在底部

5、避免CSS表达式

• CSS表达式具备求值计算能力，然而每次页面发生重绘时，CSS表达式会影响页面的加载时间。

6、减少cookie传输

• 一方面，cookie包含在每次请求和响应中，太大的cookie会严重影响数据传输，因此哪些数据需要写入cookie需要慎重考虑，尽量减少cookie中传输的数据量。另一方面，对于某些静态资源的访问，如CSS、script等，发送cookie没有意义，可以考虑静态资源使用独立域名访问，避免请求静态资源时发送cookie，减少cookie传输次数。

7、Javascript代码优化

• 1）DOM存在映射机制（浏览器默认构建的机制），操作DOM的时候获取DOM元素集合为一个类数组集合，在JS中，document.images、document.forms、getElementsByTagName()返回的都是HTMLCollection类型的集合，在平时使用的时候大多将它作为数组来使用，因为它有 length属性，也可以使用索引访问每一个元素。不过在访问性能上则比数组要差很多，原因是这个集合并不是一个静态的结果，它表示的仅仅是一个特定的查询，每次访问该集合时都会重新执行这个查询从而更新查询结果。所谓的“访问集合” 包括读取集合的 length属性、访问集合中的元素。 因此，当你需要遍历 HTML Collection的时候，尽量将它转为数组后再访问，以提高性能。即使不转换为数组，也请尽可能少的访问它，例如在遍历的时候可以将 length属性、成员保存到局部变量后再使用局部变量。
• 2）DOM操作还需要考虑浏览器的回流和重绘，当元素的样式发生改变(不修改元素位置的样式)，浏览器会把当前元素重新的进行渲染(DOM性能消耗低)。当元素的位置发生改变，浏览器会把整个页面的DOM结构进行重新计算，计算出所有元素的最新位置，然后再渲染(DOM性能消耗非常大)。这些都是需要消耗资源的；
• 3）给DOM绑定事件的时候避免一个个绑定，而是采用性能更高的事件委托来实现；
• 4）避免使用eval和Function函数，每次 eval 或Function 构造函数作用于字符串表示的源代码时，脚本引擎都需要将源代码转换成可执行代码。这是很消耗资源的操作 —— 通常比简单的函数调用慢 100倍以上。
• 5)使用异步编程：同步编程可能会有阻塞作用，如AJAX请求，我们一般都要使用异步编程，最好事基于promise设计模式进行管理
• 6）JS中尽量少使用闭包：闭包会形成一个不销毁的栈内存，过多的栈内存累积会影响页面的性能，还会导致内存泄露；

8、保持Js和CSS外部引用

• 使用外部文件通常会加快页面速度，因为这样js,css文件可以被浏览器缓存。如果js,css采用内嵌式，每次请求页面的时候都会重新加载。这样虽然减少了http请求数量，但是增加了html的大小。从另一方面来说，如果js,css在外部文件中并且被浏览器缓存，那么后续请求不会增加html文档大小，也不会增加http请求数量(外部文件从浏览器缓存中取，不经过http请求了)。
  内联可以降低http请求，使用外部文件缓存也有好处。通常的处理是首页内联js,css，当也加载完成之后再动态下载外部文件，这样后续页面就可以从浏览器缓存中获取这些文件。

9、压缩以及剔除重复的CSS和JS

10、减少DNS查询

• DNS查询有时间开销，通常一个浏览器查找一个给定主机名的IP地址需要20-120ms。缓存DNS：缓存DNS查询可以很好地提高网页性能，一旦缓存了DNS查询，之后对于相同主机名的请求就无需进行再次的DNS查找，至少短时间内不需要。所以在使用页面中URL、图片、js文件、css文件等时，不要使用过多不同的主机名。

11、避免重定向

• 重定向的英文是Redirect，用于将用户从一个URL重新跳转到另一个URL。最常见的Redirect就是301和302两种。在我们实际开发中避免重定向最简单也最容易被忽视的一个问题就是，设置URL的时候，最后的“/”，有些人有时候会忽略，其实你少了“/”，这时候的URL就被重定向了，所以在给页面链接加URL的时候切记最后的“/”不可丢。

12、使Ajax可缓存

• 针对页面中主动的Ajax请求返回的数据要缓存到本地，当然这个是针对短期内不会变化的数据。如果不确定数据变化周期的话，可以增加一个修改标识的判断，我正常处理过程中会给一些Ajax请求返回的数据增加一个MD5值的判断，每次请求会判断当前MD5是否变化，如果变化了取最新的数据，如果不变化，则不变。

13、客户端与服务器端通信时尽量采用JSON格式数据进行传输

• 优势：
• 1）JSON数据能够清晰明了的展示出数据解构，而且也方便我们获取和操作
• 2）相对于XML，JSON数据更加轻量级
• 3）客户端和服务器端都支持JSON数据的处理，使用起来方便；
  并不是所有数据都可以用JSON，如：文件流的传输或者文档的传输，用JSON就不合适了；

14、CSS选择器优化

1）尽量减少标签选择器的使用
2）尽可能少使用ID选择器，多使用样式雷选择器（通用性强）
3）减少选择器前的前缀

31、前后端的通信方式以及HTTP

前后端需要用的技术

需要用到的技术栈
[前端]
HTML（5）+CSS（3）
JAVAscript

[后端]

java
Node
PHP
C#
C
[数据库]

mySQL
SQL Server
mongodb（和node结合紧密）

[自动化]
git、svn
weboack（基于NODE运行的）
服务器部署工具 iis、apache、nginx

前端和后端是如何通信的

前端：客户端
后端：服务器端
前后端通过HTTP协议进行通信；
所谓的全栈，其实是你可以实现客户端和服务器端程序的编写，而且还可以实现两端之间的通信

经典面试题

当我们在浏览器地址栏中输入一个URL地址，到最后看到页面，中间都经历了哪些事情？
主要分为三个阶段(请求request、响应response、渲染dom render)；

[Request请求阶段]

1、首先根据客户端输入的域名、到DNS服务器上进行反解析（通过域名找到对应服务器的外网IP）
2、通过找到的外网IP，找到对应的服务器
3、通过在地址栏中输入的端口号（没输入是因为不同协议有自己不同的默认端口号）找到服务器上发布的对应的项目；

[Response响应阶段]

4、服务器获取到请求资源文件的地址例如：/stu/index.html,把资源文件中的源代码找到
5、服务器端会把找到的源代码通过HTTP等传输协议返回给客户端（

[浏览器渲染阶段]

6、客户端接收到源代码后，会交给浏览器的内核进行渲染，最后由浏览器绘制出对应的页面

[图片上传失败...(image-5bb40-1541658084393)]

假设我们访问的是www.baidu.com这个地址，按下enter之后，我们可以看到百度首页面：
1）百度页面并没有在我们自己的客户端本地，我们是输入地址后，才请求过来的
2）输入不同域名可以看到不同的页面
3）有的网址是https，有的是http（有的是ftp）
4）需要客户端联网才能完成这些事情

什么是内网IP

内网（局域网：具备相同的DNS和默认网关，并且由相同的路由器下发的IP，限定在一定区域内访问的）
自测：自己开发测试
内测：上传到公司内网测试服务器上，交由公司测试进行BUG追踪
公测：产品正式部署到外网服务器上

什么是外网IP

外网是不管是不是在同一个网段，用户都可以通过外网IP访问到你的服务器（一般我们会在服务器上做处理，禁止直接通过IP访问）

如何把本地文件上传到服务器

通过FTP把自己本地的项目文件上传到服务器执行的目录中(filezilla：ftp上传文件工具)
DNS服务器 域名解析服务器
域名和服务器关联在一起，是通过DNS解析完成的，所谓DNS解析就是在DNS服务器上生成了一条解析记录，标注了子域名和对应的服务器的外网IP地址；

URL/URI/URN

URI：统一资源标识符
URL：统一资源路径地址
URN：统一资源名称
URI=URL+URN 统一资源标识符（统一资源信息）

一个完整的URL包含很多部分：
http://v.qq.com:80/index.html?name=zhufeng&age=7#bbs

传输协议

客户端传递给服务器端的内容和服务器端传递给客户端的内容都是通过HTTP传输协议进行传输的（可以把HTTP理解为快递小哥）
1、客户端不仅可以向服务器发送请求，而且还可以把一些内容传递给服务器
2、服务器端也可以把内容返回给客户端

客户端请求的内容和服务器端响应的内容总称为<font color=red>HTTP报文</font>。这些报文信息都是基于传输协议完成传输的，客户端传递给服务器叫做请求（Request），服务器返回给客户端叫做响应（Respone），request+response两个阶段统称为HTTP事务（事务：一件完整的事情）

HTTP事务：
1、当客户端向服务器端发送请求，此时客户端和服务器端会建立一个传输通道（链接通道），传输协议就是基于这个通道把信息进行传输的
2、当服务器端接收到请求信息，把内容返回给客户端后，传输通道会自动销毁关闭；

传输协议分类

http：超文本传输协议

• 客户端和服务器端传输的内容除了文本以外，还可以传输图片、音视频等文件流[二进制编码、BASE64码]，以及传输XML格式的数据等），是目前市场上应用最广泛的传输协议；

https：http ssl

• 它比http更加安全，因为数据内容的传输通道是经过ssl加密的（它需要在服务器端进行特殊的处理），所以涉及资金类的网站一般都是https协议的

ftp：资源文件传输协议

• 一般用于客户端把资源文件（不是代码）上传到服务器端，或者从服务器端下载一些资源文件（一般ftp传输的内容会比http这类协议传输的内容多）

HTTP报文

客户端请求的内容和服务器端响应的内容总称为<font color=red>HTTP报文</font>
包括以下部分：
1、起始行

• 请求起始行
• 响应起始行

2、首部（头）

• 请求头：内置请求头、自定义请求头
• 响应头：内置响应头、自定义响应头
• 通用头：请求和响应的都有

3、主体

• 请求主体
• 响应主体

请求xxx都是客户端设置的信息，服务器端获取这些信息；
响应xxx都是服务器端设置的信息，客户端获取这些信息；

在谷歌浏览器控制台NetWork中选项中，我们可以看见当前客户端和服务器端交互的全部信息；

客户端向服务器端传递数据的3种方式
1、URL问号传参
2、设置请求头
3、设置请求主体

服务器端返回给客户端数据的2种方式
1、设置响应头（例如服务器时间）
2、设置响应主体

域名

设置域名其实就给不好记忆的服务器外网IP设置了一个好记忆的名字
顶级域名（一级域名）：qq.com
二级域名：www.qq.com、v.qq.com、sports.qq.com ...
三级域名：kbs.sports.qq.com

端口号

在服务器上发布项目的时候，我们用端口号来区分不同的项目
一台服务器的端口号范围：0~65535
如果电脑上安装了很多程序，有一些端口号是被占用了
HTTP默认端口号：80
HTTPS默认端口号：443
FTP：默认端口号21
对于上述三个端口号是很重要的，如果被其他程序占用，我们则不能使用了；所以服务器上一般是禁止安装其他程序的；

请求资源文件的路径名称

在服务器中发布项目的时候，我们一般都会配置一些默认文档：用户及时不输入请求文件的名称，服务器也会找到默认文档（一般默认文档都是index/default...）;
我们通常为了做SEO优化，会把一些动态页面的地址进行伪URL重写（服务器处理），把动态的URL地址重写为静态的URL地址，利于爬虫抓取

问号传参

?name=zf&age=9
把一些值通过xxx=xxx的方式，放在一个URL的末尾，通过问号传递；
[作用]
1、在AJAX请求中，我们可以通过问号传递参数的方式，客户端把一些信息传递给服务器，服务器根据传递信息的不一样，返回不同的数据；
2、消除AJAX请求中GET方式的缓存：比如
http://www.xxxxx.com/index.html
http://www.xxxxx.com/index.html?test123123
两个url打开的页面一样，但是后面这个有问号，说明不调用缓存的内容，而认为是一个新地址，重新读取。
3、通过URL传参的方式，可以实现页面之间信息的通讯，例如：我们有两个页面A/B，A是列表页面，B是详情页，点击A中的某一条信息，进入到唯一的详情页B，可以通过URL传递不同得参数来获取不同的数据；

哈希值

URL末尾传递的井号什么，就是HASH值（哈希值）
作用：
1、页面中锚点定位
2、前端路由(SPA单页面开发)

32、AJAX基础知识

什么是AJAX？
async javascript and xml（异步的JS和XML）
客户端JS中的方法，用来向服务器端发送请求（还可以传递给服务器端数据），然后把服务器端返回的内容获取到（一般运行在客户端的浏览器中的）。

XML：可扩展的标记语言（一种数据格式）
利用自己扩展的有规则的标记来存储相关数据的

异步的JS

这里的异步不是说AJAX只能基于异步进行请求，这里的异步特指的是局部刷新

全局刷新和局部刷新

[全局刷新]
所谓的全局刷新就是页面中的每次数据更新，都会从服务器获取到最新的已经渲染好的源代码，然后拿到浏览器中进行展示；
[优势]
1）动态展示的数据在页面的源代码中可以看见，有利于SEO优化推广（有利于搜索引擎的收录和抓取）
2）从服务器获取的结果就已经是最后要呈现的结果了，不需要客户端做额外的事，所以页面加载速度快，（前提是服务器端处理的速度够快）如淘宝、京东的首屏数据一般都是由服务器端渲染

[弊端]
1）页面中的数据需要实时更新，即使是一张小图片更新，每次也都需要重新刷新一次。
2）都交给服务器端做数据渲染，服务器端的压力大，如果服务器处理不过来，页面呈现的速度更慢
3）全局刷新不利于开发（开发效率低）

[局部刷新]
前后端完全分离的项目，页面中需要动态绑定的数据是交给客户端完成渲染的：客户端渲染要以下步骤：
1、向服务器端发送AJAX请求
2、把从服务器端获取的数据解析处理，拼接成为我们需要展示的HTML字符串
3、拿拼接好的字符串替换页面中某一部分需要更新的内容（局部刷新），页面整体不需要重新加载，局部渲染即可
[优势]
1、我们可以根据需求，任意修改页面中某一部分内容（如实时刷新），整体页面不刷新，性能好，体验好（所有表单验证、需要实时刷新的需求都要基于AJAX实现）
2、有利于开发，提高开发效率

• 1）前后端的完全分离，后台不需要考虑前端如何实现，前端也不需要考虑后台用什么技术，真正实现了前后端分离
• 2）可以同时开发：项目开发开始，先制定前后端数据交互的接口文档（文档中包含了调取哪个接口或者哪些数据等协议规范），后台把接口写好，客户端按照接口调取即可，后台再去实现接口功能即可；

[弊端]
1、不利于SEO优化：第一次从服务器端获取的内容不包含需要动态绑定的数据，不利于SEO收录，后期通过JS添加到页面中的内容，并不会写到源代码中
2、由于需要动态绑定数据后，再交给浏览器渲染。所以没有服务器渲染页面呈现速度快；

基于原生JS实现AJAX

Ajax四步:
let xhr=new XMLHttpRequest();
xhr.open("get","/data.txt",false);
xhr.onreadystatechange=function（）{
    if（xhr.readyState===4&&/^2\d{2}$/.test（xhr.status））{
        var val=xhr.responseText;
    }
}；
xhr.send（null）；

AJAX请求方式

AJAX第一步：let xhr=new XMLHttpRequest;

创建一个AJAX对象，IE6以下不支持;

AJAX第二步：xhr.open(method,url,async,username,userpass);解析

第二步代表发送前的基本信息配置（并没有发送请求）。open方法中的参数详解如下：
method：请求方式（以下方法都可以从服务器获取数据，也可以向服务器传递数据）

  GET：一般用于从服务器获取数据（也可以向服务器发送数据） 
POST：一般用于向服务器推送数据
PUT：用于给服务器上增加资源文件（上传图片）
DELETE：用于从服务器上删除资源文件
HEAD：用于只获取服务器的响应头信息

url：请求的URL地址（配置向哪一个服务器地址发送请求）
async：同步还是异步（true代表异步，false代表同步，默认为true）
用户名和密码：这两个参数一般不用，如果你请求的URL地址所在的服务器设定了访问权限，则需要我们提供可通行的用户名和密码，才可以（一般服务器都是可以允许匿名访问的）

总结：
<font color=red>GET与POST区别：</font>
1、大小问题：GET请求传递给服务器的内容大小存在限制而POST理论上没有限制。存在限制的原因是浏览器对URL的长度存在限制。各浏览器都有自己的URL最大长度限制（谷歌：8KB，火狐：7KB，IE：2KB），超出的部分会被截取；而post请求一般都是基于设置请求主体来实现的，理论上post通过请求主体传递是没有大小限制的；
2、速度的问题：与 GET 请求相比， POST 请求消耗的资源会更多一些。从性能角度来看，以发送相同的数据计， GET 请求的速度最多可达到 POST 请求的两倍
3、缓存的问题：GET请求会出现缓存（这个缓存不一定是304），会产生缓存是因为GET请求是通过URL问号传参来实现数据传递的（浏览器会根据每次请求时的URL地址与上次请求的地址是否相同，来判定是读取上次请求的缓存，还是再请求一次拿到最新数据）；POST是没有缓存的。如何解决GET请求出现缓存：在URL的末尾追加一个随机数；

$.ajax({
    url:''+Math.random()
})

4、安全问题:一般来说GET不安全，GET请求是通过URL传参把数据传递给服务器，用户名和密码将明文出现在URL上，而黑客可通过URL劫持获取到get请求问号传参传递的内容。数据不太安全而POST相对安全一些

AJAX第三步：xhr.onreadystatechange=function（）{};解析

此步骤作用：监听AJAX状态改变，获取响应信息(获取响应头信息、获取响应主体信息)

xhr.onreadystatechange=function（）{
    if（xhr.readyState===4&&/^2\d{2}$/.test（xhr.status））{
        var val=xhr.responseText;
    }
}；

xhr.readyState:AJAX状态码，代表当前AJAX处理的进度，可能的值如下：
<font color=red>0</font> ：UNSENT 当前的请求还没发送(未调用open方法)
<font color=red>1</font> ：OPENED URL地址已经打开（已调用open方法未调用send方法）
<font color=red>2</font> ：HEADERS_RECEIVED 当前AJAX的请求已经发送，并且已经接收到服务器端返回的响应头信息了（已经调用send方法，2的时候就已经可以拿到响应头信息了）
<font color=red>3</font> ：LOADING 已经接收到部分响应数据
<font color=red>4</font> ：DONE 响应主体的内容已经成功返回到客户端

xhr.status:HTTP网络状态码，描述了当前服务器返回信息的状态，可能的值如下：

<font color=red>200 或者^2\d{2}</font> ： (200或以2开头的)都代表响应主体的内容已经返回成功

（以3开头的也算请求成功，只不过服务器端做了很多特殊的处理）
<font color=red>301</font> ：永久重定向/永久转移（一般用于域名迁移）
<font color=red>302</font> ：临时重定向/临时转移(一般用于服务器的负载均衡，当服务器访问量过大，就把当前的请求临时交给其他服务器处理)
<font color=red>304</font> ：本次获取的内容是读取缓存中的数据（把一些不经常更新的文件或者内容缓存到浏览器中，下一次从缓存中获取，减轻服务器压力，也提高了页面加载速度）

（以4开头的一般都是失败，而且客户端的问题偏大）
<font color=red>400</font> ：客户端传递给服务器端的参数出现错误
<font color=red>401</font> ：无权限访问
<font color=red>404</font> ：要访问地址不存在

（以5开头的一般都是失败，而且服务器端的问题偏大）
<font color=red>500</font> ：未知的服务器错误
<font color=red>503</font> ： 服务器已经超负荷

xhr.responseText：接收到的响应主体中的内容；

AJAX第四步：xhr.send(null);解析

这一步才算发送请求：参数是请求主体中需要传递给服务器的内容
向服务器发送请求的任务，才算开始；

AJAX属性方法解析

属性

readyState：存储的是当前AJAX的状态码
response/responseText/responseXML：都是用来接收服务器返回的响应主体中的内容，只是格式不一样

• responseText：是最常用的，接收到的结果是字符串格式的（一般服务器返回的数据都是JSON格式字符串）
• responseXML偶尔会用到，如果服务器返回的是XML文档数据，需要用此属性接收

status：服务器返回的HTTP状态码
statusText：对返回状态码的描述
timeout：设置当前AJAX请求的超时时间，表示请求在等待响应多少毫秒之后就终止。在给timeout 设置一个数值后，如果在规定的时间内浏览器还没有接收到响应，那么就会触发 timeout事件

方法

abort：强制中断AJAX请求
open：打开一个URL地址
send：发送AJAX请求（参数是请求主体中传递给服务器的内容）
getAllResponseHeaders：获取全部的响应头信息（结果为字符串文本）
getResponseHeader（key）：获取指定属性名的响应头信息
setRequestHeader（key，value）：设置请求头信息（可以是自定义的请求头）
overrideMimeType：重写数据的MIME类型

事件

onabort：AJAX被中断触发此事件
onreadyStateChange：AJAX状态发生改变触发此事件
ontimeout：请求超时后触发此事件

JS中常用的编码解码方法

正常的编码解码（非加密）
1、escape/unescape：主要就是把中文汉字进行编码和解码（一般只有JS语言支持：常用于前端页面通信时候的中文汉字编码）
2、encodeURI/decodeURI：基本上所有的编程语言都支持；
3、encodeURIComponent/ decodeURIComponent：使用对应的编码替换所有非字母数字字符。
encodeURI与encodeURIComponent[kəmˈpoʊnənt]的区别：

• encodeURI() 编码后的结果是除了空格之外的其他字符都原封不动,只有空格被替换 。而 encodeURIComponent() 方法则会使用对应的编码替换所有非字母数字字符。

加密编码解码
1、可逆转加密（一般都是自己定规则）
2、不可逆转加密（基于MD5加密完成，为了安全一般都进行二次加密）

let str = 'http://www.baidu.com/?',
    obj = {
        name:'珠峰培训',
        age:9,
        url:'http://www.zhufengpeixun.cn/?lx=1'
    };
//=>把OBJ中的每一项属性名和属性值拼接到URL的末尾（问号传参方式）
for(let key in obj){
    str+=`${key}=${encodeURIComponent(obj[key])}&`;
    //=>不能使用encodeURI必须使用encodeURIComponent，原因是encodeURI不能编码特殊的字符
}
console.log(str.replace(/&$/g,''));

//=>后期获取URL问号参数的时候，我们把获取的值在依次的解码即可
String.prototype.myQueryUrlParameter=function myQueryUrlParameter(){
    let reg=/[?&]([^?&=]+)(?:=([^?&=]*))?/g,
    obj={};
    this.replace(reg,(...arg)=>{
        let [,key,value]=arg;       
        obj[key]=decodeURIComponent(value);//=>此处获取的时候可以进行解码    
    });
    return obj;
}

AJAX中的同步异步

Ajax中的同步：当AJAX任务开始的时候，直到readyState为4的时候任务才结束，此时才可以处理其他的事情；
Ajax中的异步：当AJAX任务开始的时候，不需要等到readyState为4我依然可以继续做其他的任务，并且只有当其他的任务完成后，我们再看readyState是否等于4，到4再做相关操作；
倒计时抢购时间差如何处理，在异步ajax请求readyState=2的时候拿到服务器时间，减少时间差。

倒计时抢购

let getSeverTime=function () {
        let xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function () {
            /*以2或3开头都算获取成功*/
            if(!/^(2|3)\d{2}$/.test(xhr.status))return;
            if(xhr.readyState===2){
                /*只在第一次的时候获取服务器的时间，下次直接在其基础上+1就行*/
                severTime=new Date(xhr.getResponseHeader("date")).getTime();
            }
        };
        /*尽可能的减少时间差*/
        /*只获取响应头信息即可，所以请求方式使用head即可，head请求中状态码没有3，因为不需要等待接收响应主体内容*/
        xhr.open('head','json/banner.txt',true);
        //只能使用异步，同步的时候无法在状态为2或3的时候做处理，而我们要获取响应头信息，在状态为2的时候就可以获取了，所以需要异步
        xhr.send(null);
    };

jQuery中的AJAX

$.ajax({
        url:'xxx.txt',
        method:'get',
        /*dataType只是我们预设获取结果的类型，无法影响服务器传递给我们的类型，只能拿到服务器的数据后，jQuery再进行转化*/
        dataType:'json',
        /*是否清除缓存*/
        cache:true,
        /*同步还是异步 false代表同步*/
        async:true,
/*我们可以通过data属性把一些信息传递给服务器；get方式通过问号传参，post通过设置请求主体*/
/*data的值可以为：字符串、对象，如果是对象，JQ会把对象转化为xxx=xxx&xx=xx 这种字符串传递给服务器*/
        data:null,
        success:function (result) {
            /*请求成功后（xhr.readyState为2或3开头）才会触发此函数*/
        },
        complete:function () {
          /*不管请求是否成功都会触发此函数*/
        }
})