zoukankan      html  css  js  c++  java
  • 前端不得不说的性能优化

    作为一名前端工程师我们除了写得了编程修得了样式之外,我们需要注意的就是如何进行前端性能优化。

    先说下前端性能优化的目的,我们从用户角度和服务商角度来说。

    1.用户方面:优化能让页面加载更快,对用户的操作响应更及时,能够给用户提供更为友好的体验;

    2.服务商方面:优化能够减少页面请求数,或者减少请求所占带宽,能够节省客观的资源

    分析完优化目的,下面说说从什么途径进行优化或者说怎么进行优化?优化的方法有哪些?

    一、页面级别的优化

    1.1 减少http请求数以及减少请求资源的大小

    理由:一个完整的HTTP请求需经过以下几个流程:域名解析,DNS寻址 --> 发起TCP的3次握手 --> 建立TCP连接后发起http请求 --> 服务器响应http请求,浏览器得到html代码 --> 浏览器解析html代码,并请求html代码中的资源(如js、css、图片等) --> 浏览器对页面进行渲染呈现给用户。整个流程除耗时成本不说若当下载资源过大时,页面加载如何能快?所以减少http请求数有助于提高页面加载速度。

    方法:

    1,.1.1、 尽量合并和压缩css和js文件。通过打包工具webpack和gulp

    1.1.2、 尽量所使用的字体图标或者SVG图标来代替传统png图.因为字体图标或者SVG是矢量图,            代码编写出来的,方大不会变形,而且渲染速度快

    1.1.3、 减少DNS查找

    1.1.4 、使用雪碧图或者是说图片精灵
      把所有相对较小的资源图片,绘制在一张大图上,只需要将大图下载下来,然后利用
      图片定位来讲小图展现在页面中(background-position:百分比,数值)

    1.1.5、 采用图片的懒加载(延迟加载)
      目的为了,减少页面第一次加载过程中http的请求次数
      具体步骤:
        1、页面开始加载时不去发送http请求,而是放置一张占位图
        2、当页面加载完时,并且图片在可视区域再去请求加载图片信息

    1.1.6、 能用css做的效果,不要用js做,能用原生js做的,不要轻易去使用第三方插件。
      避免引入第三方大量的库。而自己却只是用里面的一个小功能

    1.1.7减少对cookie的使用(最主要的就是减少本地cookie存储内容的大小),因为客户端操作cookie的时候,这些信息总是在客户端和服务端传递。如果上设置不当,每次发送

    一个请求将会携带cookie

    1.1.8、前端与后端进行数据交互时,对于多项数据尽可能基于json格式来进行传送。相对于使用xml
      来说传输有这个优势
      目的:是数据处理方便,资源偏小

    1.1.9 、在基于ajax的get请求进行数据交互的时候,根据需求可以让其产生缓存(注意:这个
    缓存不是我们常看到的304状态码,去浏览器本地取数据),这样在下一次从相同地址获取是数据
    时,取得就是上一次缓存的数据。(注意:很少使用,一般都会清空。根据需求来做)

    1.2、避免使用iframe
      不仅不好管控样式,而且相当于在本页面又嵌套其他页面,消耗性能会更大。因为还回去加载这个嵌套页面的资源

    二、代码级别的优化

    2.1、因为使用闭包后,闭包所在的上下文不会被释放,所以在js中我们要尽量少使用闭包

    2.2 、减少对DOM操作,主要是减少DOM的重绘与回流(重排)

    2.3、在js中避免嵌套循环和"死循环"(一旦遇到死循环,浏览器就会直接卡掉)

    2.4、把css放在body上,把js放在body下面

      让其先加载css(注意:这里关于优化没有多大关系)

    2.5、减少css表达式的使用

    2.6、css选择器解析规则所示从右往左解析的。减少元素标签作为对后一个选择对象

    2.7、尽量将一个动画元素单独设置为一个图层(避免重绘或者回流的大小)
      注意:图层不要过多设置,否则不但效果没有达到反而更差了

    2.8、在js封装过程中,尽量做到低耦合高内聚。减少页面的冗余代码

    2.9、css中设置定位后,最好使用z-index改变盒子的层级,让盒子不在相同的平面上

    2.10、css导入的时候尽量减少@import导入式,因为@import是同步操作,只有把对应的样式导入后,才会继续向下加兹安,而link是异步的操作

    2.11、使用window.requestAnimationFrame(js的帧动画)代替传统的定时器动画
      如果想使用每隔一段时间执行动画,应该避免使用setInterval,尽量使用setTimeout
      代替setInterval定时器。因为setInterval定时器存在弊端:可能造成两个动画间隔时间
      缩短

    2.12、尽量减少使用递归。避免死递归
      解决:建议使用尾递归

    2.13、基于script标签下载js文件时,可以使用defer或者async来异步加载

    2.14、在事件绑定中,尽可能使用事件委托,减少循环给DOM元素绑定事件处理函数。

    2.15、在js封装过程中,尽量做到低耦合高内聚。减少页面的冗余代码

    2.16、减少Flash的使用

    三、、存储

    3.1、结合后端,利用浏览器的缓存技术,做一些缓存(让后端返回304,告诉浏览器去本地拉取数据)。(注意:也有弊端)可以让一些不太会改变的静态资源做缓存。比如:一些图片,js,cs

    3.2、利用h5的新特性(localStorage、sessionStorage)做一些简单数据的存储,
      避免向后台请求数据或者说在离线状态下做一些数据展示。

  • 相关阅读:
    什么是 bean 的自动装配?
    什么是 Spring 的内部 bean?
    什么是 Spring 的 MVC 框架?
    Spring AOP and AspectJ AOP 有什么区别?
    解释 JDBC 抽象和 DAO 模块?
    volatile 类型变量提供什么保证?
    一个 Spring Bean 定义 包含什么?
    什么是 Spring MVC 框架的控制器?
    使用 Spring 访问 Hibernate 的方法有哪些?
    什么是 Callable 和 Future?
  • 原文地址:https://www.cnblogs.com/smile-xin/p/11645057.html
Copyright © 2011-2022 走看看