美文网首页Web前端之路工具癖程序员
简单优化前端工程几种方式(上篇)

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

作者: zhaoolee | 来源:发表于2018-07-20 07:03 被阅读253次

    使用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执行期间, 用户是不能看到页面的

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

    相关文章

      网友评论

      • 930798272f3e:适合新手 哈哈
      • 苏水儿:使用 cdn 的 优点 没看明白
        苏水儿:@Jacky_9b62 哦哦 明白了。1 同一个区域,用同一个cdn的会 相互拉取 2 一台电脑的浏览器,在访问不同网站时,不同网站开发都用同一cdn,那么浏览器只需缓存一次
        Jacky_9b62:@苏水儿 cdn是按从近到远的节点缓存一层一层去找的。如果cdn用的人多了,那近的节点有缓存,拉取就快了。然后又表达了用的人多了,别的网站也使用了相同的链接,那浏览器可能就有缓存了
      • d03497788d96:期待下篇。

      本文标题:简单优化前端工程几种方式(上篇)

      本文链接:https://www.haomeiwen.com/subject/gndzpftx.html