浅谈前端网络、JavaScript优化以及开发小技巧资源-CSDN文库

168 浏览量 2020-09-22 13:05:42 上传评论收藏 599KB PDF 举报

在网络性能优化方面，文章提到了YSlow这个工具，它提供了23条规则，主要目标是消除或减少不必要的网络延迟，并将需要传输的数据压缩至最少。为了实现这一目标，开发者可以通过合并和压缩CSS、JavaScript和图片等静态资源。这是因为HTTP1.x协议中，浏览器不允许响应数据交错到达，也就是说，一旦开始传输一个响应，下一个响应就必须等待当前响应完全结束后才能开始传输。这种限制会导致即使客户端同时发送了两个请求，资源的下载也会因为依赖顺序而出现阻塞。此外，CDN的使用可以确保用户访问到的是最近的资源，减少网络传输时间。关于CSS和JavaScript的放置，文章指出CSS应该放在HTML文档的<head>部分，而JavaScript应该放在<body>标签的底部。这样做的原因是，CSS可以并行下载，而JavaScript的加载会阻塞其他资源的下载，直到脚本执行完毕。这一点在HTTP2.0中得到了改进，因为该协议支持多路复用，可以同时传输多个响应，减少了延迟。文章还提到了DNS解析优化和减少重定向。在进行网页性能优化时，应当尽量减少DNS解析的时间和重定向的次数，因为这两者都会导致页面加载的延迟。例如，在使用微信进行“女神评选活动”的时候，通过减少域名跳转和在服务器的host文件中添加一条记录直接通过IP指向微信服务器，显著减少了页面加载时间。在JavaScript优化方面，文章提到了图片预加载的策略。在“秋名山活动”中，由于涉及到大量图片的加载，开发者采取了在页面载入时先加载一些通用图片，并在答题阶段预先加载后续页面中的图片，以防止用户访问页面时图片尚未展示。这样可以提升用户体验，避免页面加载时的空白或不完整图片。另外，文章还提到了减少代码中的分支判断，这可以通过惰性模式和建立映射关系来实现。惰性模式是一种编程模式，它允许你延迟计算直到需要的时候，从而减少不必要的计算量。这种方法可以避免不必要的分支判断，并优化性能。在开发过程中，开发者可以使用各种构建工具，如Gulp，来帮助自动完成合并压缩等优化任务。这些工具在开发时就可集成使用，有助于提升开发效率和性能优化的效率。前端优化是一个多方面的任务，它包括对网络请求、资源加载和代码执行效率的细致关注。开发者需要了解各种前端性能的最佳实践，并通过不断的优化来提升网站的用户体验。随着HTTP2.0等新标准的普及，未来的前端优化将会有更多的技术可用，这将有助于开发者更好地管理前端性能和用户体验。

资源推荐

资源详情

资源评论