js 性能优化

1.资源压缩合并，减少HTTP请求 

2.非核心代码进行异步加载【补充异步加载的方式以及异步加载的区别】

（1）异步加载的方式：动态脚本加载，async，defer

（2）异步加载的区别：

      a.defer:在HTML解析完成之后才会执行，如果是多个按照加载的数序依次进行

      b.async：加载完成后立即执行，如果是多个执行顺序和加载顺序无关

3.利用浏览器缓存【补充缓存的分类，缓存的原理】*****重要

 （1）缓存的分类：强缓存+协商缓存

（2）缓存的原理：

  a.强缓存 ：有就拿上用   【exprice(绝对时间),cache-Control(相对时间)】

  b.协商缓存：即便有也需要和服务器协商一看看能不能用【Last-Modified+If-Modefied;Etag+If-None-Match】

4.使用CDN进行加速

5.预解析DNS

• 第一句表示 ：强制打开a 标签的预解析【网页的a标签在一些浏览器上面默认打开DNS预解析的，如果是https的话会默认关闭DNS 预解析】
• 第二句表示用的是DNS 预解析

<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//host_name_to_prefetch.com">

6.尽量避免重排和重绘【比如动态添加元素的时候创建的文档碎片】

7.图片lazyLoad  【瀑布流：判断图片是否出现在可视范围从而决定要不要加载图片 】 

8.将CSS样式表放在顶部，把javascript放在底部（浏览器的运行机制决定）

下面的解释是从别人那里粘贴过来的【https://blog.youkuaiyun.com/weixin_38055381/article/details/85242426】

• CSS 不会阻塞 DOM 的解析，但会阻塞 DOM 渲染。
• JS 阻塞 DOM 解析，但浏览器会"偷看"DOM，预先下载相关资源。
• 浏览器遇到 <script>且没有defer或async属性的 标签时，会触发页面渲染，因而如果前面CSS资源尚未加载完毕时，浏览器会等待它加载完毕在执行脚本。
   

9.避免使用CSS表达式

 

•  CSS 表达式致命的一点是，它执行的频率远远超出了你的想象。理想情况是，我们希望这个表达式在页面加载或刷新的时候执行。事与愿违，只要页面一滚动，它就会重复执行，甚至鼠标移动的时候，它也会执行。
   

10.使用外部javascript和CSS

• 在实际应用中使用外部文件可以提高页面速度，因为JavaScript和CSS文件都能在浏览器中产生缓存。内置在HTML文档中的JavaScript 和CSS则会在每次请求中随HTML文档重新下载。如果说是放在内部的话虽然说是减少了HTPP 的请求次数但是增大了HTML 文档的大小。  【总结要是css和js 被缓存了那不仅仅减少了HTTO 的请求次数而且减少了HTML 文档的次数何乐而不为呢！】

11.图片lazyLoad  【瀑布流：判断图片是否出现在可视范围从而决定要不要加载图片】