前端优化知识点总结.docVIP

前端优化知识点总结

前端优化是提升网站性能和用户体验的关键环节，主要包括以下几个方面：

一、资源优化

1.1代码压缩

-JavaScript压缩：通过移除空格、注释和缩短变量名来减小文件大小。

-CSS压缩：合并选择器，删除无用代码，减少文件体积。

-HTML压缩：删除空格、注释和简化标签。

1.2资源合并

-文件合并：将多个CSS或JavaScript文件合并为一个文件，减少HTTP请求次数。

-图片合并：使用雪碧图或CSS背景定位技术，减少图片请求。

1.3图片优化

-格式选择：根据图片特点选择合适的格式，如JPEG、PNG、WebP。

-压缩工具：使用图片压缩工具减少文件大小，如TinyPNG。

-响应式图片：使用`picture`元素或`srcset`属性提供不同分辨率的图片。

二、缓存优化

2.1浏览器缓存

-强缓存：通过设置HTTP头部的`Cache-Control`和`Expires`字段，使浏览器缓存资源。

-协商缓存：使用`Last-Modified`和`ETag`字段，当资源未修改时返回304状态码。

2.2服务端缓存

-CDN缓存：使用内容分发网络（CDN）缓存静态资源，减少服务器负载。

-Redis缓存：使用Redis缓存动态内容，提高响应速度。

三、加载优化

3.1优先级加载

-关键渲染路径：优化