前端面试指南性能优化篇

谈谈性能优化问题

代码层面：避免使用 css 表达式，避免使用高级选择器，通配选择器。

缓存利用：缓存 Ajax，使用 CDN，添加 Expires 头，服务端配置 Etag，减少 DNS 查找等

请求数量：合并样式和脚本，使用 css 图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载。

请求带宽：压缩文件，开启 GZIP，

---

代码层面的优化？

用 hash-table 来优化查找

少用全局变量

用 innerHTML 代替 DOM 操作，减少 DOM 操作次数，优化 javascript性能

用 setTimeout 来避免页面失去响应

缓存 DOM 节点查找的结果

避免全局查询

避免使用 with (with会创建自己的作用域，会增加作用域链长度)

多个变量声明合并

避免图片和 iFrame 等的空 Src。空 Src 会重新加载当前页面，影响速度和效率

尽量避免写在 HTML 标签中写 Style 属性

---

移动端性能优化

尽量使用 css3 动画，开启硬件加速。

适当使用 touch 事件代替 click 事件。

避免使用 css3 渐变阴影效果。

可以用 transform: translateZ(0) 来开启硬件加速。

不滥用 Float。Float 在渲染时计算量比较大，尽量减少使用

不滥用 Web 字体。Web 字体需要下载，解析，重绘当前页面，尽量减少使用。

合理使用 requestAnimationFrame 动画代替 setTimeout

CSS 中的属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）会触发 GPU 渲染，请合理使用。过渡使用会引发手机过耗电增加

PC 端的在移动端同样适用

---

什么是渐进增强？

渐进增强是指在 web 设计时强调可访问性、语义化 HTML 标签、外部样式表和脚本。保证所有人都能访问页面的基本内容和功能，同时为高级浏览器和高带宽用户提供更好的用户体验。

核心原则如下:

1.所有浏览器都必须能访问基本内容
2.所有浏览器都必须能使用基本功能
3.所有内容都包含在语义化标签中
4.通过外部CSS提供增强的布局
5.通过非侵入式、外部javascript提供增强功能
6.end-user web browser preferences are respected

---

什么是 web 语义化？有什么好处？

web 语义化是指通过 HTML 标记表示页面包含的信息，包含了 HTML 标签的语义化和 CSS 命名的语义化。

HTML 标签的语义化是指：通过使用包含语义的标签（如h1-h6）恰当地表示文档结构 。

CSS 命名的语义化是指：为 HTML 标签添加有意义的class，id 补充未表达的语义。

为什么需要语义化？

1.去掉样式后页面呈现清晰的结构
2.盲人使用读屏器更好地阅读
3.搜索引擎更好地理解页面，有利于收录
4.便团队项目的可持续运作及维护