前端优化代码主要的⼏种⽅式！
⼀、减少HTTP请求
1.合并CSS、js：每次调⽤js、css都要发送⼀次http请求，所以并不是分开写好⼏个⽂件⽐较好
js、css压缩。js压缩可以⽤grunt
HTML优化：
使⽤语义化标签
减少iframe：iframe是SEO的⼤忌，iframe有好处也有弊端
避免重定向
CSS优化：
删除空样式
不滥⽤浮动，字体，需要加载的⽹络字体根据⽹站需求再添加
选择器性能优化
避免使⽤表达式，避免⽤id写样式
js优化：
压缩
减少重复代码
2.图⽚优化
图⽚合并，CSS sprite技术
不要在html中使⽤缩放图⽚
⽤更⼩的并且可缓存的 favicon.ico
缩⼩图⽚分辨率；
改变图⽚格式，推荐PNG格式；
降低图⽚保存质量。
⼆、减少DOM操作
减少对DOM元素的查询和修改，jquery也是有弊端的
⽅法：
缓存已经访问过的元素
"离线"更新节点, 再将它们添加到树中
避免使⽤ JavaScript 输出页⾯布局--应该是 CSS 的事⼉
三、使⽤JSON格式来进⾏数据交换
JSON是⼀种轻量级的数据交换格式，采⽤完全独⽴于语⾔的⽂本格式，是理想的数据交换格式。同时，JSON是 JavaScript原⽣格式，这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或⼯具包。
  与XML序列化相⽐，JSON序列化后产⽣的数据⼀般要⽐XML序列化后数据体积⼩
注意json的格式⼀定要严格符合标准
四、js、css⽂件的加载顺序
css放在<head>⾥，
js放在<body>结束前：浏览器在执⾏JavaScript代码时，不能同时做其它事情，即<script>每次出现都会让页⾯等待脚本的解析和执⾏（不论JavaScript是内嵌的还是外链的），JavaScript代码执⾏完成后，才继续渲染页⾯。这个也就是JavaScript的阻塞特性。
nginx部署前端项目  因为这个阻塞的特点，建议把JavaScript代码放到</body>标签以前，这样既能有效的防⽌JavaScript的阻塞，⼜能使得页⾯的HTML结构能更快的释放。
五、控制cookie⼤⼩和污染、session不要存⼊⼤数据
Cookie是本地的磁盘⽂件，每次浏览器都会去读取相应的Cookie
使⽤Cookie跨域操作时注意在适应级别的域名上设置coockie以便使⼦域名不受其影响
针对 Web 组件使⽤域名⽆关性的 Cookie
设置合理的⽣命周期，清除时期
session是存在服务器的，所以如果存⼊⼤量的数据会给服务器带来很⼤的压⼒
六、添加 Expires 或 Cache-Control 信息头 (Add an Expires or a Cache-Control Header)
各个浏览器都有针对的⽅案, Apache 例⼦【注意：下⾯的说明例⼦还不够精细，具体的环境上还要加⼀些调整】: ExpiresActive On
ExpiresByType image/gif "modification plus 1 weeks"Lighttpd 启⽤ mod_expire 模块后：
$HTTP["url"] =~ "\.(jpg|gif|png)___FCKpd___1quot; {
expire.url = ( "" => "access 1 years" )
}Nginx 例⼦参考:
location ~* \.(jpg|gif|png)$ {
if (-f $request_filename) {
expires      max;
break;
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。