前端开发优化的一些常见方法汇总

时间 2019-12-04

标签前端开发优化一些常见方法汇总繁體版

原文原文链接

WEB前端开发经常使用的优化技巧汇总

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

页面中每发送一次HTTP请求，都须要完成请求加响应这个完整的HTTP事务，会消耗一些时间，也可能会致使HTTP连接通道的阻塞，为了提升页面的加载速度和运行的性能，咱们应该减小HTTP的请求次数和减小请求内容的大小（请求的内容越大，消耗的时间越长）。

采用CSS雪碧图（CSS Sprit/CSS 图片精灵）技术，把一些小图合并在一张大图上，使用的时候经过背景图片定位，定位在具体的某一张小图上css

.pubBg{
    background: url('../img/sprit.png') no-repeat;
    background-size: x y; /*和图片的大小保持一致*/
}
.box{
    background-position: x y; /*经过背景定位，定位到具体的位置，展现不一样的图片便可*/
}
<div class="pubBg box"></div>

真实项目中，咱们最好把CSS或者JS文件进行合并压缩。尤为是在移动端开发的时候，若是css或者js内容不是不少，咱们能够采起内嵌式，以此减小HTTP请求的次数，加快页面的加载速度前端
1. CSS合并成一个，JS最好也合并成一个
2. 首先经过一些工具（例如：webpack）把合并后的CSS或者JS压缩成xxx.min.js，减小文件的大小
3. 服务器端开启资源文件的GZIP压缩vue
  - 经过一些自动化工具完成CSS以及JS的合并压缩，或者在完成LESS转CSS，ES6转ES5等操做，咱们把这种自动化构建模式，称之为前端工程化开发
采用图片的懒加载技术，在页面开始加载的时候，不请求真实图片的地址，而是用默认图占位，当页面加载完成后，再根据相关的条件依次加载真实图片（减小页面首次加载HTTP请求的次数）webpack
真实项目中，咱们开始图片都不加载，页面首次加载完成，先把第一屏幕中能够看见的图片进行加载，随着页面的滚动，再把下面区域中可以呈现出来的图片进行加载ios

根据图片的懒加载技术，咱们还能够扩充出数据的懒加载web
1. 开始加载页面的时候，咱们只把首屏或者前两屏的数据从服务端进行请求（有些网站首屏数据是后台渲染好，总体返回给客户端呈现的）
2. 当页面下拉，滚动到哪一个区域，在把这个区域须要的数据进行请求（用请求回来的数据进行数据的绑定以及图片的延迟加载等）
3. 分页展现技术采用的也是数据的懒加载思想实现的：若是咱们请求获取不少的数据，咱们最好分批请求，开始只请求第一页的数据，当用户点击第二页（微博是下拉到必定距离后，在请求第二页数据...）的时候在请求第二页的数据
对于不常常更新的数据，最好采用浏览器的304缓存作处理（主要由服务器端处理）ajax

例如:
第一次请求CSS和JS下来，浏览器会把请求的内容缓存起来，若是作了304处理，用户再次请求CSS和JS，直接从缓存中读取，不须要再去服务器获取了（减小了HTTP请求的次数）express

当用户强制刷新页面（CTRL+F5）或者当前缓存的CSS或者JS发生了变更，都会从新从服务器端拉取编程

...axios

对于客户端来说，咱们还能够基于localStorage来作一些本地存储，例如：第一次请求的数据或者不常常更新的CSS和JS，咱们均可以把内容存储到本地，下一次页面的加载，咱们从本地获取便可，咱们设定必定的期限或者一些标识，能够控制在某个阶段从新从服务器获取
使用字体图标代替页面中的一些位图（图片），这样不只作适配的时候方便，并且更加轻量级，并且减小了HTTP请求次数（相似于雪碧图）
若是当前页面中出现了Audio或者Video标签，咱们最好设置他们的preload=none；当页面加载的时候，音视频资源不进行加载，播放的时候在进行加载（减小页面首次加载HTTP请求的次数）

preload=auto；页面首次加载的时候就把音视频进行加载了
preload=metadata；页面首次加载的时候只把音视频资源的头部信息进行加载
在客户端和服务器端进行数据通讯的时候，咱们尽可能采用JSON格式进行数据传输

[优点]

JSON格式的数据，可以清晰明了的展现出数据结构，并且也方便咱们获取和操做

相对于很早之前的XML传输，JSON格式的数据更加轻量级

客户端和服务器端都支持JSON数据的处理，处理起来很是的方便

在真实项目中，并非全部的数据都要基于JSON，咱们尽量这样作，可是对于某些特殊需求（例如：文件流的传输或者文档传输），使用JSON就不合适了

采用CDN加速

CDN: 分布式（地域分布式）

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

除了减小HTTP请求次数和大小能够优化性能，咱们在编写代码的时候，能够进行一些优化，让页面的性能有所提高（有些很差的代码编写习惯，会致使页面性能消耗太大，例如：内存泄漏）

在编写JS代码的时候，尽可能减小对DOM的操做
- VUE和REACT框架在这方面处理的很是不错
在JS中操做DOM是一个很是消耗性能的事情，可是咱们又不可避免的操做DOM，咱们只能尽可能减小对于他的操做

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

同步编程会致使：上面东西完不成，下面任务也作不了，咱们开发的时候，能够把某一个区域模块都设置为异步编程，这样只要模块之间没有必然的前后顺序，均可以独立进行加载，不会受到上面模块的堵塞影响（用的很少）
尤为是AJAX数据请求，咱们都要使用异步编程，最好是基于promise设计模式进行管理（项目中常用fetch，vue axios等插件来进行AJAX请求处理，由于这些插件中就是基于promise设计模式对ajax进行封装处理）
在真实项目中，咱们尽可能避免一次性循环过多数据（由于循环操做是同步编程），尤为是要避免while致使的死循环操做
CSS选择器优化
1. 尽可能减小标签选择器的使用
2. 尽量少使用ID选择器，多使用样式类选择器（通用性强）
3. 减小选择器前面的前缀，例如：.headerBox .nav .left a{} (选择器是从右向左查找的)

避免使用CSS表达式

/*CSS表达式*/
.box{
    background-color:expression((new Data()).getHours()%2?'red':'blue')
}

减小页面中的冗余代码，尽量提升方法的重复使用率：“低耦合高内聚”
最好CSS放在HEAD中，JS放在BODY尾部，让页面加载的时候，先加载CSS，在加载JS（先呈现页面，再给用户提供操做）
JS中避免使用eval
1. 性能消耗大
2. 代码压缩后，容易出现代码执行错乱问题
JS中尽可能减小闭包的使用
1. 闭包会造成一个不销毁的栈内存，过多的栈内存累积会影响页面的性能
2. 还会容易致使内存泄漏
闭包也有本身的优点：保护和保存，咱们只能尽可能减小，但不可避免
在作DOM事件绑定的时候，尽可能避免一个个的事件绑定，而是采用性能更高的事件委托来实现

事件委托（事件代理）
把事件绑定给外层容器，当里面的后代元素相关行为被触发，外层容器绑定的方法也会被触发执行（冒泡传播机制致使），经过事件源是谁，咱们作不一样的操做便可
尽可能使用CSS3动画代替JS动画，由于CSS3动画或者变形都开启了硬件加速，性能比JS动画好
编写JS代码的时候尽量使用设计模式来构建体系，方便后期的维护，也提升了扩充性等
CSS中减小对滤镜的使用，页面中也减小对于FLASH的使用

关于页面的SEO优化技巧

页面中杜绝出现死连接（404页面），并且对于用户输入的一个错误页面，咱们要引导到404提示页面中（服务器处理的）
避免浏览器中异常错误的抛出

尽量避免代码出错
使用TRY CATCH作异常信息捕获
增长页面关键词优化