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

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

减少HTTP请求次数or减小请求内容的大小

页面中每发送一次HTTP请求，都需要完成一次HTTP事务，既会消耗时间，又有可能造成http链接通道堵塞，为了提高页面加载速度和运行性能，我们应该减少HTTP的请求次数和减小请求内容的大小

1.采用CSS雪碧图（css sprit/css图片精灵）技术，把小图合并到一张大图上，使用背景定位，定位到具体位置上

2、真实项目中，我们最好把css或者js文件进行合并压缩：尤其在移动端，如果css、js文件很少，我们可以采取内嵌式，减少请求次数

1)都最好分别合并成一个文件
2）通过一些工具（webpack）将文件压缩，减小文件大小
3）服务器端开启资源文件的GZIP压缩
通过自动化工具完成文件的合并压缩，文件转化（less->css/ES6->ES5）等操作，我们把这种自动化构建模式，称之为前端工程化开发

3、采用图片懒加载技术，在页面开始加载的时候，使用默认展位图，当页面加载完成后，依次加载真实图片（减少页面首次加载时的HTTP请求次数）

真实项目中，开始图片都不加载，然后先把第一屏
根据以上原理，我们可以扩充数据懒加载
1）开始加载页面的时候，只把首屏或前两屏的数据从服务器请求过来（大型电商网站的首屏一般都是有服务器端直接）
2）当页面下拉，在请求该区域的数据
3）分页展示技术（微博）采用的也是数据的懒加载：如果我们请求获取很多的数据，最好分批请求，开始只展示第一页的数据，当用户点击第二页，在请求第二页数据

4、对于不经常更新的数据，最好采用浏览器的304缓存做处理（服务器端）

第一次请求css、js代码，浏览器会把请求的内容做缓存处理，如果做了304处理，再次请求直接从缓存读取，（减少HTTP请求次数）
当数据图片更新时，都会从服务器重新拉取
对于客户端来讲，我们可以基于localStorage来做本地存储，将内容存储在本地，下一次加载可从本地获取，设定一定的期限或标识，控制某个阶段重新从服务器获取

5、使用字体图标代替页面中的位图

轻量级、适配方便、减少HTTP请求次数

6、如果页面中出现AUDIO/VIDEO标签，我们最好设置他们的preload=none，页面加载是，音视频资源不加载，播放时在加载（减少首次页面加载的http请求次数）

1)preload=auto:首次加载页面就把音视频资源加载
2)preload=metadata::首次加载页面就把音视频资源的头部信息加载（专辑名称）

7、.在客户端和服务器端进行数据通信的时候，最好采用JSON格式进行数据传输

优势
1）数据结构一目了然，方便获取和操作
2）相对于XML，JSON格式更加轻量级
3）客户端和服务器端都支持JSON格式，方便使用
真实项目中，我们尽可能使用JSON，但是对于某些特殊需求（文件流，文档传输）就不合适了

8、采用CDN加速【烧钱】

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

编写代码的优化技巧

除了减少HTTP请求次数和内容大小，还可以优化性能，【不好的编码习惯会导致】

1、尽量减少对DOM的操作（VUE和REACT框架在这方便处理的非常不错）

在JS中操作DOM是非常耗性能的，但是有不可避免，所以只能尽可能减少
[DOM操作弊端]
1）DOM存在映射机制，(JS中的DOM元素对象和HTML中的DOM结构是存在映射关系的)，这种机制是浏览器按照W3C标准完成对JS语言的构建和DOM的构建，操一次DOM要同时修改两个地方
2）页面中的DOM结构改变或样式改变，会触发DOM的回流（结构重新计算）和重绘（样式重新渲染）；

2、更多的使用异步编程

同步编程时上面任务完不成会导致下方任务无法操作
在开发时，可把某一区域（没有必然先后顺序的代码）设置为异步编程（用的不多）
尤其AJAX请求，一般都是用异步编程，最好是基于promise设计模式进行管理（项目中经常使用FETCH/VUE/AXIOS等插件来进行ajax请求处理，因为）

3、尽可能避免一次性循环过多数据（循环是同步编程），尤其要避免while导致的死循环

4、CSS选择器优化

1)尽量减少标签选择器的使用
2）少使用ID选择器，多使用样式类选择器（通用性强）
3）减少选择器前面的前缀，选择器是从右向左查找，【命名类名时最好沿用父级类名.header-con-title】

5、尽量加少使用CSS表达式

6、减少页面中的冗余代码，提高方法的使用率，低耦合高内聚

7、CSS放在head中，JS放在BODY尾部：目的现场呈现页面，在给用户提供操作

8、避免使用eval

1）性能消耗比较大
2）代码压缩后，容易出现代码执行错乱

9、JS中尽量减少使用闭包

1)闭包会形成一个不销毁的栈内存，过多的栈内存会影响

10、DOM事件绑定最好采用事件委托

把事件绑定给外层容器，当里面的后代元素事件被触发，外层容器绑定的方法也会被触发执行，根据事件源的不同，做不同的操作

11、尽量使用CSS3动画代替JS动画

12、尽可能使用设计模式来构建体系，方便后期维护，提高了扩充性能

13、减少滤镜的使用，减少flash的使用

关于页面的SEO优化

1、页面中杜绝出现死链接（404）页面，并且对于用户输入的错误页面，要引导到404页面

2、避免浏览器中异常错误的抛出

1)避免代码出错
2）使用trycatch做异常信息捕获