机能优化

怎样举行网站机能优化

• content方面

  • 削减HTTP要求：兼并文件、CSS精灵、inline Image
  • 削减DNS查询：DNS查询完成之前浏览器不能从这个主机下载任何任何文件。要领：DNS缓存、将资本散布到适当数量的主机名，均衡并行下载和DNS查询
  • 防止重定向：过剩的中心接见
  • 使Ajax可缓存
  • 非必需组件耽误加载
  • 将来所需组件预加载
  • 削减DOM元素数量
  • 将资本放到差别的域下：浏览器同时从一个域下载资本的数量有限，增添域能够进步并行下载量
  • 削减iframe数量
  • 不要404

• Server方面

  • 运用CDN
  • 增加Expires或许Cache-Control相应头
  • 对组件运用Gzip紧缩
  • 设置ETag
  • Flush Buffer Early
  • Ajax运用GET举行要求
  • 防止空src的img标签

• Cookie方面

  • 减小cookie大小
  • 引入资本的域名不要包括cookie

• css方面

  • 将款式表放到页面顶部
  • 不运用CSS表达式
  • 不运用IE的Filter

• Javascript方面

  • 将剧本放到页面底部
  • 将javascript和css从外部引入
  • 紧缩javascript和css
  • 删除不须要的剧本
  • 削减DOM接见
  • 合理设想事宜监听器

• 图片方面

  • 优化图片：依据现实色彩须要挑选色深、紧缩
  • 优化css精灵
  • 不要在HTML中拉伸图片
  • 保证favicon.ico小而且可缓存

• 挪动方面

  • 保证组件小于25k
  • Pack Components into a Multipart Document

你有用过哪些前端机能优化的要领？

• 削减http要求次数：CSS Sprites, JS、CSS源码紧缩、图片大小掌握适宜；网页Gzip，CDN托管，data缓存 ，图片服务器。
• 前端模板 JS+数据，削减因为HTML标签致使的带宽糟蹋，前端用变量保留AJAX要求效果，每次操纵当地变量，不必要求，削减要求次数
• 用innerHTML替代DOM操纵，削减DOM操纵次数，优化javascript机能。
• 当须要设置的款式很多时设置className而不是直接操纵style
• 罕用全局变量、缓存DOM节点查找的效果。削减IO读取操纵
• 防止运用CSS Expression（css表达式)又称Dynamic properties(动态属性)
• 图片预加载，将款式表放在顶部，将剧本放在底部 加上时候戳
• 防止在页面的主体规划中运用table，table要等个中的内容完整下载以后才会显现出来，显现比div+css规划慢

谈谈机能优化题目

• 代码层面：防止运用css表达式，防止运用高等挑选器，通配挑选器
• 缓存应用：缓存Ajax，运用CDN，运用外部js和css文件以便缓存，增加Expires头，服务端设置Etag，削减DNS查找等
• 要求数量：兼并款式和剧本，运用css图片精灵，初始首屏以外的图片资本按需加载，静态资本耽误加载
• 要求带宽：紧缩文件，开启GZIP

代码层面的优化

• 用hash-table来优化查找
• 罕用全局变量
• 用innerHTML替代DOM操纵，削减DOM操纵次数，优化javascript机能
• 用setTimeout来防止页面落空相应
• 缓存DOM节点查找的效果
• 防止运用CSS Expression
• 防止全局查询
• 防止运用with(with会建立本身的作用域，会增添作用域链长度)
• 多个变量声明兼并
• 防止图片和iFrame等的空Src。空Src会从新加载当前页面，影响速率和效力
• 只管防止写在HTML标签中写Style属性

前端机能优化最好实践？

• 机能评级东西（PageSpeed 或 YSlow）
• 合理设置 HTTP 缓存：Expires 与 Cache-control
• 静态资本打包，开启 Gzip 紧缩（节约相应流量）
• CSS3 模仿图象，图标base64（下降要求数）
• 模块耽误(defer)加载/异步(async)加载
• Cookie 断绝（节约要求流量）
• localStorage（当地存储）
• 运用 CDN 加快（接见近来服务器）
• 启用 HTTP/2（多路复用，并行加载）
• 前端自动化（gulp/webpack）