web前端包括哪些内容，前端性能优化总结

深藏阁楼爱情的钟 2021-09-03 09:22 731阅读 0赞

转眼间2020年就要结束了，有些人已经成为前端界的大神，也有人还在学习的路上，曾经分享过很多关于前端知识的文章，从简单知识到复杂代码，不知道你们是否从中获得收获，如今前端开发工程师已经是企业中不可缺少的部分，前端的知识也需要我们不断总结学习，接下来介绍下前端性能优化总结。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center]

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 懒加载  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center 1]

4.4 缓存dom查询

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center 2]

4.5 合并dom插入  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center 3]

4.6 事件节流

监听文字改变事件，无操作100毫秒后执行操作，不用每次触发。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center 4]

事件节流主要用于触发频率较高的事件，设定一个缓冲触发事件。

补充

异步加载

非核心代码异步加载 – 异步加载的方式 – 区别

1.动态脚本加载

用js创建

2.defer

3.async

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center 5]

关于 defer，我们还要记住的是它是按照加载顺序执行脚本的

标记为async的脚本并不保证按照指定它们的先后顺序执行。对它来说脚本的加载和执行是紧紧挨着的，所以不管你声明的顺序如何，只要它加载完了就会立刻执行。

浏览器缓存

浏览器缓存 – 缓存的分类 – 缓存的原理

缓存就是html文件在本地存在的副本，

强缓存

发现有缓存直接用。

![在这里插入图片描述][20201125085544949.png_pic_center]

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年，加班少点，工资多点！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center]: /images/20210813/ee7daf181069420e8ab1088a96227cc4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210813/51a2e50e4a154ebd913216c8a6f40c84.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210813/5bfa22610d0045e8999823d2ffb1de93.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20210813/996912ecd3b34448bb59147f7d9f7dec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20210813/c93fc80a3cc5415982808f80fef779f5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20210813/7beefa94d3fe4543b3c2d52b867f2d00.png
[20201125085544949.png_pic_center]: /images/20210813/e246f9535fbf4411aa5fde62f2fb3330.png