简单优化前台工程几种方式（上篇）

用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也必需放到了页面的头部!