Answer 1

` const localStorageMock = (function() {
let store = {}
return {
getItem: function(key) { return store[key] || null },
setItem: function(key, value) { store[key] = value.toString() },
removeItem: function(key) { delete store[key] },
clear: function() { store = {} },
}
})()

		Object.defineProperty(window, 'localStorage2', {
			value: localStorageMock
		})
		
		localStorage2.setItem('test', 'test')
		console.log(localStorage2.getItem("test"))  //test
		localStorage2.removeItem('test')
		console.log(localStorage2.getItem("test"))  //null
		localStorage2.setItem('test', 'test')
		localStorage2.clear()
		console.log(localStorage2.getItem("test"))  //null`

没有校验 value 是否为字符串

因为自带的localStorage也是把对象自动转成字符串的。我测试过自带的localStorage也是这样子。

localStorage.setItem('test',{a:'a'})

我的也是这样的，你可以试一下啊。

Answer 2

• CSS（外链或内联）会阻塞整个DOM的渲染（Rendering），然而DOM解析（Parsing）会正常进行
• 很多浏览器中，CSS会延迟脚本执行和DOMContentLoaded事件
• JS（外链或内联）会阻塞后续DOM的解析（Parsing），后续DOM的渲染（Rendering）也将被阻塞
• JS前的DOM可以正常解析（Parsing）和渲染（Rendering）

但是，我不明白的是，既然CSS会延迟脚本的执行，我把bootstrap那个换成内联样式，就是不发送http请求下载那个css样式，好像结果又变了，这时候构建CSStree好像并没有阻塞js脚本的执行，那么，到底是HTTP线程阻塞了脚本的执行，还是构建CSStree阻塞了脚本执行？

如果是HTTP线程阻塞了js的执行，这个也可以解释，为什么多个js并行下载，要等全部下载完成才执行一个道理，我继续尝试了一下，换成img标签，这个也会发送http请求，但是这个并不会阻塞脚本的执行。

如果是构建CSStree阻塞了线程，根据上面实践的结果，发现构建CSStree并没有阻塞脚本的运行。之前看到的下面的这个说法，也就不成立。

JS 的执行有可能依赖最新样式。 比如，可能会有 var width = $('#id').width(). 这意味着，JS 代码在执行前，浏览器必须保证在此 JS 之前的所有 css（无论外链还是内嵌）都已下载和解析完成。这是 CSS 阻塞后续 JS 执行的根本原因。

那么我的猜测就是，发送的请求是是样式文件会阻塞js脚本的执行，但为什么css会阻塞js脚本文件的执行，这个我暂时也不清楚，还有浏览器预加载一些机制也不太清楚。JS 的执行有可能依赖最新样式???难道我测的结果有问题？