前端代码优化方法
Posted calamus
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端代码优化方法相关的知识，希望对你有一定的参考价值。
一、减少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的阻塞特性。
因为这个阻塞的特点，建议把JavaScript代码放到</body>标签以前，这样既能有效的防止JavaScript的阻塞，又能使得页面的HTML结构能更快的释放。
五、CDN加速
CDN（Content Delivery Network，内容分发网络）
其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。
不足：实时性不好
六、控制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;
}
}
以上是关于前端代码优化方法的主要内容，如果未能解决你的问题，请参考以下文章