常遇问题：1.加载的图片太多导致向服务器请求的次数太多；2.图片太大导致每次请求的时间过长，页面加载完成慢。

解决目标：减少资源到客户端的延迟。

那么问题来了，应该如何解决呢？

优化方法

1.将图片服务和应用服务分离(从架构师的角度思考)

        对于服务器来说，图片始终是最消耗系统资源的，如果将图片服务和应用服务放在同一服务器的话,应用服务器很容易会因为图片的高I/O负载而崩溃，所以当网站存在大量的图片读写操作时，建议使用图片服务器。(注:图片服务器是专门为图片读写操作优化的独立服务器,运行网站的服务器称为应用服务器。)

       另外，浏览器在同一时间对同一域名下的资源的并发请求数目是有限制的，一般在2-6之间，超过限制数目的请求就会被阻塞。把图片服务器与应用服务器分开，图片服务器采用独立域名 ，css、js和图片就可以并发请求了。

2.图片质量压缩（简单粗暴）

        图片压缩应该是图片优化时最常用的方案，因为很简单，只需要将图片上传到tinypng或者智图等第三方软件的在线压缩图片平台，对图片进行压缩，就可以得到较小的图片质量。

3.图片懒加载

像淘宝或者京东这样的APP页面上有很多图片,当我们滑到下一屏时下一屏的图片才会加载,这就采用了图片懒加载的方式。

图片懒加载的目的就是为加快页面加载速度而做的，为了不让图片一次全部加载出来，通过将图片地址存放在一个img标签的属性上，当图片被滚动到页面上时，再将src属性替换成图片地址来达到懒加载的效果。（通过js将img标签的data-src属性赋值给src属性）

4.css Sprites（即雪碧图）

当网站或者APP有大量小icon，如果上传到图片服务器比如CDN，要加载所有这些小icon将增加大量请求，而CDN是按流量收费的，这无疑将增加很多成本。

雪碧图就是将这些小icon合并成一张图片，只需要加载一次，减少图片的网络请求，每次通过background-position来控制显示icon。（个人通常使用gopng这个网站在线生成，还可以自动生成对应的css代码）

不过这也有一定的缺点：在长期开发多人合作的项目中，会不好维护这些sprites，每次对icon做修改，都得相应的改动css里background-position的值，相当繁琐。

5.将图片压缩成base64格式来节约请求

将图片压缩成base64，随html或者css一起下载到浏览器，不需要额外的请求，这样就节约了请求。

将一个图片地址进行base64编码后会得到一串字符串，将这个字符直接放到img的src属性上，你会发现浏览器是可以识别这一串字符的，不需要发送网络请求直接解析，这样就可以达到减少网络请求的目的，但是base64编码后的图片质量比原图图片质量要大，因此也只会在一些质量较小的图标类图片上面使用，否则得不偿失，常见使用base64编码的方案就是webpack的url-loader，举个例子：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]
  }
}

上面的这个配置就是把8k以下的通过url-loader进行base64编码，转换成一串DataUrl。

针对decode base64编码的图片比较慢的问题，我们可以选择使用canvas来加速。当向canvas发出绘画命令时，浏览器直接将指令发到图形加速器而不需要开发者更多的干预，硬件图形加速器则以难以执行的运算速度实时绘画和渲染图形。因此，我们可以使用canvas来渲染base64编码后的图片。

6.css替换简单图标

        这个优化方案应该都懂，其实就是在写代码之前先考虑一下设计稿里面的哪些内容是可以通过代码来实现的，能通过代码实现的尽量用代码实现，同时实现的时候多考虑绘制性能，能使用css3做GPU硬件加速的就尽量使用css3属性，这些都能减少图片使用而且不影响渲染性能。

7.响应式图片加载

什么是响应式图片加载？其实就是在不同分辨率的设备上显示不同尺寸的图片，避免资源的浪费，常用的方法就是css3的媒体查询(media query)，来看个例子：

@media screen and (max-width: 375px) {
  img {
    background-image: url('phone.png');
  }
}
@media screen and (max-width: 768px) {
  img {
    background-image: url('tablet.png');
  }
}

 

1、同源策略是为了保护网站的安全，防止用户信息泄露，防止身份伪造等(读取Cookie)

2、ajax请求不到数据的时候

3、jsonp

声明一个回调函数，其函数名(如fn)当做参数值，要传递给跨域请求数据的服务器，函数形参为要获取目标数据(服务器返回的data)。
创建一个<script>标签，把那个跨域的API数据接口地址，赋值给script的src,还要在这个地址中向服务器传递该函数名（可以通过问号传参:?callback=fn）。
服务器接收到请求后，需要进行特殊的处理：把传递进来的函数名和它需要给你的数据拼接成一个字符串,例如：传递进去的函数名是fn，它准备好的数据是fn([{"name":"jianshu"}]）。
最后服务器把准备的数据通过HTTP协议返回给客户端，客户端再调用执行之前声明的回调函数（fn），对返回的数据进行操作。
其中 fn 是客户端注册的回调的函数,目的获取跨域服务器上的json数据后，对数据进行在处理。

最后服务器返回给客户端数据的格式为:


3、CORS

CORS的兼容性不如jsonp

在响应头上添加Access-Control-Allow-Origin属性，指定同源策略的地址。同源策略默认地址是网页的本身。只要浏览器检测到响应头带上了CORS，并且允许的源包括了本网站，那么就不会拦截请求响应。

3、ngix反向代理



最后：有一点必须要注意：跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。之所以会跨域

HTTP请求方法有哪些

众所周知，GET、POST是最为常见方法，而且大部分主流网站只支持这两种方法，因为它们已能满足功能需求。其中，GET方法主要用来获取服务器上的资源，而POST方法是用来向服务器特定URL的资源提交数据。而其它方法出于安全考虑被禁用，所以在实际应用中，九成以上的服务器都不会响应其它方法，并抛出404或405错误提示。以下列举几个HTTP方法的不安全性：

1、OPTIONS方法，将会造成服务器信息暴露，如中间件版本、支持的HTTP方法等。

2、PUT方法，由于PUT方法自身不带验证机制，利用PUT方法即可快捷简单地入侵服务器，上传Webshell或其他恶意文件，从而获取敏感数据或服务器权限。

3、DELETE方法，利用DELETE方法可以删除服务器上特定的资源文件，造成恶意攻击。

所谓301永久重定向(或叫301转向，301跳转)，是指当用户或搜索引擎向网站服务器发出浏览请求时，服务器返回的HTTP数据流中头信息(header)中的状态码的一种，表示本网页永久性转移到另一个地址。
301永久重定向有何作用？在哪些情况下适用？
从301永久重定向的定义可以看出，它是一种状态码，会向搜索引擎或浏览器发出信息：本网页的地址已经永久改变了。并会把新的地址传达过去。而相应的就是：我们输入网址A访问，显示出来的是转向后的网址B，转向过程极短以至无法察觉。所以，301永久重定向对于访客来说，作用就是将他要访问的而实际上已不存在的网址转到另一个网址，避免出现“此网页无法显示”之类的错误；对于搜索引擎优化|SEO来说，给搜索引擎一个友好的信息，告诉它此页面已永久重定向，避免搜索引擎找不到页面。这对于网站的SEO是很重要的，因为301永久重定向对SEO无任何不好的影响！而且网页A的关键词排名和PR级别都会传达给网页B！
一、当出于需要删除网站中的某些目录时，可以通过301永久重定向将此目录重定向到网站首页。
二、网站更换域名时，通过301永久重定向将旧域名重定向至新域名，挽回流量损失和SEO。
三、想要多个域名同时指向同一网站时，通过301永久重定向可以实现。一般的虚拟主机后台提供将smugseo.com和www.smugseo.com等多个域名绑定到同一网站的功能，但这样对收录可能有影响：《绑定多个域名对搜索引擎收录的影响》。而用301永久重定向就没有这样的担忧。
四、实现网址规范化。
有以下4个网址：
http://smugseo.com
http://www.smugseo.com
http://smugseo.com/index.html
http://www.smugseo.com/index.html
查询上面4个网址的PR值，或用site:smugseo.com查看网站首页，如果结果一致，说明网站没有规范化问题；如果不一致，表明有规范化问题。出现此问题时，可以将上面4个网址通过301永久重定向指向同一个网址http://www.smugseo.com，解决了。
如何实现301永久重定向？
一、通过代码实现301永久重定向。
HTML网页无法实现301永久重定向。因为HTML文件一被读取，就已经返回表示一切正常的200状态码了。
ASP或PHP网页。比如，你要删除某个目录A，想实现访问http://www.smugseo.com/A/时跳转到http://www.smugseo.com，可以：
ASP：在目录A下新建index.asp，写入代码：
<%@ Language="VBScript" %>
<%
Response.Status = "301 Moved Permanently"
Response.AddHeader "Location", "http://www.smugseo.com"
%>
那么访问http://www.smugseo.com/A/其实就是访问http://www.smugseo.com/A/index.asp，就会自动跳转到http://www.smugseo.com。
PHP：在目录A下新建index.php，写入代码：
<?
header("HTTP/1.1 301 Moved Permanently");
header("Location:http://www.smugseo.com");
exit();
?>
访问http://www.smugseo.com/A/其实就是访问http://www.smugseo.com/A/index.php，就会自动跳转到http://www.smugseo.com。
上面的代码经老孙亲自测试可行！注意代码不要写成一行，不然会出错！直接复制上面的代码使用可能会因为字体的原因导致出错，所以出错时请自己写一遍！
有个技巧：如果http://www.smugseo.com网站目录下同时存在index.html和index.asp，设置文档优先级html>asp时，输入http://www.smugseo.com访问到的是http://www.smugseo.com/index.html；设置文档优先级asp>html时，访问的是http://www.smugseo.com/index.asp.
二、虚拟主机301永久重定向
如果你的网站空间是使用虚拟主机或合租空间，无法对WEB服务器（IIS、Apache）进行设置，可以利用子目录绑定实现301永久重定向。首先建立子目录A，然后把你要进行重定向的域名A绑到这个目录，在这个子目录里面建立一个index.asp或index.php文件，写入上面介绍的代码。那么访问子目录A下的index.asp或index.php也即访问域名A，就会跳转到绑定在其他子目录上的域名B。
三、IIS实现301永久重定向。如果你有自己的服务器，有对IIS或Apache管理的权限，那么就可通过对IIS或Apache进行设置来实现301永久重定向。
进入IIS管理窗口，右键点击网站名或某个目录或某个文件，在弹出菜单选择“属性”，在“目录”或“主目录”窗口下选中“重定向到URL(U)”，输入将要定向到的网址，并勾选“资源的永久重定向”，确定即可。
四、Apache实现301永久重定向。
Apache中的分布式配置文件“.htaccess”提供了针对每个目录改变配置的方法，即在一个特定的目录中放置一个包含指令的文件，其中的指令作用于此目录及其所有子目录。比如，在目录A下放.htaccess，写入代码：
redirect 301 /A http://www.smugseo.com 或
redirect permanent /A http://www.smugseo.com
访问http://www.smugseo.com/A/及其子目录时即可重定向到http://www.smugseo.com。若将整个网站或域名重定向到另一网站或域名，则可写入redirect 301 / http://www.smugseo.com，将.htaccess放在根目录即可。

如果要实现“批量重定向”，比如，把http://smugseo.com/a.html重定向到http://www.smugseo.com/a.html，把http://smugseo.com/b.html重定向到http://www.smugseo.com/b.html。。。等等，即把http://smugseo.com下的所有文件重定向到http://www.smugseo.com下的同名文件，则要用到mod_rewrite模块。在.htaccess中写入：
Options +FollowSymLinks
RewriteEngine on
RewriteCond %{HTTP_HOST} ^smugseo.com [NC]
RewriteRule ^(.*)$ http://www.smugseo.com/$1 [L,R=301]
即可。
或将绑定的其他多个域名重定向到主域名：
RewriteEngine on
RewriteCond % ^smugseo.com$ [OR]
RewriteCond % ^bbs.smugseo.com$ [OR]
RewriteRule ^(.*)$ http://www.smugseo.com/ [R=301,L]