面试-性能优化

性能优化
简单来说,常用的优化有两部分:

第一:面向内容的优化

  1. 减少 HTTP 请求
 从设计实现层面简化页面
合理设置HTTP缓存(即能缓存越多越好,能存越久越好)
  1. 减少 DNS 查找
  2. 避免重定向
  3. 使用 Ajax 缓存
  4. 延迟载入组件
  5. 预先载入组件
  6. 减少 DOM 元素数量
  7. CDN加速的原理
        通过缓存技术,将网站文字,图片,视频等内容缓存到分布与各地的节点服务器上,使终端访问用户就近访问,从而提高访问速度。
  1. 最小化 iframe 的数量
  2. 不要出现http 404 错误

第二:面向 Server
1.cookie优化

        减少Cookie大小
        页面内容使用无Cookie域名 
  1. 针对 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); 
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,702评论 25 709
  • Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践。他们为此进行了一系列...
    拉风的老衲阅读 5,835评论 0 1
  • 六年间,从一个人,到二个人,再到三个人。 六年前,恍若昨天,那个身着绿衣的女子,笑盈盈向我走来。 是你,带来阳光,...
    lucian117阅读 1,573评论 0 2
  • 在iOS开发过程中,我们经常需要用到等同性来判断两个对象是否相等,通常我们会使用==来判断,但是这样比较出来的结果...
    飞鱼湾阅读 4,654评论 0 1
  • 所有男人在追求女人不得而之之前所有的好,全是方式方法套路和技巧,那并不是对于女人真正的呵护。 看到一条新闻,又一次...
    爱晚睡阅读 4,476评论 6 9