写好js代码DOM和浏览器模式

写高效js代码的一些最佳实践:分解关注点。HTML:内容构建  CSS:样式呈现  JavaScript:行为交互。DOM操作是非常耗性能的,尽量遵循以下原则:

DOM访问遵循:①避免在循环里面访问DOM  ②把DOM元素引用赋值给一个局部变量来使用  ③使用选择器API()  ④缓存HTML元素的length

DOM操作遵循:DOM增删改操作会触发浏览器重绘(渲染)和回流(布局),尽量批量操作,构建大的DOM树,先在内存构建好了在添加。

脚本加载策略

1.script元素的位置:浏览器会一次下载多个资源,当遇到script标签时,会去下载js,解析,执行。这样会影响页面的展现,为了降低影响,最好把script标签置于</body>之前。

2.动态script元素:①使用XHR请求然后对结果进行eval()  ②H5里面可以使用defer,async  ③动态创建script标签。

3.延迟加载

 window.onload = function() {
   var script = document.createElement("script");
   script.src = "all_lazy_20160920.js";
   document.documentElement.firstChild.appendChild(script);
 };

4.按需加载

 

5.预加载

使用动态创建script标签是能够实现预加载的,但是这种方式会加载,解析,执行js脚本,影响性能。使用Image,object标签的src来只加载js,不解析也不执行。

 

本文参考《JavaScript Patterns》

javascript
作者:张雪飞
出处:https://zhangxuefei.site/p/1676
版权说明:欢迎转载,但必须注明出处,并在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

发表评论

电子邮件地址不会被公开。 必填项已用*标注