前端开发优化常用办法汇总

减少HTTP请求次数或者减小请求数据的大小

  • 页面中每发送一次HTTP请求,都需要完成请求+响应这个完整的HTTP事务,会消耗一些时间,也可能会导致HTTP链接通道的堵塞,为了提高页面加载速度和运行的性能,我们应该减少HTTP请求次数和减小请求数据的大小(请求内容越大,消耗的时间越久)
  1. 采用雪碧图(CSS Sprite/CSS图片精灵)技术,把一些小图合并在一张大图上,使用的时候通过背景图定位,定位到具体的某一张小图上

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .pubBg{
    background:url('../images/sprite.png') no-repeat;
    background-size:x y;/*和原图大小保持一致*/
    }
    .box{
    background-position:x y;/*通过背景定位,定位到具体的位置,展示不同的图片即可*/
    }
    ...
    <div class="pubBg box"></div>
  2. 真实项目中,我们最好把CSS或者JS文件进行合并压缩;尤其是在移动端开发的时候,如果CSS与JS内容不是很多,我们可以采取内嵌式,以此减少HTTP请求的次数,加快页面加载速度;

  • CSS合并成一个,JS最好也合并成一个
  • 首先通过一些工具,(例如:webpack,gulp)把合并后的css与js压缩成xxx.min.js,减小文件的大小
  • 服务器端开启资源文件的GZIP压缩
  • 通过一些自动化工具完成CSS以及JS的合并压缩,或者再完成LESS转CSS,ES6转ES5等操作,我们把这种自动化构建模式,称之为前端“工程化”开发
    
  1. 采用图片懒加载技术,在页面开始加载的时候,不请求真实的图片地址,而是用默认图占位,当页面加载完成后,再根据相关的条件依次加载真实图片(减少页面首次加载HTTP请求的次数)
  • 真实项目中,我们开始图片都不加载,页面首次加载完成,先把第一屏中可以看见的图片进行加载,随着页面滚动,再把下面区域中能够呈现出来的图片进行加载

根据图片懒加载技术,我们还可以扩充出数据的懒加载

  • 开始加载页面的时候,我们只把首屏或者前两屏的数据从服务器端开始请求(有些网站首屏数据是后台渲染好,整体返回给客户端呈现的)
  • 当页面下拉,滚动到哪个区域,再把这个区域需要的数据进行请求(请求回来做数据绑定以及图片延迟加载等)
  • 分页展示技术采用的也是数据的懒加载思想实现:如果我们请求获取的数据过多,我们最好分批请求,开始只请求第一页数据,当用户点击第二页(微博是下拉到一定距离再请求第二页数据)的时候再请求第二页数据…
  1. 如果当前页面中出现了AUDIO或者VIDEO标签,我们最好设置他们的preload=none:页面加载的时候,音频资源不进行加载,播放的时候再开始加载(减少页面首次加载HTTP请求的次数)
  • preload=auto: 页面首次加载的时候就把音频资源进行加载了
  • preload=metadata: 页面首次加载的时候只把头部信息进行加载
  1. 在客户端和服务器端进行数据通信的时候,我们尽量采用JSON格式进行数据传输
  • 【优势】
  • JSON格式的数据,能够清晰明了的展示出数据的结构,而且也很方便我们获取和操作
  • 相对于很早以前的XML格式传输,JSON格式的数据更加轻量化
  • 客户端和服务器端都支持JSON格式数据的处理,处理起来非常方便

    真实项目中,并不是所有的数据都要基于JSON,我们尽可能这样做,但是对于某些特殊要求(例如:文件流的传输或者文档传输),使用JSON就不合适了
    

关于编写代码时候的一些优化技巧

  • 除了减少HTTP请求次数和数据大小可以优化性能,我们还可以在编写代码的时候进行一些优化,让页面的性能有所提升(有些不好的代码编写习惯,会导致页面性能消耗太大,例如:内存泄露)
  1. 在编写代码的时候,尽量减少对DOM的操作(VUE与REACT框架在这方面处理非常不错)
  • 在JS中操作DOM是一个非常消耗性能的事情,但是我们又不可避免的操作DOM,我们只能尽量减少对于它的操作

【操作DOM弊端】

  • DOM存在映射机制,(JS中的DOM元素对象和页面中的DOM结构是存在映射机制的,一改则都改),这种映射机制,是浏览器按照W3C标准完成对JS语言的构建和DOM的构建(其实就是构建了一个监听机制),操作DOM是同时要修改俩个地方,相对于一些其他的JS编程来说是较消耗性能的
  • 页面中的DOM结构改变或者样式改变,会触发浏览器的回流(浏览器会把DOM结构重新进行计算,这个操作很耗性能)和重绘(把一个元素的样式重新渲染)
  1. 编写代码的时候,更多地使用异步编程

同步编程会导致:上面的任务未完成,下面的任务也无法完成,我们开发的时候,可以把某一个区域模块都设置未异步编程,这样只要模块之间没有必然的先后顺序,都可以独立加载,不会受到上面模块的堵塞影响(用的不多)

  • 尤其是AJAX数据请求,我们一般都要使用异步编程,最好是基于promise设计模式进行管理(项目中经常使用fetch、axios等插件进行AJAX请求处理,因为这些插件都是基于promise设计模式对AJAX进行封装处理)
  1. 在真实项目中,我们尽可能避免一次性循环过多数据(因为循环操作是同步编程),尤其是要避免while导致的死循环操作

  2. CSS选择器优化

  • 尽量减少标签选择器的使用
  • 尽可能少的使用ID选择器,多使用样式类选择器(通用性强)
  • 减少选择器前面的前缀,例如:.headBox .nav .left a{...}(选择器是从右向左查找的)
  1. 避免使用CSS表达式
Fang Zhen wechat
有事微信联系~
我滴要饭の账号(💚一分也是爱💚)
-------------The End-------------
0%