怎么实现性能优化
性能优化的最终目的是加速网页或者其他前端项目整体的渲染速度，因此，可以从一般上网的过程为主轴进行对应分析 参考从URL到最终网页的过程：
1 优化DNS查询过程
浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求。
优化方法：
- 选择更好的DNS服务器或者购买更多的DNS服务，加速DNS查询、将资源分布到恰当数量的主机名
- 配置hosts文件，
DNS缓存，省略查询过程
2 优化连接建立的过程
查询DNS对应的IP后，打开一个socket与目标IP地址端口建立TCP链接
优化方法：
合并不同类型文件的连接，复用TCP连接（keep-alive）
3 优化查询过程
得到对应请求后,服务端调用后台程序查询所需信息
优化方法： 参考常见的后端优化方案,如
- SQL查询优化
- 删除不必要的请求文件
4 优化查询传回过程
由于网速通常是不变的，因此为了加速查询传回，可以从减小数据量和增大服务器吞吐两点入手
减少数据量：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip
增大服务器吞吐：
- 使用
CDN - 配置
ETag - 对组件使用
Gzip压缩
5 优化文件加载过程
根据一般的使用习惯，先加载CSS再加载JS，在具体加载过程中
-
css方面- 将样式表放到页面顶部
- 不使用
CSS表达式 - 使用
<link>不使用@import
-
Javascript方面- 将脚本放到页面底部
- 将
javascript和css从外部引入
6 优化页面渲染过程
- 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
- 当需要设置的样式很多时设置className而不是直接操作style
- 页面懒加载
7 优化再次打开的过程
- 设置浏览器对DNS进行自动缓存
- 将资源文件加入缓存
- 前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
8 提高并发
- 通过多个域名同时请求实现多个请求的并发，减少请求次数
- 配置CDN进行加速
- 合并域名，实现cookie-free
9 其他前端代码优化
- 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作
- 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)
- 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳
- 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢
