认识达内从这里开始

web前端编程开发随着互联网的不断发展而逐渐成为一个互联网热门求职岗位之一，下面我们就通过案例分析来简单了解一下，web前端页面性能优化包含哪些方面。

1、尽可能的减小资源的大小

业务代码本身尽可能的不要重复，提高组件化的使用，提示代码的复用率，这里不止是JS，CSS样式也是一样

压缩静态资源，一般脚手架都默认会处理，自建项目可检查是否有压缩

html中的DOM层级控制不要太深以及减少不必要的DOM使用，尽可能发挥伪元素及CSS的使用

检查项目的依赖包是否有重复引用的情况，不同的依赖包可能引用了同一个不同版本的包，可通过webpack-bundle-analyzer插件分析查看

UI组件库或其他库使用babel-plugin-import插件进行按需加载

组件按需加载，使用AsyncComponent仅加载屏组件

对评秒开要求较高的，可对屏请求的接口进行拆分，快速响应屏需要用到的字段，其他的数据异步加载

使用treeshaking，当我们在项目中引入其他模块时，他会自动将我们用不到的代码，或者永远不会执行的代码摇掉，在Uglify阶段查出，不打包到bundle中

HTTP头部Cookie的精简，去除不必要的Cookie，静态资源做独立域名部署，避免请求携带Cookie

HTTP头部开启gzip压缩，可大大减小网络传输的数据量

HTTP头部开启keep-alive

升级HTTP到2.0，2.0的头部压缩，减少了数据传输量，能够节省消息头占用的网络的流量，且还有多路复用等优势

2、尽可能的减少资源的次数

JS/CSS数量不可太分散，避免一下发起太多的请求，必要将部分资源合并在一起，减少请求的数量。但是在合并的过程中需求在体积和数量之间权衡，并不是越少越好，可将大的体积控制在一个范围内进行合并

部分小体量级别的JS/CSS可内联到HTML中，减少请求数量

减小预检请求OPTIONS的发起，可通过服务端设置Access-Control-Max-Age字段或改为发起简单请求

取消无效请求，表单提交频繁点击，路由切换时还有未完成的请求。这些都会产生无效请求，对服务器和用户体验都是不好的

3、其他资源优化

图片webp使用，对于支持的设备使用webp

图片裁剪，针对使用场景进行相应的裁剪

大图不要打包在项目中，上传到单独的静态资源服务器或是CDN中

图片上传前进行压缩，切记不要使用原图

设置图片标签尺寸大小，防止图片加载中导致页面布局抖动，影响CLS指标的数值

超出屏幕外的图片开启懒加载

对于项目中大量的小图标可使用iconfont字体方案

使用三方字体库时尽可能按需文字生成

加载字体的时候会导致页面文字有一定的闪烁抖动，可在进入需要用到的页面前使用preload提前进行加载

4、页面渲染时

开启骨架屏，提升用户体验，避免加载到渲染过程中都是白屏阶段

对于大量列表的滚到使用虚拟列表

尽量多使用CSS3动画

使用requestAnimationFrame监听帧变化，使得在正确的时间进行渲染

合理使用CSS，避免通配符，大化样式继承，少用标签选择器，减少过深嵌套等

5、用户界面交互

减少页面重排、重绘

防抖节流的使用

合理使用requestAnimationFrame动画代替setTimeout

开启GPU加速，CSS中可使用以下属性(CSS3transitions、CSS33Dtransforms、Opacity、Canvas、webGL、Video)来触发GPU渲染

减少JavaScript脚本执行时间，把一些和DOM操作无关且耗时的任务放到WebWorkers中去执行

对未来某个时间内需要执行动画的元素，将其标记为will-change，这样渲染引擎会将该元素单独生成一个图层

【免责声明】本文系本网编辑部分转载，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与管理员联系，我们会予以更改或删除相关文章，以保证您的权益!更多内容请加danei0707学习了解。欢迎关注“达内在线”参与分销，赚更多好礼。