1、尽可能减少HTTP请求：图片合并 （css sprites），Js脚本文件合并、css文件合并

2、减少DNS查询

DNS查询服务指域名查找，指将请求的域名转化为对应的IP地址，就如姓名和门牌号的关系。如输入www.baidu.com  DNS系统会将此域名转化为119.75.217.109，然后将IP地址返回给浏览器，这个过程会花费一定的时间，影响页面的加载，所以要尽可能减少DNS查询。

减少DNS查询的方法有：　缓存 DNS查找可以改善页面性能，大多数浏览器有自己的缓存系统，缓存时间又不一致，缓存时间越长，DNS保存的时间越长。

当客户端中的 DNS缓存都为空时(浏览器和操作系统都为空)， DNS查找的次数和页面中主机名的数量相同。这其中包括页面中 URL、图片、脚本文件、样式表、Flash对象等包含的主机名。减少主机名的数量可以减少DNS查找次数。

减少主机名的数量还可以减少页面中并行下载的数量。减少 DNS查找次数可以节省响应时间，但是减少并行下载却会增加响应时间。我的指导原则是 把这些页面中的内容分割成至少两部分但不超过四部分。这种结果就是在减少 DNS查找次数和保持较高程度并行下载两者之间的权衡了。



3、将css放在页面最上面，将js放在页面最下面

css放在页面最上面可以防止页面出现白屏、闪跳的现象，即减少页面的首屏出现时间。js的下载和执行会阻塞Dom树的构建（严谨地说是中断了Dom树的更新），所以script标签放在首屏范围内的HTML代码段里会截断首屏的内容。而且js中可能会对DOM节点进行操作，而这时代码是自上向下进行执行的，这样会造成js对相应的元素操作不了。所以js放在页面的最下面
4、压缩js和css

减少文件体积，去除不必要的空白符、格式符、注释（即对代码进行格式化）



5、把js和css提取出来放在外部文件中

这一条要灵活运用，把js和css提取出来放在外部文件的优点是：减少html体积，提高了js和css的复用性，提高日后的可维护性

缺点：增加了http请求，不过这一点可以通过缓存来解决

什么情况下将js和css写在页面内呢，可以分为几种情况：js和css代码比较少；这个页面不怎么会访问



6、避免重定向

重定向就是用户请求的页面被转移到了别的地方，浏览器向服务请请求一个页面，服务器告诉浏览器请求的页面已经被转移到另外一个页面，并告知另一个页面地址，浏览器就再发送请求到重定向的地址。这样会增加服务器和浏览器之间的往返次数，影响网站性能。

重定向状态码有：301永久重定向   302临时重定向。304 not modified  并不是真的重定向，它是用来告诉浏览器get请求的文件在缓存中，避免重新下载。

7、移除重复脚本

8、配置实体标签Etag

9、使用ajax缓存

ajax的get和post方法：

只要是浏览器的get请求，浏览器都会使用缓存，对于同一地址的请求，服务器会发送304状态码到浏览器，浏览器就会使用缓存中的数据

post的请求每次都会被执行，浏览器不会缓存

10、使用Gzip压缩

11、使用CDN(内容分发网络)

12、在css中避免expression表达式

13、添加expire/cache-control头
用户在访问网页时， 最直观的感受就是页面内容出来的速度，我们要做的优化工作， 也主要是为了这个目标。那么为了提高页面加载（或者渲染）速度呢？一般来说有三个方面：

14、代码逻辑：优秀的代码逻辑结构可以有效减少渲染页面使用的内存和速度（比如虚拟DOM），此方面不在本文讨论范围内。

15、SSR服务器渲染，也就是所谓的“直出”。将首屏所有内容在服务器端渲染成html静态代码后，直接输出给浏览器，可以有效加快用户访问站点时首屏的加载时间。不过此方面也不在本文讨论范围内。

16、提升静态文件的加载速度，这是本文会讨论的点，而这方面大致又可分为下面几点：

— 加快静态文件下载速度

— 减少静态文件的文件大小

— 减少静态文件请求数量，从而减少发起请求的次数（对于移动端页面来说，请求的开销比网速的开销要大）
17.安全方面: CSP
web前端对于xss安全漏洞一定不陌生。我们知道Javascript语句甚至是css表达式都可能导致xss攻击，现在很多前端会使用CSP策略来进行脚本源的限制防御。

而我们由于使用的cdn域名和业务域名不一样：
cdn域名：https://cdn.xxx.qq.com
业务域名：https://xxx.qq.com

我们可以：

在index.html静态入口文件的meta http-equiv头中做配置；
服务器端直接返回相应的HTTP response header头信息；