常见的工具和技术

以下是其中一些常见的工具和技术:https://www.nowcoder.com/issue/tutorial?zhuanlanId=Mg58Em&uuid=9d41438f19104dca802ef21b5942c139

混淆和压缩代码:通过工具如UglifyJS、Terser等来压缩JavaScript代码,删除不必要的空格、换行符和注释,并将变量名、函数名等重命名为更短的形式,以减少文件大小和提高加载速度。

图片优化:使用工具如OptiPNG、JPEGoptim、SVGO等来优化图片,减小文件大小而不影响视觉质量。另外,使用适当的格式来存储图片,如使用WebP替代JPEG和PNG,以进一步减小文件大小和提高加载速度。

懒加载:将页面上的非关键资源(如图片、视频、音频等)延迟加载,等到用户真正需要时再加载,以减少初始页面加载时间。

缓存和版本控制:通过使用HTTP缓存来减少对服务器的请求,浏览器可以缓存静态文件(如样式表、脚本文件和图片),从而减少页面加载时间。此外,使用版本控制技术(如添加哈希值到文件名)来确保浏览器能够正确地加载最新的文件而不使用缓存。

Tree Shaking:通过打包工具(如Webpack和Rollup)的Tree Shaking功能,可以自动删除未使用的代码,减小文件体积。

资源合并和打包:将多个文件合并为一个单独的文件,减少网络请求次数和文件大小,同时使用打包工具(如webpack)将多个模块打包为一个或多个bundle,以减少页面加载时间。

异步加载和代码分割:将代码按需加载,仅在需要时动态加载,提高页面加载速度。使用工具如Webpack的代码分割功能或动态导入(Dynamic Import),以将代码拆分成较小的块,并在需要时按需加载。

响应式图片:根据设备的屏幕大小和分辨率,使用不同大小的图片,以减少不必要的下载和带宽消耗。
全部评论

相关推荐

ETag(Entity Tag)是一个由服务器生成的用于标识资源的唯一标识符。https://www.nowcoder.com/issue/tutorial?zhuanlanId=Mg58Em&uuid=5f0bf65b3be04ac8a2beb28f857943a6ETag 在浏览器缓存中的作用是协商缓存的一部分。当浏览器发送请求时,会将上一次请求返回的 ETag 值通过 If-None-Match 请求头字段发送给服务器。服务器使用这个值与当前资源的 ETag 进行比较,以判断资源是否发生了变化。如果服务器发现资源的 ETag 值与浏览器发送的匹配,并且资源没有发生变化,服务器会返回状态码 304 Not Modified,表示资源未修改。浏览器收到这个响应后,可以直接从缓存中获取资源,而无需重新下载。ETag 能够精确地确定资源是否发生了变化,相对于 Last-Modified(最后修改时间)来说更加准确。如果资源的内容发生了任何改变,服务器会为该资源生成新的 ETag 值,而 Last-Modified 只能以秒级别的精度表示时间,可能无法捕捉到非常小的修改。在大多数情况下,浏览器会使用 Cache-Control 和 ETag(或 Last-Modified)一起使用,以提供更精确和可靠的缓存控制。当 Cache-Control 的缓存过期策略失效时,浏览器会使用 ETag 和服务器进行协商,以便确定是否可以使用缓存的副本。如果服务器返回 304 Not Modified,浏览器就可以直接使用缓存,并避免重新下载资源。这样可以减少网络带宽的使用,并提高页面加载速度和性能。
点赞 评论 收藏
分享
评论
点赞
收藏
分享
牛客网
牛客企业服务