前端性能优化
2020-04-06 本文已影响0人
demoxjl
1.减小http的请求大小，减少没必要的图片，css,js和html等对文件压缩优化缩短网络传输等待延时
2.减少http的请求：（缩短页面请求的等待时间）
在浏览器与服务器通信时，主要通过http进行通信，浏览器与服务器需要经过三次握手（Connection:keep-alive,握手不断开），每次握手
花费大量时间。而且不同浏览器对资源文件并发请求数量有限，http请求量达到一定数量，资源请求
就处于等待状态，因此减少http的请求数量可以很大成都市对网站性能进行优化。
3.使用webpack/gulp等工程化打包工具把多个js,css文件集合成一个，减少http请求数量
4.使用精灵图片，将多张图片合并成一张，减少请求；或者使用background属性访问图片，可以减少图
片总字节数
5.懒加载：控制网页的内容在一开始无需加载，不需要发请求，等到用户真正需要的时候立即加载内
容，控制了网页一次性的请求量（淘宝的图片，屏幕滑动到哪里加载到哪里）
6.减少DOM操作
7.图标使用字体图标(IconFont)替换
8.利用浏览器缓存：浏览器缓存将资源存储在本地，等下次请求该资源时，若已存在，则不需向服务器重新发送请求，直接在本地读取
9.避免页面中空的href和src,浏览器会把空的内容进行加载，直到查找失败，会阻塞页面中其他内容的下载进程
10.为指定的HTML页面配置Cache-Control和Expires,将内容缓存起来
<meta http-equiv="Cache-Control" content="max-age: 7200" >
<meta http-equiv="expires" content="Wed 20 jun 2020 23:59:59 GMT" >
11.优化页面的排版顺序,内容侧重于左侧导航，先加载内容区域，在加载左侧导航
<body>
<content></content>
<asideNav></asideNav>
</body>
