《学习日记》JavaScript性能优化

来源：互联网发布：行云网络加速器编辑：程序博客网时间：2024/05/21 06:51

阻塞性的JavaScrip场景：由于HTML是由上至下开始渲染的，如果你的script脚本放在的<head>中，那么当下载脚本的时候，渲染被阻塞，如果脚本出现错误，下面的渲染将停止，就是说用户看到的页面是一大的空白。或者脚本很大的时候，页面出现的速度也会很慢，因此为了避免这种情况，可以由以下几种办法去解决。

方法一：把脚本放到页面的底部，加载玩DOM元素后再下载脚本。

方法二：动态加载脚本：意思是说，脚本下载与加载DOM元素是异步的，用loadScript（url,callback），原理，在javascript中创建一个script标签的元素，script.src="url"，然后用script的一个属readyState（4种状态：下载开始，完成，不可用，可用）,当判断下载完成后执行的动作，相当于callback方法。

方法三：在<script defer>在标签中添加defer，当浏览器执行到script时，下载脚本但不执行，等到加载完所有Dom元素后才执行，但旨在IE4+和FirFox浏览器可用。

方法四：将多个script脚本合并成一个，减少请求的时间。

方法五：用XMR对象下载脚本注入到页面中。

方法六：js应该尽量写在.js文件里面，如果写在页面里面，则每次重新加载页面都会重新下载行内JS，这样影响加载的速度。如果写在.js文件中就可以让页面和脚本分离，可以缓存，降低耦合度，有利于加快页面响应的速率。

方法七：压缩JS文件

京东模式：

工作流程：在每个模块用CMD模式（加载某个模块时，提前把脚本和CSS文件打包下载），懒执行，当滑动到某个地方时执行该脚本。

原理：一旦进入该视窗，就dom请求对应的path，拿到这个模块所需要的脚本和样式并执行，不过这中间有个本地缓存，如果在本地缓存中匹配到相应的hash内容，则直接渲染（hash每次在这个窗口做了改动之后都会变化，然后再与本地的hash比较，若相同则直渲染，若不同则重新发送请求加载样式和脚本。）而这里的请求：是将脚本和数据分开输出的，因为页面数据变动大，脚本变化没那么大。如果数据和脚本同时输出，那么加大传输压力。

对比：传统的模式是把所有脚本和样式打包成一个文件下载并执行，这样第一次登陆时页面非常慢，如果修改了一个脚本，则又要重新下载整个文件。而京东模式就是在某个模块才加载那个脚本和样式，而且到了那个模块的特定地方先看看这个地方是否有本地缓存（脚本或者数据），如果没有则发送请求去下载并执行，执行的时候又是脚本和数据分离的，就是当你这个模块的某个地方数据发生了变化，但是脚本是有缓存的，就只对数据请求。所有说这里有两个请求，一个是数据的请求，一个是脚本的请求。

0 0