高性能Java script(加载脚本)

一、脚本的加载优化

脚本在加载时的堵塞问题

正常来说，浏览器在下载脚本时，会停止一切工作去下载脚本内容

如果将脚本放在文档的第一位加载，那么堵塞问题将表现为整个页面都是空白且无法操作

分析问题:

堵塞问题表现为页面不完整，体验降低，无法操作，或为空白页面

无论何时浏览器遇到脚本标签就会同步的运行脚本，无论是文档内还是外链脚本

有时候为了确保过得准确的样式和元素结构，一般将操作dom的脚本紧跟在link后面，所以页面要等待link和script完全加载完成。

所以我们要解决脚本的同步问题

解决办法:

PL A.html5脚本标签的新属性defer和async

async是加载完毕就执行

defer是等待页面加载完成(onload)后才会执行

两者都是异步加载文件，并且不一定能保证文件是按顺序执行。(引起依赖管理的问题)

PL B.动态加载脚本标签

利用dom的api动态的创建脚本标签元素，添加到dom树中，此时不会影响页面的运行并且可以自己设置脚本的执行时机。非常通用的一个办法，实现了无减少堵塞

PL C.XHR请求脚本

此方法牵扯跨域问题，根据浏览器的同源策略只能请求相同域的脚本。将请求到的回应内容设置为脚本的内容。这种方法还要将脚本设置在后端。不通用。根据返回值还能设置回调函数

PL D.将脚本放在body底部，这样可以让用户看见页面再加载脚本

有时候一个页面应用需要多个脚本来支持，这样会消耗更多的时间和http请求

相同大小的文件，数量越多，消耗越大

分析问题: 由于请求次数增加，会导致请求时间增加，页面响应时间变长

解决办法: 将多个文件合并成一个文件，或者请求地址里面包含了多个文件，而不是多次请求CDN或者加载多个文件

为解决堵塞问题，将脚本放在body(确保脚本执行前页面渲染完毕)，并且这个脚本是单纯的添加业务脚本(页面的onload事件)，由此逐渐实现无堵塞地添加脚本

最后编辑于：2019.07.18 16:54:14

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。