简单优化前台工程几种方式(上篇)

作者 : 开心源码 本文共672个字,预计阅读时间需要2分钟 发布时间: 2022-05-12 共103人阅读

用CDN


假如A网站和B网站, 同时用了https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js的资源, 在访问其余网站A时, 浏览器会缓存jquery.min.js资源文件, 访问网站B时,即可以免于下载jquery.min.js的文件, 这样既节省了服务器流量, 又提升了资源加载的速度, 一举两得~

减少网络请求

  • 用雪碧图(使用Photoshop将多个icon拼接到一张图上)
  • 将多个js文件合并压缩为单个js文件(用Webpack,或者在线工具)

减少图片尺寸

可以用PP鸭一键压缩, 具体详情: PP鸭为你的图片瘦瘦瘦身 (支持快速压缩jpg, png, gif三种格式)


将图片保存为渐进式jpg

将图片保存为渐进式jpg后, 图片在浏览器显示时, 可以由模糊到清晰渐进式加载, 提升使用户体验

将javascript脚本放到html的底部

  • HTML文件是从上往下渲染的, 假如js脚本有大量耗时操作, js执行期间, 使用户是不能看到页面的

  • mdn的解释链接: https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics

一般我们会把css样式文件放在html的头部, javascript脚本文件放在页面底部, 但什么事情都有特例, 比方bootstrap的部分组件依赖jquery,也就是jquery必需在bootstrap之前引入, 假如我们要在页面头部引入bootstrp样式的话, 那jquery也必需放到了页面的头部!

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 简单优化前台工程几种方式(上篇)

发表回复