HTTP相关知识

1、 将本地项目部署到服务器上，让别人可以访问：

• 购买一台服务器
• 购买域名（baidu.com）
• 将本地项目上传到服务器
• 让域名和服务器（IP）关联（DNS域名解析）
• 因为多个域名可以关联到同一台服务器（有同一个IP），如果所有关联的域名都解析为同一个IP地址，要怎么知道去服务器的那一块查找呢？通过设置端口号。这时就需要在服务器上发布或部署我们的项目了（IIS、nginx、apache…）

2、 在浏览器输入一个URL地址，到最后看到页面，中间经历了哪些过程？

假设访问https://www.baidu.com 这个地址，按下ENTER键后，可以看到百度首页：
1）百度首页并没有在自己的客户端本地，是输入地址后，才请求过来的
2）输入不同的域名可以看到不同的页面
3）有的网址是https，有的是http（也有的是ftp）
4）需要客户端联网才能完成这些事
… …
------------------------------------------------
都经历那些事情：
【请求阶段】
（1）首先根据客户端输入的域名，到DNS服务器进行反解析（通过域名找到对应服务器的外网IP）。
（2） 通过找到的外网IP，找到对应的服务器。
（3）通过在地址栏输入的端口号（没输入是因为不同协议有自己默认端口号）找到服务器上发布的对应项目。
【响应阶段】
（4）服务器获取到请求资源文件的地址，把资源文件中的源代码找到。
（5）服务器会把找到的源代码返回给客户端（通过HTTP等传输协议返回的）。
【浏览器自主渲染 】
（6）客户端接收到源代码后，会交给浏览器的内核（渲染引擎）进行渲染，最后由浏览器绘制出对应的页面。

从输入URL到页面加载全过程：

• DNS解析
• TCP连接
• 发送HTTP请求
• 服务器处理请求并返回HTTP报文
• 浏览器解析渲染页面

3、URL、URI、URN

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

一个完整的URL包含很多部分： http://www.html5train.com/stu/index.html?name=zf&age=9&teacher=zxt#good

第1部分：传输协议
传输协议是用来完成客户端和服务器的数据（内容）传输的，类似于快递小哥，负责把客户和商家的物品来回传送。

• 客户端不仅可以向服务器发送请求，而且还可以把一些内容传递给服务器。
• 服务器也可以把内容返回给客户端。
• 客户端和服务器端传输的内容总称：HTTP报文，这些报文信息都是基于传输协议完成传输的，客户端传递给服务器叫做请求（Request），服务器返回给客户端叫做响应（Response），Request + Response 两个阶段统称为一个HTTP事务（事务：一件完整的事情）。

HTTP事务：

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

传输协议分类：

• http：超文本传输协议（客户端和服务器传输的内容除了文本以外，还可以传输图片、音视频等文件流（二进制编码/BASE64码），以及传输xml格式的数据等）。
• https： http ssl，它比http更加安全，因为数据内容的传输通道是经过ssl加密的（它需要在服务器端进行特殊的处理）。所以涉及资金类的网站一般都是https协议的。
• ftp： 资源文件传输协议，一般用于客户端把资源文件（不是代码）上传到服务器，或者从服务器端下载 一些资源文件（ftp传输的内容会比http这类协议传输的内容多 ）。
• … …

HTTP报文：
分为三个部分：
1、起始行

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

2、首部（头）

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

3、主体

• 请求主体
• 响应主体

请求XXX都是客户端设置的信息，服务器获取这些信息；响应XXX都是服务端设置的信息，客户端用来接收这些信息。
在谷歌浏览器控制台的Network选项卡中，我们可以看见当前客户端和服务器端交互的全部信息。

总结：
客户端传递给服务器端数据：
1、 URL问号传递参数
2、设置请求头
3、设置请求主体
… …
服务器端返回给客户端内容：
1、设置响应头（例如服务器时间）
2、设置响应主体
… …

第2部分：域名

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

第3部分：端口号

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

第4部分：请求资源文件的路径名称

/stu/index.html
在服务器中发布项目的时候，我们一般都会配置一些默认文档，用户即使不输入请求文件的名称，服务器也会找到默认文档（一般默认文档都是index/default…）。
我们通常为了做SEO优化，会把一些动态页面的地址（xxx.php、xxx.aspx、xxxx.asp、xxx.jsp…）进行伪URL重写（需要服务器处理的）。
https://item.jd.com/4325427.html
不可能是有一个商品，自己就单独写一个详情页面，肯定是同一个详情页做的不同处理。
1）第一种方案： 由后台语言根据详情页模板动态生成具体的详情页面。
2）第二种方案：当前页面就是一个页面，例如：detail.html/detail.php …，开发是按照detail.html?id=4325427来开发的：但是这种页面不方便做SEO优化，此时我们把真是的地址进行重写，重写为我们看到的 4325427.html。

第5部分：问号传参

?name=zf&age=9…
把一些值通过xxx=xxx的方式，放在一个URL的末尾，通过问号传递。
【作用】：
1）在AJAX请求中，我们可以通过问好传递参数的方式，客户端把一些信息传递给服务器，服务器根据传递信息的不一样，返回不同的数据。
2）消除AJAX请求中GET方式缓存。

3）通过URL传递参数的方式，可以实现页面之间信息的通信，例如：我们有两个页面A和B，A是列表页面，B是详情页，点击A中的某一条信息，进入到唯一的详情页B，如何展示不同的信息，这种操作就可以基于URL问号传递参数来实现了。
在列表页面进行跳转的时候，我们需要记住的是跳转的同时传递不同的参数值。
<a href='game.html?mid=xxxx'>

第6部分：HASH值

#xxx
URL 末尾传递的#后面的值，就是哈希值
【作用】：
1、页面中锚点定位
2、前端路由（SPA单页面开发）

4、WEB前端开发常用的优化技巧汇总

参考雅虎团队总结的35条前端优化技巧：https://www.cnblogs.com/lei2007/archive/2013/08/16/3262897.html

减小HTTP请求的次数或者减少请求数据的大小

页面中每发送一次HTTP请求，都需要完成请求+响应这个完整的HTTP事务，会消耗一些时间，也可能会导致HTTP链接通道的堵塞，为了提高页面加载速度和运行的性能，我们应该减少HTTP的请求次数和减少请求内容的大小（请求的内容越大，消耗的时间越长）。

1、 采用CSS雪碧图（CSS Sprite/ CSS图片精灵）技术，把一些小图合并在一张大图上，使用的时候通过背景图定位，定位到具体某一张小图上。

.pubBg{
	background: url('../img/sprit.png') no-repeat;
	background-size: x y; /*和原图的大小保持一致*/
}
.box{
	background-position: x y; /*通过背景定位，定位到具体的位置，展示不同的图片即可*/
}

<div class='pubBg box'></div>

2、真实项目中，我们最好把CSS或者JS文件进行合并压缩：尤其是在移动端开发的时候，如果CSS或者JS内容不是很多，我们可以采取内嵌式，以此减少HTTP。

（1）CSS合并成一个，JS也最好合并成一个.
（2）首先通过一些工具（如webpack）把合并后的CSS或者JS压缩成xxx.min.js，减少文件大小。
（3）服务器端开启资源文件的GZIP压缩 … …

通过一些自动化工具完成CSS以及JS的合并压缩，或者再完成LESS转CSS，ES6转ES5等操作，我们把这种自动化构建模式，称之为前端“工程化”开发。

3、采用图片懒加载技术，在页面开始加载的时候，不请求真是的图片地址，而是用默认图占位，当页面加载完成后，再根据相关的条件一次加载真实图片（减少页面首次加载HTTP请求的次数）。

真实项目中，我们开始图片都不加载，页面首次加载完成，先把第一屏幕中可以看见的图片进行加载，随着页面滚动，再把下面区域中能够呈现出来的图片进行加载。

根据图片的懒加载技术，我们还可以扩充出，数据的懒加载。

（1）开始加载页面的时候，我们只把首屏或者前两屏的收据从服务器端进行请求（有些网站首屏数据是后台渲染好，整体返回给客户端呈现的）。
（2）当页面下拉，滚动到哪个区域，再把这个区域需要的数据进行请求（请求回来做数据绑定以及图片延迟加载等）。
（3）分页展示技术采用的也是数据的懒加载思想实现的。如果我们请求获取的数据是很多的数据，我们最好分批请求，开始只请求第一页的数据，当用户点击第二页（微博是下拉到一定距离后，再请求第二页数据…）的时候再请求第二页数据…

4、 对于不经常更新的数据，最好采用浏览器的304缓存做处理（主要由服务器处理）。

例如：
第一次请求CSS和JS下来，浏览器会把请求的内容缓存起来，如果做了304处理，用户再次请求CSS和JS，直接从缓存中读取，不需要再去服务器获取了（减少HTTP的请求次数）。

当用户强制刷新页面（CTRL+F5）或者当前缓存的CSS或者JS发生了变动，都会重新从服务器拉取。
…
对于客户端来讲，我们还可以基于localStorage来做一些本地存储，例如：第一次请求的数据或者不经常更新的CSS和JS，我们都可以把内容存储在本地，下一次页面加载，我们从本地中获取即可，我们设定一定的期限或者一些标识，可以控制在某个阶段重新从服务器获取。

5、 使用字体图标代替一些页面中的位图（图片），这样不仅做适配的时候方便，而且更加轻量级，而且减少了HTTP请求次数（类似于雪碧图）。

15、 如果当前页面中出现了AUDIO或者VIDEO标签，我们最好设置它们的preload=none：页面加载的时候，音视频资源不进行加载，播放的时候再开始加载（减少页面首次加载HTTP请求次数）。

preload=auto：页面首次加载的时候就把音视频资源进行加载了。
preload=metadata：页面首次加载的时候只把音视频资源的头部信息进行加载。
…

20、 在客户端和服务器端进行数据通信的时候，我们尽量采用JSON格式进行数据传输。

【优势】：
（1）JSON格式的数据，能够清晰明了地展示出数据结构，而且也方便我们获取和操作。
（2）相对于很早以前的XML格式传输，JSON格式的数据更加轻量级。 （3）客户端和服务器都支持JSON格式数据的处理，处理起来非常方便。

在真实项目中，并不是所有的数据都要基于JSON，我们尽可能这样做，但是对于某些特殊需求（例如：文件流的传输或者文档传输），使用JSON就就不合适了。

8、采用CDN加速

CDN：分布式（地域分布式）

关于编写代码的时候的一些优化技巧

除了减少HTTP请求次数和大小可以优化性能，我们在编写代码的时候，也可以进行一些优化，让页面的性能有所提升（有些不好的代码编写习惯，会导致页面性能消耗太大，例如：内存泄漏）。

1、 在编写JS代码的时候，尽量减少对DOM的操作（VUE和REACT框架在这方面处理的非常不错）

在JS中操作DOM是一个非常消耗性能的事情，但是我们又不可避免地操作DOM，我们只能尽量减少对它的操作。
【操作DOM的弊端】
（1）DOM存在映射机制（JS中的DOM元素对象和页面中的DOM结构是存在映射机制的，一改则都改），这种映射机制，是浏览器按照W3C标准完成对JS语言的构建和DOM的构建（其实就是构建了一个监听机制），操作DOM是同时要修改两个地方，相对于一些其他的JS编程来说是消耗性能的。
（2）页面中的DOM结构改变或者样式改变，会触发浏览器的回流（浏览器会把DOM结构重新进行计算，这个操作很耗性能）和重绘（把一个元素的样式重新渲染）。

2、编写代码的时候，更多地使用异步编程

同步编程会导致：上面的东西完不成，下面的任务也做不了。我们开发的时候，可以把某一个区域模块都设置为异步编程，这样只要模块之间没有必然的先后顺序，都可以独立进行加载，不会受到上面模块的堵塞影响（用的不多）。

尤其是AJAX数据请求，我们一般都要使用异步编程，最好是基于promise设计模式进行管理（项目中经常使用fetch、vue axios等插件来进行AJAX请求处理，因为这些插件中就是基于promise设计模式对ajax进行的封装处理）

3、 在真实项目中，我们尽可能避免一次性循环过多数据（因为循环操作是同步编程），尤其是要避免while循环导致的死循环操作。

4、CSS选择器优化

（1）尽量减少标签选择器的使用
（2）尽可能少使用ID选择器，多式样样式类选择器（通用性强）
（3）减少选择器前面的前缀（因为选择器是从右向左查找的），例如：

.headerBox .nav .left a{ 

}
/*-------命名解决----------*/
.header-nav-left a{

}

5、 避免使用CSS表达式

/*CSS表达式*/
.box{
	background-color: expression((new Date)).getHours()%2?'red':'blue');
}

6、 减少页面中的冗余代码，尽可能提高方法的重复使用率：“低耦合高内聚”。

7、CSS放在head标签中，JS放在body尾部，让页面加载的时候，先加载CSS，再加载JS（先呈现页面，再给用户提供操作）。

8、JS中避免使用eval。

（1）性能消耗大
（2）代码压缩后，容易出现代码错乱问题

9、 JS中尽量减少闭包的使用

（1）闭包会形成一个不销毁的栈内存，过多的栈内存累积会影响页面的性能
（2）还会容易导致内存的泄漏
不过闭包也有自己的优势：保存和保护，我们只能尽量减少，但是无可避免。

10、在做DOM事件绑定的时候，尽量避免一个个的事件绑定，而是采用性能更高的事件委托来实现。

事件委托（事件代理）：
把事件绑定给外层容器，当里面的后代元素相关行为被触发，外层容器绑定的方法也会被触发（冒泡传播机制导致），通过事件源是谁，我们做不同的操作即可。

11、 尽量使用CSS3动画代替JS动画，因为CSS3的动画或变形都开启了硬件加速，性能比JS动画好。

12、编写JS代码的时候尽可能使用设计模式来构建体系，方便后期的维护，也提高了扩充性等。

13、CSS中减少对滤镜的使用，页面中也减少对FLASH的使用。

关于页面的SEO优化技巧

1、页面中杜绝出现死链接（404页面），而且对于用户输入一个错误页面，我们要引导到404提示页面中（服务器处理的）。

2、避免浏览器中异常错误的抛出。

尽可能避免代码出错
使用try catch做异常信息捕获
… …

3、增加页面关键词优化