web性能优化

web前端优化

• 1.js和css压缩
• 2.按需加载资源，比如：图片滚动加载
• 3.使用前端缓存技术
• 4.启用http2
• 5.减少dom操作
• 6.尽量少使用img标签，可以用background-image代替
• 7.减少http请求
• 8.合并css图片
• 9.css放在页面最上面，js放在页面最下面
• 10.多使用语义化标签

js和css压缩

• 可以使用压缩工具进行压缩，例如gulp、grunt、webpack等，关于这些工具的具体使用会在别的博客中写出。

按需加载资源

• 包括列表的分页请求(可以使用一些插件，类似于iscroll+iscrollview)
• 图片的懒加载（具体实现也会在别的博客中指出）

使用前端缓存技术

• sessionlocalstorage
• localstorage
• cookie

减少dom操作

• dom操作会导致回流，即页面的重新渲染，使得页面的性能受到影响，因此尽量减少对dom操作
• 如果非要操作dom，比如增加节点等类似操作，不要每次都直接appendChild()到父节点中，可以使用documentFragment碎片节点，将需要添加的元素先append到碎片中，最后统一append到文档中

css放head标签里，js放在页面最下面

• 浏览器渲染页面之前，它需要通过解析HTML标记然后构成DOM树，如果解析器遇到一个脚本，它就会停下来，并且执行这个脚本，阻塞页面的渲染
• 如果必须要放在头部的js文件，可以使用async属性，表示这个资源不是同步加载的，而是异步加载的，这样就不会阻塞页面渲染。

减少http请求

• 合并css，合并js，合并图片，将浏览器一次访问需要的js和css合并成一个文件，这样浏览器只需要一次请求。
• 缓存 通过设置cache-control和expires可以实现缓存

CDN(内容分发网络)

• CDN一般缓存的是一些静态资源，即不需要改变图片、css文件,js文件等，将其放在离用户最近的服务器上。

减少cookie传输