《高效前端 WEB高效编程优化与实践》笔记

[zhangjun620]

1.什么是伪元素

伪元素是一个元素的子元素，并且是inline的行内元素，before，after；
因为叫伪元素，所以js无法获取到这个元素。可以用伪元素制造视觉上的效果，但是不会增加js查DOM的负担，它对js是透明的。
Window.getComputedStyle()可以用第二个参数来获得伪元素。
它也不是一个标签。

[zhangjun620]

2.模块化
在面对对象编程里叫做单一职责原则，一个模块只负责一个功能。

[zhangjun620]

3.页面卡顿解决方案

[zhangjun620]

4.页面打开速度增强

避免head标签JS堵塞

1.所有放在head标签里的CSS和JS都会堵塞渲染，如果这些CSS和JS需要很久时间加载和解析，那么页面就空白了。

方法： 常用的就是放在body后面，第二个就是给script增加defer属性来延迟加载，这是HTML5新属性，有了这个属性就变成异步加载了我写的script不同属性加载顺序图)

2.不要放太多base64在css里面

3.使用响应式图片