网站性能优化
1、content 方面
减少 HTTP 请求:合并文件 、 CSS 精灵 、 inline Image
减少DNS查询: DNS缓存、将资源分布到恰当数量的主机名
减少 DOM 元素数量
2、Server 方面
使用 CDN 配置 ETag
对组件使用 Gzip 压缩
3、Cookie 方面
减小 cookie 大小
4、css 方面
将样式表放到页面顶部
不使用 CSS 表达式
使用 <link> 不使用 @import
5、Javascript 方面
将脚本放到页面底部
将 javascript 和 css 从外部引入
压缩 javascript 和 css 删除不需要的脚本
减少 DOM 访问
6、图片方面
优化图片:根据实际颜色需要选择色深 、压缩
优化 css 精灵
不要在 HTML 中拉伸图片
渲染优化
禁止使用 iframe ( 阻塞父文档 onload 事件)
iframe 会阻塞主页面的 Onload 事件 搜索引擎的检索程序无法解读这种页面，不利于SEO iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并 行加载 使用 iframe 之前需要考虑这两个缺点 。如果需要使用 iframe ，最好是通过 javascript 动态给 iframe 添加 src 属性值， 这样可以绕开以上两个问题
禁止使用 gif 图片实现 loading 效果 ( 降低 CPU 消耗，提升渲染性能)
使用 CSS3 代码代替 JS 动画 (尽可能避免重绘重排以及回流)
对于一些小图标， 可以使用base64位编码， 以减少网络请求 。但不建议大图使用， 比较耗费 CPU
小图标优势在于
- 减少 HTTP 请求
- 避免文件跨域
- 修改及时生效
页面头部的 <style></style> <script></script> 会阻塞页面;( 因为 Renderer 进程中 JS 线程和渲染线程是互斥的)
页面中空的 href 和 src 会阻塞页面其他资源的加载 (阻塞下载进程)
网页 gzip ， CDN 托管， data 缓存 ， 图片服务器
前端模板 1S+数据，减少由于 HTML 标签导致的带宽浪费， 前端用变量保存请求结果，每次操作本地变量，不用请求，减少请求次数
用 innerHTML 代替 DOM 操作，减少 DOM 操作次数，优化 javascript 性能
当需要设置的样式很多时设置 className 而不是直接操作 style
少用全局变量 、缓存 DOM 节点查找的结果 。减少 IO 读取操作
图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳
对普通的网站有一个统一的思路，就是尽量向前端优化 、减少数据库操作 、减少磁盘 IO
网页验证码
网页验证码是什么， 是为了解决什么安全问题？
区分用户是计算机还是人的公共全自动程序 。可以防止恶意破解密码 、刷票 、论坛灌水 有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试
渐进增强和优雅降级
渐进增强和优雅降级之间的不同吗？
渐进增强（progressive enhancement）：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果 、交互等改进和追加功能达到更好的用户体验。
优雅降级 （graceful degradation）：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别: 优雅降级是从复杂的现状开始， 并试图减少用户体验的供给， 而渐进增强则是从一个非常基础的， 能够起作用的版本开始， 并不断扩充，以适应未来环境的需要 。 降级 (功能衰减) 意味着往回看； 而渐进增强则意味着朝前看， 同时保证其根基处于安全地带。
为什么利用多个域名来存储网站资源会更有效?
CDN 缓存更方便 突破浏览器并发限制 节约 cookie 带宽 节约主域名的连接数，优化页面响应速度 防止不必要的安全问题
优化性能，从用户刷新网页开始 一次js请求一般情况下有哪些地方会有缓存处理?
dns 缓存， cdn 缓存， 浏览器缓存， 服务器缓存
CSS在性能优化方面的实践
css 压缩与合并 、 Gzip 压缩 css 文件放在 head 里 、不要用 @import 尽量用缩写 、避免用滤镜 、合理使用选择器
如何使用CSS实现硬件加速?
硬件加速是指通过创建独立的复合图层，让GPU来渲染这个图层，从而提高性能
一般触发硬件加速的 CSS 属性有 transform 、 opacity 、 filter ， 为了避免2D动画在开始和结束的时候的 repaint 操作，一 般使用 tranform:translateZ(0)
持续学习总结记录中，回顾一下上面的内容： 性能优化、渲染优化、网页验证码、渐进增强和优雅降级、为什么利用多个域名来存储网站资源会更有效?从用户刷新网页开始一次js请求一般情况下有哪些地方会有缓存处理?如何使用CSS实现硬件加速?
