常见web性能优化的方法

废了好久，一直在工作上出了好多不走心的错误，这段时间一直在理解什么是服务端，开发的思维到底是怎样的，开发了一个半吊子的东西，也荒废了课程,，有点觉得开始觉得无法静下心来好好学习，无法踏踏实实的一步一步走，这真是太可怕了嘤嘤嘤。于是捡起来好久没看的课程开始继续学习木哈哈哈祝我好运吧

先从为什么要做性能优化开始：当页面打开速度变得非常慢，当我们滚轮滚动页面开始变的卡顿，当并发数量非常多，多个人访问一台服务器（请参考春运12306抢票23333333）的时候，当然，我们这里只去谈前端性能优化，高并发应该是属于后端工程师需要解决的问题。
从前端的角度出发，常见的web性能优化的方法大概有以下几种：

1、尽量减少HTTP请求次数

什么是http请求？就是我们打开F12之后看到的network里面的列表，每一条都是一个http请求

http_req.png

我们可以做到的是：

1）、资源合并与压缩

多个css文件合并到一起，压缩
多个js文件合并到一起，压缩

2）、合理设置 HTTP缓存，缓存资源越多，我们需要请求的资源越少，速度就越快

3）、多张图片压缩到一起，制作精灵图，并且使用 tinypng 减小图片体积，甚至能用代码写出的效果就不要使用图片

2、css、js放在正确的位置

css使用link标签引入并且放在head标签里面；js文件或代码放在body底部（html代码结束后）；浏览器是可以并发请求的，这一特点使得其能够更快的加载资源，然而外链脚本在加载时却会阻塞其他资源，例如在脚本加载完成之前，它后面的图片、样式以及其他脚本都处于阻塞状态，直到脚本加载完成后才会开始加载。如果将脚本放在比较靠前的位置，则会影响整个页面的加载速度从而影响用户体验（参考链接来源：知乎）

2、合理使用CDN

可以使用多个cdn地址存放我们不同的资源，当请求到来时多个请求可以多个并行下载

3、减少dom操作

dom操作过于频繁是万恶之源（手动微笑），曾见证了一个系统因为dom操作过于频繁几乎无法使用（虽然不只是dom操作过于频繁导致的，但是我个人觉得dom操作过于频繁是原因之一）
当必须操作dom的时候，有这么几种方法：

缓存已经访问过的元素，举例;

使用这种方法
var $img = $('.ct img')
$img.append() ...
$img.css() ...
而不是
$('.ct img').append() ...
$('.ct img').css() ...
这样可以避免频繁的去dom里面查找相应的元素，当这样的代码多起来的时候，性能的不同就很明显了

建议隐藏显示之类的操作用class的添加删除来进行操作，利用js直接进行增删改查相比可以用class操作来说性能会差一些
如果一定要增加dom元素，建议代码中一次性或使用尽量少的次数直接添加多个dom节点

4、合理使用缓存

可以将常用的图片，css，js存储于localStorage里面，可以保存一些较大文件和不常更换的静态资源。