UDN-企业互联网技术人气社区

板块导航

浏览  : 645
回复  : 2

[原生js] 面试-性能优化

[复制链接]
葡萄柚的头像 楼主
发表于 2017-1-5 15:46:35 | 显示全部楼层 |阅读模式
  简单来说,常用的优化有两部分:

  第一:面向内容的优化

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

  第二:面向 Server

 1.cookie优化

  • 减少Cookie大小
  • 页面内容使用无Cookie域名
  • 针对 Web 组件使用域名无关性的

  怎样实现原生JS异步加载

  默认情况JavaScript是同步加载的,也就是JavaScript的加载时阻塞的,后面的元素要等待JavaScript加载完毕后才能进行再加载,对于一些意义不是很大的JavaScript,如果放在页头会导致加载很慢的话,是会严重影响用户体验的。

  有以下三种方法:

  (1) defer,只支持IE

  • defer属性的定义和用法(我摘自w3school网站)
  • defer 属性规定是否对脚本执行进行延迟,直到页面加载为止。

  有的 JavaScript 脚本 document.write 方法来创建当前的文档内容,其他脚本就不一定是了。

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

  示例:

  代码如下:
  1. <script type="text/JavaScript" defer="defer">
  2. alert(document.getElementById("p1").firstChild.nodeValue);
  3. </script>
复制代码

  (2) async:

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

  示例:

  代码如下:
  1. <script type="text/JavaScript" src="demo_async.js" async="async"></script>

  2. 注释:async 属性仅适用于外部脚本(只有在使用 src 属性时)。
  3. 注释:有多种执行外部脚本的方法:
  4. •如果 async="async":脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行)
  5. •如果不使用 async 且 defer="defer":脚本将在页面完成解析时执行
  6. •如果既不使用 async 也不使用 defer:在浏览器继续解析页面之前,立即读取并执行脚本
复制代码

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

  代码如下:
  1. function loadScript(url, callback){
  2.   var script = document.createElement_x("script")
  3.   script.type = "text/JavaScript";
  4.   if (script.readyState){ //IE
  5.     script.onreadystatechange = function(){
  6.       if (script.readyState == "loaded" || script.readyState == "complete"){
  7.         script.onreadystatechange = null;
  8.         callback();
  9.       }
  10.     };
  11.   } else { //Others: Firefox, Safari, Chrome, and Opera script.onload = function(){
  12.     callback();
  13.   };
  14. }
  15. script.src = url;
  16. document.body.appendChild(script);
复制代码

相关帖子

发表于 2017-1-5 15:47:10 来自手机 | 显示全部楼层
OMG!介是啥东东
使用道具 举报

回复

发表于 2017-1-5 15:47:10 | 显示全部楼层
还是挺有借鉴意义的
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部