转眼间2020年就要结束了,有些人已经成为前端界的大神,也有人还在学习的路上,曾经分享过很多关于前端知识的文章,从简单知识到复杂代码,不知道你们是否从中获得收获,如今前端开发工程师已经是企业中不可缺少的部分,前端的知识也需要我们不断总结学习,接下来介绍下前端性能优化总结。
1.原则
多使用内存,缓存或者其他方法
减少CPU计算,减少网络请求
减少IO操作(硬盘读写)
2.加载资源优化
静态资源的合并和压缩。
静态资源缓存(浏览器缓存策略)。
使用CDN让静态资源加载更快。
3.渲染优化
CSS放head中,JS放body后
图片懒加载
减少DOM操作,对DOM操作做缓存
减少DOM操作,多个操作尽量合并在一起执行
事件节流
尽早执行操作 DOMContentLoaded
4.示例
4.1 资源合并
a.js b.js c.js — abc.js
4.2 缓存
通过连接名称控制缓存
只有改变内容的时候,链接名称才会改变。
4.3 懒加载
4.4 缓存dom查询
4.5 合并dom插入
4.6 事件节流
监听文字改变事件,无操作100毫秒后执行操作,不用每次触发。
事件节流主要用于触发频率较高的事件,设定一个缓冲触发事件。
补充
异步加载
非核心代码异步加载 – 异步加载的方式 – 区别
1.动态脚本加载
用js创建
2.defer
3.async
关于 defer,我们还要记住的是它是按照加载顺序执行脚本的
标记为async的脚本并不保证按照指定它们的先后顺序执行。对它来说脚本的加载和执行是紧紧挨着的,所以不管你声明的顺序如何,只要它加载完了就会立刻执行。
浏览器缓存
浏览器缓存 – 缓存的分类 – 缓存的原理
缓存就是html文件在本地存在的副本,
强缓存
发现有缓存直接用。
Expires: 绝对时间,判断客户端日期是否超过这个时间
Cache-Control:相对时间,判断访问间隔是否大于3600秒
//在设定时间之前不会和服务端进行通信了
//如果两个都下发以后者为准
协商缓存
询问服务器缓存是否可以用,在进行判断是否用。
Last-Modified/If-Modified-Since
第一次请求,respone的header加上Last-Modified(最后修改时间)
再次请求,在request的header上加上If-Modified-Since
和服务端的最后修改时间对比,如果没有变化则返回304 Not Modified,但是不会返回资源内容;如果有变化,就正常返回资源内容。
浏览器收到304的响应后,就会从缓存中加载资源
如果协商缓存没有命中,浏览器直接从服务器加载资源时,Last-Modified的Header在重新加载的时候会被更新
Etag/If-None-Match
这两个值是由服务器生成的每个资源的唯一标识字符串,只要资源有变化就这个值就会改变;其判断过程与Last-Modified/If-Modified-Since类似,他可以精确到秒的更高级别。
最后
如何学好前端开发是关键:
前端技术每年都会不断更新,自学前端容易学不到最前沿的课程,学习前端开发建议大家还是要选择培训为好,推荐爱创课堂,是一家专门做前端教育的学校,爱创课堂是一家以就业为导向的前端培训学校,所学习的就是企业所需要的,培养企业最需要的前端工程师为企业理念,授课以实战课程为主,更多的学习大项目对以后工作有帮助,毕业后轻松就业!
一位好的Web前端开发工程师在知识体系上既要有广度,又要有深度,所以很多大公司即使出高薪也很难招聘到理想的前端开发工程师。
那么如何系统的学习企业实用的web前端技术呢,视频教程、学习路线、
前端学习培训,可以添加威信:kaixin666haoyun 分享给大家前端学习资料。
相信从中会受到启发,找到学习的方向和目标。如大家对前端还有不了解的问题,可以持续关注我。
尽管有年月日的划分,但日子毕竟是连在一起过的,所以今年未完成的学习安排并不会在2021年到来的那一刻戛然而止。2021年,想必会是忙碌的一年。预祝大家2021年,加班少点,工资多点!