美文网首页
小册阅读 十六-性能优化

小册阅读 十六-性能优化

作者: Estarsyang | 来源:发表于2019-04-11 11:25 被阅读0次

    前端性能的优化,最直接的体现在用户的体验上。当用户打开一个站点时,加载时间在十几秒以上,肯定要疯了。以下是自己的见解加解读小册内容。强烈建议大家去看看这本掘金小册,点击自动跳转

    • 自己知道的性能优化。
    1. 图片处理(svg,icon等)
    2. 静态资源使用CDN
    3. 图片/视频懒加载
    4. 文件按需加载
    5. 代码/css压缩
      ...
    • 小册介绍性能优化要点
    1. 图片优化
    2. DNS预解析
    3. 节流
    4. 防抖
    5. 预加载
    6. 预渲染
    7. 懒执行
    8. 懒加载
    9. CDN

    图片处理


    • 修饰类效果不用图片,修饰类的图片可以用CSS去代替,例如 箭头,圆角,三角形等,具体做法可自行google查看以下。
    • 一些图标类型的小图片,尽量用font-icon 去表示。
    • 使用精灵图/雪碧图(Sprite),然后利用图片的定位取到对应的图。
    • 小图片使用base64转换。这个在目前vue-cli的webpack配置已经自动实现,可以进行在webpack中配置大小。
    • 商品的缩略图,尤其是移动端,直接让设计师按照提供相同大小的图片,尽量不要用css去控制图片的大小。

    静态资源CDN(内容分发网络 content delivery network)


    假设A地部署web应用,但是B地的人要去访问该站点,浏览器根据域名解析再通过DNS找到A地的服务器地址,然后去请求该站点的资源再返回B地,中间会浪费一些时间,尽管超级短。那为什么不在B地使用服务器缓存静态资源呢,这样请求的时间肯定就减少了许多。这就是CDN的一个基本原理,就是尽可能多的在用户的附近部署静态资源服务器,用户访问时就会直接访问到,自然访问速度就上来了。

    • 静态资源使用CDN缓存
    • CDN域名尽量与主站域名不同,否则会带上cookie,浪费流量

    图片懒加载


    原理
    • 将要显示的图片/视频地址先保存在对应 标签 的任一属性上,标签先给默认你地址,然后该标签在可视区域时,就替换掉默认地址。
    注意点
    • 滚动防抖
    • 判断图片/视频是否显示成功

    目前来说,大部分的开发都不会自己去实现一个,由于有很好的插件来实现。vue可以使用 vue-lazyload

    路由,文件按需加载(主要依靠webpack)


    当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。
    路由按需加载

    代码压缩,css预处理器


    如果使用脚手架搭建起来的项目,webpack已经帮我们配置好了压缩的方式引入了各种相应的loader,我们直接用就好。

    css预处理器 sass less stylus
    • 更加方便的使用css
    • 定义变量,引用,嵌套,作用域
    • 本质上还是css,注意嵌套层级,最好不超过4级。

    防抖 节流 操作锁


    • 防抖:事件一直触发,停止了才去执行相应代码。(scroll,input,change事件等)
    • 节流:事件一直触发,隔一段时间去执行一次。(input事件,change事件等)
    • 操作锁: 避免重复执行事件时,可以设置一个锁,直到返回结果才解锁,禁止多次请求。

    DNS预解析 详情请点击

    相关文章

      网友评论

          本文标题:小册阅读 十六-性能优化

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