作为一个前端，如果对一个网页从发起请求到返回数据这期间具体发生了什么都不知道的话，那不是一个好前端。最近，读了图解http，以及有关http相关的文章，还有自己也下载了wireshark抓包工具，实际观察了一下这个过程，下面就此做些总结。

一.从输入一个url到返回数据，中间到底发生了什么？

假设，我们在浏览器输入http://www.baidu.com:80/index.html，假设解析出的ip地址是202.43.78.3

1.浏览器解析出主机名

解析出的主机名是www.baidu.com

2.浏览器查询这个主机名的ip地址（dns）

dns解析的作用就是把域名解析成ip地址，这样才能在广域网路由器转发报文给目标ip，不然路由器不知道要把报文发给谁。下面就讲下大概的过程，不会涉及太多细节。（以chrome为例子）

（1）浏览器启动时，首先浏览器会去操作系统获取dns服务器地址，然后把这个地址缓存下来。同时浏览器还会去读取和解析hosts文件，同样放到缓存中。浏览器对解析过的域名和ip地址，都会保存着这两者的映射关系。（存到cache中）

（2）当解析域名的时候，首先浏览器会去cache中查找有没有缓存好的映射关系，如果没有的话，就去hosts文件中查找，如果也没有的话，浏览器就会发起请求去dns服务器缓存查询了，如果缓存里面也没有，那最后就是dns服务器去查询了。

3.浏览器获取端口号

4.浏览器向目标ip地址发起一条到202.43.78.3:80的tcp连接

为了传输的可靠性，tcp协议要有三次握手过程：

（1）首先浏览器会向服务器发起一个连接请求

（2）服务器会对连接请求做出响应，表示同意建立连接

（3）浏览器收到响应后，再告知对方，它知道服务器同意它建立连接了。

5.ip层把ip地址转换成mac地址，一边传输，一边查找目标服务器的mac地址

6.数据链路层处理网络连接的硬件部分，比如网卡，找到服务器的网卡

7.浏览器向服务器发送一条http报文（重复5，6步）

每一条http报文的组成：

起始行+首部+主体(可选)

起始行：http/1.0 200 ok (一般包括http版本，返回状态码，返回码原因)

首部：content-type:text/plain content-length:19

主体：name=jane

8.服务器接受客户端请求，进行一些处理，返回响应报文

web服务器接收到请求之后，实际上会做些什么呢？

（1）建立连接，如果接受一个客户端连接，就建立连接，如果不同意，就将其关闭。

（2）接收请求，读取http请求报文

（3）访问资源，访问报文中指定的资源

（4）构建响应，创建带有首部的http响应报文

（5）发送响应，将响应回送给客户端

9.浏览器读取http响应报文

10.浏览器关闭连接

看了上面的一个简单过程，大家会不会有这样一个问题，难道每次发起一个http请求，都要建立一次tcp连接吗，我们经常写的并发ajax请求，每条请求都是各自独立建立的tcp连接？一条tcp连接建立之后，是什么时候关闭的？带着这些问题，看看下面要讲的http的特性

二.http的特性

1.http是不保存状态的协议

http协议是一种无状态的协议，意思就是说它不会对每次的请求和响应之间的通信状态进行保存。你之前发过的任何请求的信息，没有任何记录。之所以这样设计，也是为了让http变得比较简单，可以处理大量事物。但是无状态的特性，也会导致一些问题，比如说一个用户登录一家网站之后，跳到另一个页面，应该还保持着登录状态，所以后面就出了cookie状态管理技术。相信大家应该都很熟悉了。

2.请求只能从客户端开始。客户端不可以接收除响应以外的指令

服务器必须等待客户端的请求，才能给客户端发送响应数据，所以说服务器是不能主动给客户端推送数据的。对于一些实时监控的功能，常常用websocket来代替

3.没有用户认证，任何人都可以发起请求

在http协议通信时，是不存在确认通信方的处理步骤的，任何人都可以发起请求。另外，服务器只要收到请求，无论是谁，都会返回一个响应。所以会存在伪装的隐患。后面出现的https就可以解决这个问题。

4.通信使用的是明文

5.无法证明报文完整性

6.可任意选择数据压缩格式，非强制压缩发送

7.http持久连接和并行连接

一开始，http请求是串行的，一个http请求，就会建立一条tcp连接，浏览器收到响应之后，就会断开连接。等上一个请求回来了，下一个请求才能继续请求。这样做的缺点是，比较耗时间和内存，后面就出现了下面一系列的优化连接性能的方法。

（1）并行连接：

原理：通过多条tcp连接发起并发的http请求

并行连接可以同时发起多个http请求，每次发起一个http请求，就会建立一个tcp连接。每个http请求是独立的，不会相互等待，这样做，很可能会提高页面的加载速度，因为人们会看到页面上面，很多个东西会同时出现，所以感觉页面加载变快了。实际上有时候是真的变快了，因为它是并行工作的。但是有时候不是真的快了。比如说，客户端的网络带宽不足时，（浏览器是通过一个28kbps的modem连接到因特网上去的），如果并行加载多个请求，每个请求就会去竞争这个有限的带宽，每个请求就会以比较慢的速度加载。这样带来的性能提升就很小。

（2）持久连接：

原理：重用tcp连接，以消除连接及关闭时延

从http1.1开始，就允许当http响应结束后，tcp连接可以保持在打开状态，以便给未来的http请求重用现在的连接。那么，这个tcp连接什么时候会关闭呢，一般情况下，40s内，如果没有新的请求，就会关闭。

（3）管道化连接

原理：通过共享的tcp连接发起并发的http请求

并行连接可以提高复合页面的传输速度，但是也有许多缺点，比如每次都会建立一次tcp连接，会耗费时间和带宽。持久连接的优势就是降低了时延和tcp的连接数量。但是持久连接可能会导致的一个问题是，可能会累积大量的空闲连接。耗费资源。

持久连接和并行连接配合使用才是最高效的方式。

一般浏览器会限制，并行连接的个数是4个，即打开少量的并行连接，其中每个都是持久连接。这也是现在用的最多的方式。 查看全部

谷歌pagespeed评分，刚开始的时候很头疼，碰到一个客户的网站评分居然只有20分左右，当时我都觉得这个站可能不能抢救了。
1、首先提升这个分数最重要的就是从资源方面着手，而网站资源里面，占大头并且最直观的就是网站所用的图片。
如图：








当然这个站本身首页的内容较少，在资源这块能较好的控制
 
2、其次我们可以从Add Expires headers（有另写文章介绍）、压缩css、js文件、如果可以的话，域名托管到第三方cdn平台（例如我们常用的cloudflare，针对国内的话可以百度云）等等。。。。。。




以上这些截图自gtmetrix工具的测评，因为较为直观、数据都有列出来。
其实这些工具上面的建议，在我们常用的缓存插件wp-rockets插件里面都有，根据网站实际情况尽量开启就能提升分数。
 
以下附上pagespeed测评截图：




 
  查看全部

我们常用的百度地图API：http://api.map.baidu.com/lbsapi/creatmap/
这个API是没有iframe分享代码的，只有整个的html。
首先生成一个对应的百度地图html文件，然后将这个文件上传至网站根目录下，获得链接：http://域名/百度地图.html
然后将这个链接放到iframe标签的src属性中。
over！ 查看全部

Expires headers 告诉浏览器是否应该从服务器请求一个特定的文件或者是否应该从浏览器的缓存抓住它。Expires headers 的设计目的是希望使用缓存来减少HTTP requests的数量，从而减少HTTP相应的大小。

Expires headers 中的 Expires 说明了 Expires headers 是有时间限制的，只有在这个指定的时间期限内，浏览器才会从缓存读取数据，而超过这个时间期限，再次访问同一个页面时浏览器还是会向服务器发起  HTTP requests，从服务器端下载页面所需的文件。
 
HTML 文件不要设置 Expires headers。实际的开发经验告诉我，给HTML文件添加 Expires headers 会带来很多的麻烦。即便你要添加  Expires headers，也尽量设置较短的过期时间。这一点在 PageSpeed 的 Leverage browser caching 规则中也明确提到了：

In general, HTML is not static, and shouldn’t be considered cacheable.

知道要缓存哪些资源文件后，接着就是预判这些文件的变更频率，设置合适的过期时间。还是前面的原则，变更频繁的 Expire 时间就越短，不怎么变动的就可以设置长的过期时间，也就是落实“永不过期”的原则。
 
接下来就是在服务器端设置 Expires headers 了，这里以Apache服务器为例，我们在 .htaccess 文件中配置（.htaccess是跟目录下的一个隐藏文件）添加如下代码：

<IfModule mod_expires.c> 
# Enable expirations 
ExpiresActive On 
# Default directive 
ExpiresDefault "access plus 1 month" 
# My favicon 
ExpiresByType image/x-icon "access plus 1 year" 
# Images 
ExpiresByType image/gif "access plus 1 month" 
ExpiresByType image/png "access plus 1 month" 
ExpiresByType image/jpg "access plus 1 month" 
ExpiresByType image/jpeg "access plus 1 month" 
# CSS 
ExpiresByType text/css "access plus 1 month" 
# Javascript 
ExpiresByType application/javascript "access plus 1 year" </IfModule>
  查看全部

碰到一个需求，可能是自己写html的时候走歪路了，本来是要给图片加个遮罩的，也很容易写好了，但是发现没有加载图片的时候，遮罩还是存在着。
那么我想了一下，可以做一个简单的if判断，当图片src值为空，那么遮罩隐藏
 
var imgsrc=$('.fourrightbox + img').attr('src');
        if(imgsrc == "" || imgsrc == null || imgsrc == undefined){
            $('.fourrightbox').css('display','none');
        }
 
隐藏方法有很多种，你也可以用jquery api里hide()等等 查看全部

通过查看wordpress网站的日志发现，每天有大量的IP访问wordpress网站xmlrpc.php文件，这个文件本是wordpress程序方便用户进行远程发布的，基本上很少用到。但现在却有人恶意大量的访问这个wordpress网站xmlrpc.php文件，说明很不正常。
 
攻击原理
wordpress网站xmlrpc.php文件是一个远程端口文件，攻击者通过POST提交恶意大量的提交，不断的访问xmlrpc.php文件，形成DDOS攻击，致使网站服务器CPU过高停机，网站无法打开。

解决方法
解决wordpress网站xmlrpc.php文件被恶意攻击，最好的方法就是关闭掉自己网站xmlrpc.php文件。

方法如下：
第一步：在自己网站使用的wordpress模板中找到模板函数文件functions.php，当下面的代码粘贴进去。
add_filter('xmlrpc_enabled', '__return_false');
 
第二步：再通过.htaccess屏蔽xmlrpc.php文件的访问，这个文件是放在网站空间的根目录下。
<Files xmlrpc.php>
Order Deny,Allow
Deny from all
</Files>
 
通过以上二步的操作，就可以解决wordpress网站xmlrpc.php文件被恶意攻击的问题。在此建议使用wordpress程序建网站的朋友全部关闭掉xmlrpc.php文件，不要等到网站被恶意攻击了才去关闭。 查看全部

最近看到一篇文章，看了大牛的讲解，感觉整体还是比较容易理解的，可以尝试着玩玩。以下是转载的正文：前端页面的用户体验对于一个网站来说是至关重要的，我们在访问一些图片量比较大的网站的时候，往往会有这样的感受：显示在我电脑屏幕可视区域的图片总是不能及时的刷出来，这就造成了对于一些没有什么耐心的用户而言，他们就不愿意多等下去，索性直接关闭了网站去看其他的网站，这就使得本网站的用户量的流失，这往往是一个网站最不愿意看到的情况，那么对于这样的情况而言，开发者们不断的努力，很快就想到了解决的方案，让在可视区域的图片立即加载进来，而让不在可视区域并且需要通过滚动条进行滚动显示的图片在图片滚动到可视区域内再显示出来，这就比一次性把所有的图片资源加载进来从而造成图片刷新较慢的用户体验好的多的多。 
 那么，图片延迟加载的技术具体如何实现呢？下面来做详细的介绍: 
首先，定义图片为三列，一共有5行，具体代码如下：  










 
里面用到的bootstrap的布局技术（当然，这不是重点），请看img标签中的src,一开始我们并没有给它具体的图片的资源路径，而是自己定义了一个属性 x-src，该属性的值是图片图片的资源路径，每一行的img都是如此，接下来，当页面载入的时候，我们使用jquery(当然，你想javascript原生的代码也可以，我这里只是为了省时间而已)来循环遍历每一个img，判断每一个图片是否在当前可视区域内，是则显示图片，否则稍后处理，这里需要知道三个数据： 

             注：因为我所写的是当图片的一半进入的浏览器的可视区域内才将这张图片进行加载，所以需要第三个数据，这个看个人的需求是什么，如果你的需求是图片只要已进入可视区域内就加载，可直接忽略第三个数据!!!! 

                                   1：浏览器可视区域的高度 

                                   2：图片相对于文档的偏移量（这里只需要高度上的偏移量） 

                                   3：图片元素本身的高度 

             如果图片先对于文档的偏移量+图片元素本身的高度的一半    <  浏览器可视区域的高度，即表明图片已经有一半进入的可视区域了，那么我就应该要把这张图片加载进来了，可是img标签的src是为空的，x-src的值才是图片的资源路径，这个时候就需要用jquery将img 标签的x-src值传给src，从而将图片加载进来，具体实现代码如下： 





 
  查看全部