减少网页中的HTTP请求


微信扫码阿里云返佣咨询	微信扫码阿里云折扣咨询	微信扫码技术支持
电话：18580233332 QQ客服：32738651	电话：18580211110 QQ客服：32752563	电话：18623333330 QQ客服：2194888888

减少网页中的HTTP请求

2020-9-15 点击量：

　　减少网页中的HTTP请求我们知道Web站点中几乎任何一个网页都包含了多个组件，每个组件都需要下载、计算或渲染，毫无疑问，这些行为都会消耗时间。那么如果可以让网页减少这些行为，应该就可以加快网页的展示速度，这是毫无疑问的，但是往往我们需要在优雅的网页表现和性能之间权衡取舍，这也许是美和快之间的博弈，找到最优的均衡点至关重要，我们为此做了很多尝试和努力：
　　
　　● 设计更加简单的网页，使其包含较少的图片和脚本，但是这可能牺牲了美观和用户交互。
　　
　　● 将多个图片合并为一个文件，利用CSS背景图片的偏移技术呈现在网页中，避免了多个图片的下载。
　　
　　● 合并JavaScript脚本或者CSS样式表。
　　
　　● 充分利用HTTP中的浏览器端Cache策略，减少重复下载。
　　
　　很显然，这些技巧都来自于Web网页前端的优化。

　　web前端性能优化方法总结
　　
　　一，html语义化
　　
　　语义化的html是让标签做自己该做的事，便于其他开发者阅读以及使代码规范，优雅整洁。也是为了网络爬虫更好的解析。
　　
　　问：为什么要做到语义化呢？
　　
　　1. 有利于SEO（是指从自然搜索结果获得网站流量的技术和过程），有利于搜索引擎爬虫更好的解析我们的网页，从而获取更多的有效信息，提升网页的权重。
　　
　　2. 在没有css的时候能够清晰的看出网页的结构，增强可读性。
　　
　　3. 团队合作中，语义化的html更能让其他开发人员理解和阅读，便于团队的代码维护与修改。
　　
　　4. 支持多终端设备的浏览器渲染。
　　
　　问：怎么做到语义化的html呢？
　　
　　1. 熟记各种html标签，知道每个html标签该如何使用。
　　
　　2. 对应的内容用对应的标签，如标题，就可选择<h1>~<h6>这些标签。
　　
　　二，减少重复代码，压缩css，js代码大小
　　
　　1. 你的背景图片保证不超过3个以上，你的css文件不超过2个，js文件不超过3个。而且良好的遵守web标准的一些规定，css放到head中，js文件放到</body>之前或者之后。
　　
　　三，背景图片大小及数量
　　
　　1. 图片的大小可以压缩，尽量选择比较小的图片。
　　
　　2. 可将多张图片用css精灵之城 css sprites
　　
　　四，减少http请求，合理设置缓存
　　
　　1. 合并css，js文件，减少css，js重复代码，合并图片等都是为了减少http请求，应为每次http请求的代价都是非常昂过的，所以减少http请求能有效优化访问性能。
　　
　　2. 缓存能缓存得更多，缓存得更久，也是可以大大减少http请求，就优化了访问性能。
　　
　　五，图片懒加载（lazyout images）
　　
　　六，减少cookie传输
　　
　　一方面，cookie包含在每次请求和响应中，太大的cookie会严重影响数据传输，因此哪些数据需要写入cookie需要慎重考虑，尽量减少cookie中传输的数据量。另一方面，对于某些静态资源的访问，如CSS、script等，发送cookie没有意义，可以考虑静态资源使用独立域名访问，避免请求静态资源时发送cookie，减少cookie传输次数。
　　
　　七，js中减少DOM操作，避免使用eval和 Function，减少作用域链查找（尽量把变量设为局部变量）。
　　
　　八，CDN加速
　　
　　CDN（contentdistribute network，内容分发网络）的本质仍然是一个缓存，而且将数据缓存在离用户最近的地方，使用户以最快速度获取数据。
　　
　　九，反向代理
　　
　　1. 传统代理服务器位于浏览器一侧，代理浏览器将http请求发送到互联网上，而反向代理服务器位于网站机房一侧，代理网站web服务器接收http请求。
　　
　　2 .反向代理也可以实现负载均衡的功能，而通过负载均衡构建的应用集群可以提高系统总体处理能力，进而改善网站高并发情况下的性能。

最热文章更多

推荐文章更多

阿里云代理商最高返点多少，阿里云代理商返...

云代理商返点，阿里云代理商优惠购买流程

按量付费转包年包月时下单失败如何处理？包...

预留实例券可以同时抵扣多台实例吗

阿里云能否跨账号使用预留实例券

获取更多阿里云折扣立即咨询