前端性能优化笔记
2019-07-22 本文已影响0人
刘哈哈icey
1 减少HTTP请求
（1） 图片相关
-
图片地图
-
CSS Sprites 和图片地图一样，可以合并图片。将多个图片合并到一个单独的图片中。区别：图片地图中的图片必须是连续的，css Sprites 没有这个限制
-
内联图片。即将图片转换成base64格式。在src中引用
例如：
<img src='data:img/jpg;base64,....>
由于data:URL是内联在页面中的，在跨越不同页面时不会被缓存，因此不要去内敛公司Logo,因为编码过的Logo会导致页面变大。这种情况下，可以使用css将内联图片作为背景，将该css规则房子外部样式表中，这意味着数据可以缓存在样式表内部。
（2）合并脚本和样式表
适当的合并，要考虑代码模块化
2 使用内容发布网络（使用CDN）
CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。
添加Expires头
图片和js或css 缓存nginx.conf里配置
http{
...
server {
server_name xx.xx.com;
listen 8443 ssl;
listen 8080;
location ~* ^.+/.(jpg|jpeg|gif|png|bmp)$ {
expires 30d; //30天
break;
}
location ~* ^.+/.(js|css)?${
expires 30d;
}
}
}
Expires头使用一个特定的时间，它要求服务器和客户端的
时钟同步。
Cache-control使用max-age指定组件被缓存多久。
Cache-Control: max-age=315000000
若同时使用max-age ,和expires,max-age指令将重写Expires头
4 压缩组件
image.png
5 将样式表放在顶部
使用Link标签将样式表放在文档Head 中。
6 将脚本放在底部
7 避免css表达式
8 使用外部JavaScript 和Css
这样JavaScript 和Css文件有机会被浏览器缓存起来。
