前端性能优化

illion
351 阅读7分钟

「这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战」

一、前端兼容性

问题一：IE6下margin值双倍边距问题 问题表现：IE6下元素浮动之后margin值变成双倍 解决方法：将元素转为行内属性

{
  display: inline;
}

问题二：height值设置过小问题 问题表现：IE6、IE7下设置标签高度小于10px，存在超出已设置的高度的问题 解决方法：为超出高度的元素添加溢出部分隐藏

{
  overflow: hidden;
}

问题三：图片元素img下默认有间距 问题表现：IE6下图片元素img出现多余空白 解决方法：图片使用float属性

问题四：opacity多浏览器透明度兼容问题 问题表现：opacity是css3里的属性，只有部分浏览器支持 解决方法：使用各个浏览器的私有属性以支持opacity

{
  filter: alpha(opacity=50);/*IE*/
  -moz-opacity: 0.5;/*老版Mozilla*/
  -khtml-opacity: 0.5;/*老版Safari*/ 
  opacity: 0.5;
}

#####二、前端性能优化 ==网络方面==： 1、减少http请求

  • 合并js文件
  • 合并css文件
  • 使用雪碧图（css sprite）

合并文件可以使用webpack之类的打包工具进行打包

2、减少资源体积

  • gzip压缩
  • js混淆
  • css压缩
  • 图片压缩（png）

gzip压缩主要是针对html文件来说的，它可以将html中重复的部分进行一个打包，多次复用的过程，好处：一是可以减少存储空间，二是通过网络传输文件时，可以减少传输的时间。 js的混淆可以有简单的压缩(将空白字符删除)、丑化(丑化的方法，就是将一些变量缩小)、或者可以使用php对js进行混淆加密，工具是==uglify==。 css压缩，就是进行简单的压缩。 图片的压缩，主要也是减小体积，在不影响观感的前提下，尽量压缩图片，使用png等图片格式，减少矢量图、高清图等的使用。这样子的做法不仅可以加快网页显示，也能减少流量的损耗。

3、缓冲

  • DNS缓存
  • CDN部署与缓存
  • http缓存

DNS预解析<link rel="dns-prefetch" href="//hm.baidu.com"> CDN缓存，CDN作为静态资源文件的分发网络，本身就已经提升了，网站静态资源的获取速度，加快网站的加载速度，同时也给静态资源做好缓存工作，有效的利用已缓存的静态资源，加快获取速度。 http缓存，也是给资源设定缓存时间，防止在有效的缓存时间内对资源进行重复的下载，从而提升整体网页的加载速度。

4、移动端优化

  • 使用长cache，减少重定向
  • 首屏优化，保证首屏加载数据小于14kb
  • 不滥用web字体

「使用长cache」，可以使得移动端的部分资源设定长期缓存，这样可以保证资源不用向服务器发送请求，来比较资源是否更新，从而避免304的情况。304重定向，在PC端或许并不会影响网页的加载速度，但是，在移动端网络不稳定的前提下，多一次请求，就多了一部分加载时间。 「首屏优化」，对于移动端来说是至关重要的。2s时间是用户的最佳体验，一旦超出这个时间，将会导致用户的流失。所以，针对移动端的网络情况，不可能在这么短时间内加载完成所有的网页资源，所以我们必须保证首屏中的内容被优先显示出来，而且基于TCP的慢启动和拥塞控制，第一个14kb的数据是非常重要的，所以需要保证首部加载数据能够小于14kb。

==渲染和DOM操作方面== 1、优化网页渲染

  • css的文件放在头部，js文件放在尾部或者异步
  • 尽量避免内联样式

css文件放在「头部加载」，可以保证解析DOM的同时，解析css文件。因为，CSS（外链或内联）会阻塞整个DOM的渲染，然而DOM解析会正常进行，所以将css文件放在头部进行解析，可以加快网页的构建速度。假设将其放在尾部，那时DOM树几乎构建，这时就得等到CSSOM树构建完成，才能够继续下面的步骤。 「js放在尾部」：js文件不同，将js文件放在尾部或者异步加载的原因是JS（外链或内联）会阻塞后续DOM的解析，后续DOM的渲染也将被阻塞，而且一旦js中遇到DOM元素的操作，很可能会影响。

2、DOM操作优化

  • 减少DOM操作（减少回流和重绘）
  • 使用classname代替内联样式修改
  • 使用事件委托
  • 函数防抖和函数节流

「使用事件代理」：往往对于具备冒泡性质的事件来说，使用事件代理不失为一种好的方法。举个例子：一段列表都需要设定点击事件，这时如果你给列表中的每一项设定监听，往往会导致整体的性能下降，但是如果你给整个列表设置一个事件，然后通过点击定位目标来触发相应的操作，往往性能就会得到改善。

介绍：函数防抖，当调用动作过n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间；函数节流，预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期。

==数据方面== 1、图片加载处理

  • 图片预加载（提前加载）
  • 图片懒加载
  • 首屏加载时进度条的显示

常见的图片懒加载的方式就是：在最初给图片的src设置一个比较简单的图片，然后将图片的真实地址设置给自定义的属性，做一个占位，然后给图片设置监听事件，一旦图片到达视口范围，从图片的自定义属性中获取出真是地址，然后赋值给src，让其进行加载。

2、异步请求的优化

  • 使用正常的json数据格式进行交互
  • 部分常用数据的缓存
  • 数据埋点和统计

「JSON交互」，JSON的数据格式轻巧，结构简单，往往可以大大优化前后端的数据通信。 「常用数据的缓存」，可以将一些用户的基本信息等常用的信息做一个缓存，这样可以保证ajax请求的减少。同时，HTML5新增的storage的内容window.localStorage，也不用怕cookie暴露，引起的信息泄漏问题。

localStorage 的使用 (增删改查)



　　//因为某些浏览器还不支持localStorage，所以可以先做判断

　　if(!window.localStorage){

　　　　alert("浏览器不支持localStorage！请使用高版本的Chrome或者Firefox");

　　　　return false;

　　}else{

　　　　//业务逻辑

　　}

　　//1、添加本地存储( 有三种方法，但是推荐使用 setItem() )

　　　　var storage = window.localStorage;

　　　　storage["a"] = 1; //方法一

　　　　storage.b = 2;//方法二

　　　　storage.setItem("c", 3);//方法三  推荐

　//　2、获取本地存储(有三种方法，推荐使用getItem())

　　　　var storage = window.localStorage;

　　　　storage.a //1

　　　　storage["b"];//2

　　　　storage.getItem("c"); //3　　

　　//3、修改本地存储

　　　　storage.a =4;

　　　　storage.a; // 4

　//　4、 删除本地存储

　　　　清除所有内容： storage.clear();

　　　　清除某个键值：storage.removeItem("a");

其他需要注意的：

　　我们一般会将JSON存入localStorage ，需要将JSON格式的数据转化为string类型，需使用 JSON.stringify();

　　读取之后要将JSON字符串转化成JSON对象，使用JSON.parse();

　　注：其他类型的也需要转化为string，这里就不再介绍了，下面只介绍了JSON转化为string

　　

var storage=window.localStorage;

　　var data={

　　　　name:'user',
　　　　sex:'female',
　　　　age:18
　　};

　　var d=JSON.stringify(data);//将json格式转化为字符串

　　storage.setItem("data",d);//添加缓存

　　var json=storage.getItem("data");//获取缓存

　　var jsonObj=JSON.parse(json);//将JSON字符串转换成为JSON对象输出

　　console.log(typeof jsonObj);
avatar
文章
阅读
粉丝