完成一个页面请求的流程：
输入地址--> 域名解析--> 发送请求--> 后端代码运行--> 响应请求,浏览器拿到 html 代码--> 浏览器开始渲染页面,并请求页面中的资源（css、JS、img等）--> 渲染完成
每个阶段的性能优化：
传输阶段优化：代码压缩、图片压缩、建立长连接等
后台代码优化：后台逻辑优化、前后台合理分配功能等
sql查询优化：优化数据库、优化查询语句等
响应优化：缓存、CDN加速等
渲染阶段的优化：分三个模块考虑 HTML、CSS、JavaScript（前端优化重点）
HTML代码优化：
避免使用frame、iframe（页面加载阻塞、onload事件阻塞等）
避免空标签、空连接 src 、href 等（即使是空地址，浏览器也会添加默认地址发送请求）
减少节点深层次嵌套（占用内存多、节点查询费劲）
减少HTML文档大小（1、减少注释空格 2、避免table布局（节点太多） 3、使用html布局，节点少）
显示指定文档字符集（若不写，浏览器会先缓存代码，再去查询合适的解析字符集。为避免机器查询消耗，需手动明确指定好）
设置图片宽高（避免回溯重构）
避免js脚本阻塞（放底部、异步加载、延迟加载、使用模块管理插件 require.js、sea.js）
CSS代码优化：
避免使用@import
优化选择器，知道选择器的执行顺序
避免使用CSS表达式（计算频繁，消耗大）缩放、滚动、乃至鼠标移动都有可能执行一次计算
了解选择器的规则，从右往左查询
避免单规则的属性选择器(.selected [href=”#index”] {color: red;})
避免正则选择器
移除无匹配的样式（1、缩小文件体积 2、减少索引项、提高查询速度）
JS代码优化：
使用事件委托、减少事件句柄
减少DOM操作、碎片，插入一次完成
减少用JS修改页面布局
缓存查询节点（var cached = jQuery('#top'); cached.find('p.classA'); cached.find('p.classB');）
减少频繁的IO操作，合理利用cookie、localStorage、sessionStorage 等
使用微类库、或者原生JS解决问题
其他优化方法（与上面有重复）：
1、图片优化、压缩图片、改变图片格式类型、响应式图片（网站中最耗资源的部分）
2、用户感知性能，（预加载、减少内容、延迟加载、改变图片格式（对网站有针对性） 心理学优化）
即使网站真的很慢，只要不让用户觉的慢就可以。好的技术是为了更好的服务用户，所以要注重用户体验反馈。
3、恰当的文件格式，渐进式渲染功能
4、使用http/2.0(异步和连接复用、头压缩、请求反馈管线化、优雅降级HTTP1.0)
将优化考虑至网络层（1、减少了对程序员的干扰、2、效果显著）
google chrome、Mozilla Firefox 、Microsoft Edge 、Opera 都已支持HTTP/2.0
Internet Explorer 从IE11开始支持，但仅限于windows 10 beta
5、使用web性能工具检测， Google PageSpeed 、 云智慧监控宝 （检测完针对性修改）
6、重视CSS对性能的影响，删除无用的规则、内联关键CSS、避免@imports和Base64,
使用高性价比属性：比如opcity 代替 rgba()、避免重复性工作、甚至避免更换开发人员
7、整体优化意识，而不是单独的某个模块优化，有可能抓了芝麻丢了西瓜
8、网站若使用大量API,登录、支付、定位等等，一定要监控API,不但可以及时发现错误，而且可以关联考虑优化
9、为了性能，减少不必要的炫酷
10、构建自动化优化任务
常见错误的优化方向
1、无限使用render-blocking（不懂...）
2、盲目添加框架以获取很小的功能，而大大增加了web页面的大小，做完后再去搞优化，得不偿失
3、未优化图片、未打开Gzip
4、过分关注技术指标（页面大小、请求数量等）而忽略了用户体验指标
5、为追求差异，使用不常用的字体
6、框架的滥用，综合考虑是不是真的需要框架？框架是为了更好的服务用户，而不是而不是更好的服务开发人员
内容收集整理与网络，欢迎补充、指正...
参考链接：