前端性能优化（重点）
前端性能优化可以分为三个level：静态资源优化、接口访问优化、页面渲染速度优化
一.静态资源优化
减少静态资源的加载时间，主要包括html、css、js和图片文件，静态资源的加载时间是前端性能最大的瓶颈（特别是图片）
- 合并css、js文件，制作雪碧图：减少http的请求次数，节省网络请求时间
- 静态资源cdn分发：客户端可以通过最佳的网络链路加载静态资源
- js、css文件压缩，图片压缩，gzip压缩：减少请求返回的数据量
- 静态资源缓存机制
- 使用字体图标 iconfont 代替图片图标
二.接口访问优化
- 减少HTTP请求，压缩精简脚本代码
- 一个页面依赖的众多业务接口和第三方接口统一使用一个部署在集群中的接口调用，减少页面接口请求数
- 接口缓存策略优化
三.页面渲染速度优化
- 合理放置脚本位置 css放在顶部：优先渲染，js放在底部：避免阻塞
- 减少DOM元素数量：这个最能体现变成水平了
- 图片懒加载:避免页面打开时加载过多的资源
- 使用事件委托:能大大的减少与dom的交互次数，提高性能
- 减少重绘重排
用 JavaScript 修改样式时，最好不要直接写样式，而是替换 class 来改变样式。
如果要对 DOM 元素执行一系列操作，可以将 DOM 元素脱离文档流，修改完成后，再将它带回文档。推荐使用隐藏元素（display:none）或文档碎片（DocumentFragement），都能很好的实现这个方案
img标签要设置高宽 - 无阻塞加载JavaScript脚本(异步加载) ：动态脚本加载 defer async
defer是在html解析完毕才执行,如果有多个则按加载顺序执行
async是加载完毕后立即执行,如果是多个,执行顺序与加载顺序无关 - 使用服务端渲染
三.Vue项目优化
1.路由懒加载
2.一些数据的包装用下computed
3.for循环设置key值
4.代码模块化，提取公用的方法
4.业务功能组件的封装
5.第三方插件的按需引入
6.webpack的压缩
前端性能优化（重点）相关推荐
- 前端性能优化——从 10 多秒到 1.05 秒
https://lishaoy.net 关于 性能优化 是个大的面,这篇文章主要涉及到 前端 的几个点,如 前端性能优化 的流程.常见技术手段.工具等. 提及 前端性能优化 ,大家应该都会想到 雅虎军 ...
- 移动H5前端性能优化指南[转]
移动H5前端性能优化指南 米随随2015.01.23 移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用 2. 在Mobile侧我们提出三秒种渲染完成首屏指标 3. 基于第二点 ...
- 前端性能优化最佳实践（转）
转载请注明: 转载自WEB前端开发(www.css119.com)-关注常见的WEB前端开发问题.最新的WEB前端开发技术(webApp开发.移动网站开发).最好的WEB前端开发工具和最全的WEB前端 ...
- 前端性能优化 -- 从 10 多秒到 1.05 秒
关于 性能优化 是个大的面,这篇文章主要涉及到 前端 的几个点,如 前端性能优化 的流程.常见技术手段.工具等. 提及 前端性能优化 ,大家应该都会想到 雅虎军规,本文会结合 雅虎军规 融入自己的了解 ...
- 移动HTML5前端性能优化指南
http://www.cocoachina.com/webapp/20150126/11020.html (点击看大图) 移动H5前端性能优化指南[托尼托尼研究所] 概述 1. PC优化手段在M ...
- [译] 2019 前端性能优化年度总结 — 第五部分
原文地址:Front-End Performance Checklist 2019 - 5 原文作者:Vitaly Friedman 译文出自:掘金翻译计划 本文永久链接:github.com/xit ...
- （译）2019年前端性能优化清单 — 中篇
(译)2019年前端性能优化清单 - 上篇 (译)2019年前端性能优化清单 - 中篇 (译)2019年前端性能优化清单 - 下篇 目录 资源优化 17. 使用 Brotli 或 Zopfli 进行纯 ...
- 聊一聊前端性能优化 CRP
什么是 CRP? CRP又称关键渲染路径,引用MDN对它的解释: ❝ 关键渲染路径是指浏览器通过把 HTML.CSS 和 JavaScript 转化成屏幕上的像素的步骤顺序.优化关键渲染路径可以提高渲 ...
- （2020.12.7）初次web前端性能优化记录
(转载公司内部论坛本人文章2020.12.7) 导语: 作为客户端开发,由于项目的需要,最近一年陆续做了很多web前端的需求开发.但过去做的大部分都是单页面的运营H5,上线时间短,一般保证能稳定运行就 ...
最新文章
- Linux C编程之二：Linux基础
- C什么k什么_G、D、C、Z、T、K、L、Y，这些字母和火车级别有什么关系
- 从欧瑞博看一家典型的深圳硬件公司
- 自建邮件服务器_EDM邮件营销需要掌握的一系列知识（有福利）
- Spark SQL 1.x之SQL Context使用
- java rmi 使用管道_使用Java RMI时要记住的两件事
- MongoDB误删表恢复
- rmse多少算效果好_关键词SEO优化带来流量有多少？如何做SEO优化效果好？
- android /data/system/dropbox,Android导出dropbox日志
- netty发送对象消息
- php打印预览jquery,JS实现浏览器打印、打印预览示例
- 与图片相关的几个库的编译
- IIS 7管理API——Microsoft.Web.Administration介绍
- php数组的概述及分类与声明
- java中的getinstance_Java中的KeyPairGenerator getInstance()方法
- python 使用 config 文件
- 开局一张图，理解Vuex
- 海报生成的Java方法
- 罗振宇2021跨年演讲3：谁能跳出数字化系统困境？
- 转：我通过微软亚洲研究院面试的经历