高性能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事件)，由此逐渐实现无堵塞地添加脚本