网站性能优化有哪些措施.md

网站性能优化有哪些措施

• 网络层
  • 减少http请求
    • 合并JS文件
    • 合并CSS文件
      • 合并JS和CSS可以用webpack的打包工具进行打包
      • webpack把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件。
      • 
      • 类似的工具还有glup
    • 使用雪碧图，有专门的制作工具
      • 意思就是把小图片合并成一张大图，然后显示某个部分小图
  • 减小资源体积
    • gzip压缩
      • 将HTML中重复的部分进行打包，多次服用
    • js混淆
      • 移除代码空白（空格，缩进等
      • 丑化（重命名局部变量）
      • 在相同语义的情况下压缩代码，比如去掉末尾分号，常量替换
    • css压缩
    • 图片压缩
  • 缓存
    • DNS缓存
    • CDN部署与缓存
      • CDN，Content Delivery Network，内容分发网络
      • 客户端浏览器先检查是否有本地缓存是否过期，如果过期，则向CDN边缘节点发起请求，CDN边缘节点会检测用户请求数据的缓存是否过期，如果没有过期，则直接响应用户请求，此时一个完成http请求结束;如果数据已经过期，那么CDN还需要向源站发出回源请求(back to the source request),来拉取最新的数据。
      • http缓存
  • 移动端优化
    • 长cache，减少重定向
    • 首屏优化
• 渲染和DOM操作方面
  • 在网页初步加载时，获取到HTML文件之后，最初的工作是构建DOM和构建CSSOM两个树，之后将他们合并形成渲染树
  • 优化网页渲染
    • CSS的文件放在头部，JS文件放在尾部或者异步
      • CSS文件放在头部加载，将会保证解析DOM的同时，解析CSS文件。
        • 因为CSS会阻塞整个DOM的渲染，然而DOM解析会正常进行，所以csss文件放在头部进行解析，可以加快网页的构建速度
      • JS放在尾部或者异步
        • 将js文件放在尾部或者异步加载的原因是JS（外链或内联）会阻塞后续DOM的解析，后续DOM的渲染也将被阻塞
    • 尽量避免内联样式
      • 如果内联样式太大就会增大HTML的体积。我们一般只有在样式的体积很小的时候才考虑内联样式
  • DOM操作优化
    • 避免在document上直接进行频繁的DOM操作
    • 使用classname代替大量的内联样式修改
    • 对于复杂的UI元素，设置position为absolute或fixed
      • 123点都是为了减少浏览器的回流和重绘，因为进行一次DOM操作的代价非常的大
    • 尽量使用css动画而不是JS动画
    • 使用requestAnimationFrame代替setInterval操作
    • 适当使用canvas
    • 尽量减少css表达式的使用
    • 使用事件代理
      • 为什么给每个子标签添加监听函数会导致性能差
        • 每个函数都是对象，都会占用内存；内存中的对象越多，性能就越差。
      • 必须事先指定所有事件处理程序而导致的DOM访问次数，会延迟整个页面的交互就绪时间。
      • 使用事件代理的好处
        • 我们一般把事件冒泡到document，document对象很快就可以访问，而且可以在页面生命周期的任何时间点上为它添加事件处理程序(无需等待DOMContentLoaded或load事件)。换句话说，只要可单击的元素呈现在页面上，就可以立即具备适当的功能。
        • 页面中设置事件处理程序所需的时间更少。只添加一个事件处理程序所需的Dom引用更少，所花的时间也更少。
        • 页面占用的内存空间更少，能够提升整体性能。
• 数据方面优化
  • 图片加载处理
    • 图片预加载：提前加载内容
    • 图片懒加载：
      • 在最初给图片的src设置一个比较简单的图片，然后将图片的真实地址设置给自定义的属性，然后给图片设置监听事件，一旦图片到达视口范围，从图片的自定义属性中获取出真是地址，然后赋值给src，让其进行加载。
  • 异步请求的优化
    • 使用JSON
    • 常用数据缓存
    • 数据埋点和统计
      • 这个好像不是优化啊..就是做好数据统计，意思就是在网页上的某些特殊标签上监听事件，来监听/统计用户行为
    • webWorker
      • web worker 是运行在后台的 JavaScript，不会影响页面的性能。（HTML5的新特性）
      • 或者可以理解为我们在浏览器后台开启个新的js线程，使得浏览器中的Js有了多线程的能力
      • http://www.w3school.com.cn/html5/html_5_webworkers.asp