一、移动端适配

（1）通过媒体查询的方式即 CSS3 的 meida queries：
media query 可以做到设备像素比的判断，方法简单，成本低，特别是对移动和 PC 维护同一套代码的时候。目前像 Bootstrap 等框架使用这种方式布局
常见的媒体查询尺寸：

1
2
3
4
@media screen and (min-width:1200px)
@media screen and (min-width:992px)
@media screen and (min-width:768px)
@media screen and (min-width:480px)

在设置时，需要注意先后顺序，不然后面的会覆盖前面的样式。

（2）以天猫首页为代表的 flex 弹性布局
以天猫的实现方式进行说明：
它的 viewport 是固定的：<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> 高度定死，宽度自适应，元素都采用 px 做单位。随着屏幕宽度变化，页面也会跟着变化，效果就和 PC 页面的流体布局差不多，在哪个宽度需要调整的时候使用响应式布局调调就行（比如网易新闻），这样就实现了『适配』。

（3）以淘宝首页为代表的 rem+viewport 缩放
这也是淘宝使用的方案，根据屏幕宽度设定 rem 值，需要适配的元素都使用 rem 为单位，不需要适配的元素还是使用 px 为单位。（1em = 16px）
[实现原理]
根据 rem 将页面放大 dpr 倍, 然后 viewport 设置为 1/dpr.如 iphone6 plus 的 dpr 为 3, 则页面整体放大 3 倍, 1px(css 单位)在 plus 下默认为 3px(物理像素) 。然后 viewport 设置为 1/3, 这样页面整体缩回原始大小. 从而实现高清。

1
2
3
4
5
6
7
8
<meta name = "viewport" content = "width = device-width,initial-scale = 1.0,user-scalable = no">
<script type = "text/javascript">
	var width = document.documentElement.clientWidth;
	var targetW = 320;
	var scale = width/targetW;
	var metaN = document.querySelector('meta[name="viewport"]');
	metaN.setAttribute('content','initial-scale' + width);
</script>

（4）rem 方式
比如说“魅族”移动端的实现方式，viewport 也是固定的：

1
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">。

通过代码来控制 rem 基准值(设计稿以 720px 宽度量取实际尺寸)

1
2
3
4
5
6
(function() {
  var width = document.documentElement.clientWidth;
  var styleN = document.createElement("style");
  styleN.innerHTML = "html{font-size:" + width + "px;}";
  document.head.appendChild(styleN);
})();

二、响应式布局与自适应布局

响应式布局等于流动网格布局，而自适应布局等于使用固定分割点来进行布局。响应式布局就是实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。换句话说就是一个网站能够兼容多个终端，而不是为了每一个终端做一个特定的版本。
自适应布局就是指能忘了使网页自适应的显示在不同大小终端设备上的新网页设计方式及技术，它需要开发多套界面来适应不同的终端。
区别：
自适应布局通过检测视口分辨率，来判断当前访问的设备是：pc 端、平板、手机，从而请求服务层，返回不同的页面；响应式布局通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容。
总之，响应式布局还是要比自适应布局要好一点，但是自适应布局更加贴切实际，因为你只需要考虑几种状态就可以了而不是像响应式布局需要考虑非常多状态。所以的说无论哪种设计都有它们各自的特点，我们要根据项目的需求来选择适合的布局方式。

三、前端性能优化方案总结（划重点）

1、加载资源优化

  • 减少 http 请求
    静态资源压缩——（js、css、sprites）
    使用离线缓存——（把常用的变动又少的 js、css、图片存储到 localstorage，第二次访问的时候直接走本地缓存。在移动端使用广泛）
    使用浏览器缓存
  • 加载
    懒加载——（图片懒加载、数据懒加载、功能懒加载）
    预加载——在某个功能还没展现时，在空闲时间预先加载相关图片或者 js 代码
    异步加载——async、defer
    css、js 放置位置
  • 域名、cdn
    静态资源使用多个域名——（对于图片、CSS、JS，可使用几个域名，可以并发加载。）
    使用 CDN——（资源加速）
  • 服务器
    Gzip 压缩文件内容
    SSR 服务器渲染

2、操作优化

  • js+css+html
    DOM 操作优化——（缓存已经访问过的有关元素、避免使用 JavaScript 来修改页面布局）
    避免使用 CSS 表达式（Expression）
    用 link 代替@import
    使用外部 JavaScript 和 CSS——（这样可以使用缓存）
    不要在 HTML 中缩放图像——（不要为了在 HTML 中设置长宽而使用比实际需要大的图片。）
  • 算法
    优化算法——（优化查找、排序算法。尽量少使用嵌套循环、使用事件代理）
  • 网络请求
    使 iframe 的数量最小
    简单请求使用 GET 方式
    减小 Cookie 体积
四、雅虎性能优化军规

前端性能优化良好实践：雅虎军规
原文地址：前端性能优化之雅虎 35 条军规-掘金

内容部分

  • 减少 http 请求数（合并文件、雪碧图、base64 图片）
  • 减少 dns 查找
  • 避免重定向【牢记重定向会拖慢用户体验，在用户和 HTML 文档之间插入重定向会延迟页面上的所有东西，页面无法渲染，组件也无法开始下载，直到 HTML 文档被送达浏览器。有一种常见的极其浪费资源的重定向，而且 web 开发人员一般都意识不到这一点，就是 URL 尾部缺少一个斜线的时候。例如，跳转到http://astrology.yahoo.com/astrology会返回一个重定向到http://astrology.yahoo.com/astrology/的301响应（注意添在尾部的斜线）。在Apache中可以用Alias，mod_rewrite或者DirectorySlash指令来取消不必要的重定向。】
  • ajax 缓存【如果用户从上一次使用之后再没有修改过她的通讯录，而且 Ajax 响应是可缓存的，有尚未过期的 Expires 或者 Cache-Control HTTP 头，那么之前的通讯录就可以从缓存中读出。必须通知浏览器，应该继续使用之前缓存的通讯录响应，还是去请求一个新的。】
  • 延迟加载组件
  • 预加载组件
  • 减少 DOM 元素数量
  • 跨域分离组件【分离组件可以最大化并行下载，但要确保只用不超过 2-4 个域，因为存在 DNS 查找的代价。】

css 部分

  • 避免使用 css 表达式【如 background-color: expression( (new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00” );】
  • 选择 link 而不是 import
  • 避免使用滤镜
  • 样式表置顶

js 部分

  • 去除重复脚本
  • 尽量减少 dom 访问（缓存节点、离线更新、不用 js 修复布局）
  • 用智能的事件处理器（事件委托绑定事件）
  • 脚本置底

javascript, css

  • 把 JavaScript 和 css 放到页面之外（充分利用缓存）
  • 压缩 JavaScript 和 css（混淆是一种可选的源码优化措施，要比压缩更复杂，所以混淆过程也更容易产生 bug）

图片

  • 优化图片、压缩图片
  • 优化 css sprite
  • 不用要 html 压缩图片（不要因为在 HTML 中可以设置宽高而使用本不需要的大图）
  • 用小的可缓存的的 favicon.ico

cookie

  • 减少 cookie 的体积
  • 把组件放在不含 cokie 的域下【当浏览器发送对静态图像的请求时，cookie 也会一起发送，而服务器根本不需要这些 cookie。所以它们只会造成没有意义的网络- 通信量，应该确保对静态组件的请求不含 cookie。可以创建一个子域，把所有的静态组件都部署在那儿。】

移动端

  • 保证所有的组件都小于 25k
  • 把组件打包到复合文档
  • 服务器
  • gzip 压缩
  • 避免图片 src 属性为空（浏览器会向服务器发送另一个请求）
  • 配置 etag
  • 对 ajax 用 get 请求（浏览器的 POST 请求是通过一个两步的过程来实现的：先发送- HTTP 头，在发送数据）
  • 尽早清空缓存区
  • 使用 cdn 内容分发网络
  • 添上 Expires 或者 Cache-Control HTTP 头

实战优化总结：

  1. 用 translate 替代 top 属性（top 会触发 layout，但 translate 不会）
  2. 用 opacity 代替 visibility（opacity 不会触发重绘也不会触发回流，只是改变图层 3. alpha 值，但是必须要将这个图片独立出一个图层，visibility 会触发重绘）
  3. 不要一条一条的修改 DOM 的样式，预先定义好 class，然后修改 DOM 的 className
  4. 把 DOM 离线后修改，比如：先把 DOM 给 display:none（有一次 reflow），然后你修改 100 次，然后再把它显示出来
  5. 不要把 DOM 节点的属性值放在一个循环里当成循环的变量（先用变量存储下来）
  6. 不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局
  7. 动画实现的速度的选择（根据 performance 量化性能优化）
  8. 对于动画新建图层（启用 gpu 硬件加速(并行运算)