关于前端优化

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

前端优化的方法可以分为两大类：第一类是页面级别的优化如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