共计 1620 个字符，预计需要花费 5 分钟才能阅读完成。
根本规定
- css 放到 <head> 中
- js 放到底部 </body> 后面
- 内联加载快
- 外置能够被复用，能够被缓存
浏览器并发数
| Browser | HTTP1.0 | HTTP1.1 |
|---|---|---|
| IE6,7 | 2 | 4 |
| IE8 | 6 | 6 |
| Firebox | 6 | 6 |
| Safari | 4 | 4 |
| Chrome | 6 | 6 |
| Opera | 4 | 4 |
图片
-
css 雪碧图
长处
- 缩小加载网页图片时对服务器的申请次数
- 能缩小图片的字节, 比多张图片字节更小。
毛病
- 保护比拟麻烦
- 自适应屏幕下，容易呈现背景断裂
- 元素的地位，须要计算
-
图片品质优化
- 如果是色彩丰盛的图片，个别抉择 jpg
- 如果是动画图片，个别抉择 gif
- 如果须要清晰图片或通明图片，个别抉择 png 并尽量应用 png 8
- 图片压缩（tinypng）
-
应用更小更快更强，新一代图片格式 WebP
WebP 是谷歌在 10 年推出一种新型图片格式，最早也是利用在谷歌产品中，谷歌公布的 Android Studio 2.3 正式版中就包含对 WebP 反对的更新，在实测中，webp 格局比 jpg 格局减小约 20%。这对优化用户体验，缩小 CDN 带宽耗费有很好的成果，但并不是所有浏览器都反对 webp，所以为了应用 webp，须要做一点兼容性的工作。 - base64：
缩小 http 申请，字节小图可应用。
- iconfont：
长处太多，实用小图标，大小色彩可变。罕用 icon 无需设计。iconfont 库资源丰盛
- 图片提早加载(懒加载)
CSS
- css 选择器：从右到左匹配
- 尽量少应用计算属性，如 calc()、expression 等
- 不要应用 @import
- 重绘和重排
重绘（repaint）、重排（reflow）
repaint：屏幕的一部分进行了重画，比方某个 css 中扭转背景色，元素尺寸没有变。
reflow：任何一个元素的尺寸产生了变动，须要从新验证并计算 render tree，就会造成重排。
常见引起重排的操作：
- js 增加或删除元素
- 元素大小产生扭转（border、padding、width）
- 浏览器窗口大小扭转
- 元素地位扭转
- 设置 style 属性
- 页面首次渲染
常见引起重绘的操作：
color、background、background-position、box-shadow、border-radius 等。
优化重排和重绘
- 缩小 DOM 操作
- 利用增加 class 批改款式
- 动画应用 CSS 动画，开启 GPU 减速
- 不要应用 table
- 能够让其脱离文档流，position:absolute,fixed
JavaScript
- 压缩、合并、混同
- 应用 async 或 defer
- 缩小全局变量应用，慎用闭包
- 应用事件委托
- 防止应用 for in 循环
- 服务器端渲染
- 缩小 DOM 操作
能够参考 —- 雅虎 35 条军规
浏览器缓存
- 浏览器缓存机制
浏览器缓存机制是指通过 HTTP 协定头里的 Cache-Control（或 Expires）和 Last-Modified（或 Etag）等字段来管制文件缓存的机制。
Cache-Control 用于管制文件在本地缓存无效时长
Last-Modified 是标识文件在服务器上的最新更新工夫。
- Web Storage
分为 sessionStorage 和 localStorage
通过存储字符串的 Key/Value，存储大小为 5MB（Cookies 4KB)
- Web SQL Database
又名 html5 本地数据库，用户能够像拜访本地文件那样轻松地对本地数据库进行间接拜访
目前根本曾经被放弃, 新一代的前端存储计划 –indexedDB
- Application Cache
离线缓存，可在没有因特网连贯时进行拜访
HTML5 的离线存储是基于一个 manifest 文件 (缓存清单文件，后缀为.appcache) 的缓存机制(不是存储技术)，通过这个文件上的清单解析离线存储资源，这些资源就会像 cookie 一样被存储了下来。之后当网络在处于离线状态时，浏览器会通过被离线存储的数据进行页面展现。
其它
- 动态文件存储到 CDN 上
- 防止重写向
- 少用 iframe，阻塞 onload，占用并发
- 降级 http 为 http2.0
下次面试官问你时，不要只说外表的那几个了~
- 浏览器缓存机制
