关于前端优化

MrHaoNan 2020-05-03

优化的目的在于让页面加载的更快,对用户操作响应更及时,为用户带来更好的用户体验,对于开发者来说优化能够减少页面请求数,能够节省资源。

前端优化的方法可以分为两大类:第一类是页面级别的优化如http请求数、内联脚本的位置优化等,第二类是代码级别的优化,如JavaScript中的DOM操作优化、CSS选择符优化、图片优化及HTML结构优化等

关于前端优化

页面级别优化

  • http请求数
    • 从设计实现层面简化页面,保持页面简洁,减少资源的使用
    • 资源合并与压缩,尽可能的将外部的脚本、样式进行合并,多个合为一个
    • 雪碧图的使用
    • 使用base64表示简单的图片
  • 缓存 
    • DNS缓存
    • CDN部署与缓存
    • http缓存
  • 移动端优化
    • 使用长cache,减少重定向
    • 首屏优化,保证首屏加载数据小于14kb
    • 不滥用web字体
    • 长列表滚动优化,IOS尽量使用局部滚动,android尽量使用全局滚动。同时,需要给body添加上-webkit-overflow-scrolling: touch来优化移动段的滚动
    • 函数防抖和节流
    • 使用touch代替click
    • viewport设置
    • 开启GPU渲染加速

代码级别优化

  • 优化网页渲染
    • css文件放首部,js文件放尾部
    • 尽量避免内联样式
  • DOM操作优化
    • 要避免在document上直接进行频繁的DOM操作
    • 可以使用classname代替大量的内联样式修改
    • 适当使用canvas
    • 尽量减少css表达式的使用
  • 操作细节
    • 避免图片或者frame使用空src
    • 在css属性为0时,去掉单位
    • 对于css中可继承的属性,如font-size,尽量使用继承,少一点设置
    • 缩短css选择器,多使用伪元素等帮助定位

数据

  • 图片加载处理
    • 图片预加载
      • 提前加载内容,往往会被用在图片资源比较大的时候
    • 图片懒加载
      • 在最初给图片的src设置一个比较简单的图片,然后将图片的真实地址设置给自定义的属性,做一个占位,然后给图片设置监听事件,一旦图片到达视口范围,从图片的自定义属性中获取出真是地址,然后赋值给src,让其进行加载。
    • 首屏加载时进度条的显示
  • 异步请求的优化
    • 使用正常的json数据格式进行交互
    • 部分常用数据缓存
    • 数据埋点和统计

附:

  • 合并、压缩、混淆html/css/js文件(webpack实现,减小资源大小)
  • Nginx开启Gzip,进一步压缩资源(减小资源大小)
  • 图片资源使用CDN加速(提高加载速度)
  • 符合条件的图标做base64处理(减小资源大小)
  • 样式表放首部,JS放尾部(JS单线程,会阻塞页面;资源加载方式)
  • 设置缓存(强缓存和协商缓存,提高加载速度)
  • link或者src添加rel属性,设置prefetch或preload可预加载资源。(加载时机)
  • 如果使用了UI组件库,采用按需加载(减小资源大小)
  • SPA项目,通过import或者require做路由按需(减小资源大小)
  • 服务端渲染SSR,加快首屏渲染,利于SEO
  • 页面使用骨架屏,提高首页加载速度(提高加载速度)
  • 使用 JPEG 2000, JPEG XR, and WebP 的图片格式来代替现有的jpeg和png,当页面图片较多时,这点作用非常明显
  • 使用图片懒加载-lazyload

详细:https://www.jianshu.com/p/fe32ef31deed

相关推荐