面试-性能优化

性能优化
简单来说，常用的优化有两部分：

第一：面向内容的优化

1. 减少 HTTP 请求

 从设计实现层面简化页面
合理设置HTTP缓存(即能缓存越多越好，能存越久越好)

2. 减少 DNS 查找
3. 避免重定向
4. 使用 Ajax 缓存
5. 延迟载入组件
6. 预先载入组件
7. 减少 DOM 元素数量
8. CDN加速的原理

        通过缓存技术，将网站文字，图片，视频等内容缓存到分布与各地的节点服务器上，使终端访问用户就近访问，从而提高访问速度。

9. 最小化 iframe 的数量
10. 不要出现http 404 错误

第二：面向 Server
1.cookie优化

        减少Cookie大小
        页面内容使用无Cookie域名 

2. 针对 Web 组件使用域名无关性的

怎样实现原生JS异步加载
默认情况javascript是同步加载的，也就是javascript的加载时阻塞的，后面的元素要等待javascript加载完毕后才能进行再加载，对于一些意义不是很大的javascript，如果放在页头会导致加载很慢的话，是会严重影响用户体验的。
有以下三种方法：
(1) defer，只支持IE

defer属性的定义和用法（我摘自w3school网站） 
defer 属性规定是否对脚本执行进行延迟，直到页面加载为止。 
有的 javascript 脚本 document.write 方法来创建当前的文档内容，其他脚本就不一定是了。 

如果您的脚本不会改变文档的内容，可将 defer 属性加入到 <script> 标签中，以便加快处理文档的速度。
因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本，它将推迟对脚本的解释，直到文档已经显示给用户为止。 

示例：

代码如下:

<script type="text/javascript" defer="defer"> 
alert(document.getElementById("p1").firstChild.nodeValue); 
</script> 

(2) async：

async的定义和用法(是HTML5的属性) 
async 属性规定一旦脚本可用，则会异步执行。 

示例：

代码如下:

<script type="text/javascript" src="demo_async.js" async="async"></script> 

注释：async 属性仅适用于外部脚本（只有在使用 src 属性时）。 
注释：有多种执行外部脚本的方法： 
•如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行） 
•如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行 
•如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本 

(3) 创建script，插入到DOM中，加载完毕后callBack，见代码：
代码如下:

function loadScript(url, callback){ 
  var script = document.createElement_x("script") 
  script.type = "text/javascript"; 
  if (script.readyState){ //IE 
    script.onreadystatechange = function(){ 
      if (script.readyState == "loaded" || script.readyState == "complete"){ 
        script.onreadystatechange = null; 
        callback(); 
      } 
    }; 
  } else { //Others: Firefox, Safari, Chrome, and Opera script.onload = function(){ 
    callback(); 
  }; 
} 
script.src = url; 
document.body.appendChild(script);