面试题： 如何进行网站性能优化

今天刷面试题，看到一篇关于网站性能优化的文章，写的很全面，记录下来。

如何进行网站性能优化

• content 方面
  • 减少 HTTP 请求： 合并文件、CSS精灵、 inline Image
  • 减少 DNS 查询： DNS 缓存、将资源分不到恰当数量的主机名
  • 减少 DOM 元素数量
• Server 方面
  • 使用 CND
  • 配置 ETag
  • 对组件使用 Gzip 压缩
• Cookie 方面：
  • 减小 cookie 大小
• CSS 方面：
  • 将样式表放到页面顶部
  • 不是用CSS 表达式
  • 使用 <link>不使用@import
• Javascript 方面
  • 将脚本放到页面底部
  • 将 javascript 和 css 从外部引入
  • 压缩 javascript 和 css
  • 删除不需要的脚本
  • 减少DOM 操作
• 图片方面
  • 优化图片： 根据实际颜色需要选择色深、压缩
  • 优化 CSS 精灵
  • 不要在 HTML 中拉伸图片

你有用过哪些前端性能优化的方法？

• 减少 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 图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载。
• 请求带宽： 压缩文件，开启 Gzpi

前端性能优化最佳实践

• 性能评级工具（PageSpeed 或者 YSlow）
• 合理设置 HTTP 缓存： Expires 和 Cache-control
• 静态资源打包，开启Gzip 压缩，（节省响应流量）
• CSS3 模拟图像，图标Base64 (降低请求数量，如果使用阿里巴巴矢量图标库，可以使用CDN图标连接)
• 模块延迟（defer ） 加载/异步（async） 加载
• Cookie 隔离（节省请求流量）
• localStorage(本地存储)
• 使用CDN 加速（访问最近服务器）
• 启用 HTTP/2 （多路复用，并行加载）
• 前端自动化（glup/webpack）