第1章 用户体验

1.用户体验（UE/UX）的阶梯图包括产品的可用性、易用性、好用性和品牌价值。

2.页面的一秒钟延迟会造成页面浏览量PV下降。等待8s后，用户将失去耐心。

 

第2章 前端性能瓶颈

1.传统的DOM操作方式对性能的影响很大，其原因是频繁对DOM结构操作会引起页面的重排（Reflow）和重绘（Repaint），浏览器不得不频繁地计算布局，重新排列与绘制页面元素，导致浏览器产生巨大的性能开销。

2.浏览器的渲染过程为：分别解析HTML文档的HTML、CSS和JS，解析HTML生成DOM，解析CSS生成CSSOM，根据生成的DOM和CSSOM构建Render Tree。根据渲染树，计算布局排列，绘制页面。

3.重排一定会引起重绘。

4.为了解决频繁重排和重绘的问题，MVVM框架出现了。它通过操作虚拟DOM，不产生额外的重排和重绘，并实现了双向的数据绑定。

5.实现双向绑定的方式：Angular使用的是脏值检测，Vue使用的是数据劫持。

6.Vue通过给data加工，给里面的key通过数据劫持的方式增加监听器，当数据变动时，再触发更新。通过compile函数实现指令和双花括号所在节点的绑定和更新，其中使用类数组Fragment实现VDOM。

7.微软放弃了IE和Edge。我们可以使用Can I Use网站查询兼容性。

8.SPA没有页面间的跳转，而是通过Ajax、Axios、Fetch等无刷新异步加载数据模式，或者通过锚点跳转对应路由，使用户体验上升了一大截，但首屏渲染时间长，且不利于SEO。

9.多图网站可采用懒加载、分页、内容分发、静态资源分多域名存储等方式提高网站的性能。

10.由于JS会阻塞浏览器的渲染，所以一般会放在DOM树后，等待DOM结构加载完才开始执行。

11.使用专门的图片服务器存储图片，数据库表存储url，再加上适当的缓存和懒加载，会大大减少服务器的压力，提高页面性能。

12.Chrome浏览器是6条请求并发进行，某一条请求完成后补充另外的请求进来。通过多域名访问，即静态资源与服务分离，分多域名存储，就可以解决浏览器的并发瓶颈。

13.JS不仅能做前端，还能做服务端，甚至做系统，WebGL和Three.js也使JS具备游戏、地图等大型3D应用的能力，JS还可以进行大数据分析、图像采集、特征提取。

 

第3章 前端的分层

1.<base>为页面上的所有链接规定默认地址或默认目标。

2.HTML5新增了<details>、<summary>、<dialog>等语义化标签，新增了input的标签类型，新增了<datalist>、<output>等表单元素，新增了多媒体标签和Canvas。

3.HTML5新增了强大的选择器，新增了localStorage、sessionStorage、WebSocket、querySelector、querySelectorAll。

4.使用CSS分为外链式、内联式和嵌入式。

5.less包含变量、混合、参数、嵌套、函数等功能。sass会比less复杂一些，具有强大的库Compass。Compass中有很多封装好的Mixin，如合成精灵图，使我们很方便地写出兼容的样式。

6.通过使用css的预处理器，我们可以实现样式的复用、多层嵌套简化，实现样式的兼容和循环样式。

7.JS分为ECMAScript、DOM、BOM三部分。

8.ES5时代，作用域只有全局作用域和局部作用域，window是全局，function是局部。我们使用let和const实现块级作用域。

9.ES6包括块级作用域、解构赋值、箭头函数、新的数据结构Set和Map、各类简写、Promise、模块化编程、模板字符串、Symbol数据类型、String的repeat方法、for...of、Object.keys()方法、forEach()、map()、filter()、reduce()、some()、every()。

10.使用箭头函数后，当函数在全局环境下执行时，内部的this指向的不再是window，而是undefined。

11.ES7包括async/await、arr.includes()、**的方法，ES8包括padStart()、padEnd()、Object.values、Object.entries等方法。

12.reduce方法可以求和、求最大值、实现数组去重。

 

第4章 HTML层级优化

1.减少HTML的层级嵌套，使用MVVM框架时也要注意，组件的嵌套不宜过深，最好不要超过3层。

2.减少空标签、无用标签的滥用，可使用:before和:after实现三角形效果。

3.减少内联样式，改为嵌入式或是外链引用样式，从而实现样式复用。

4.合理使用自定义属性，不宜过多，合理利用模板引擎。

5.可使用link标签的prefetch在浏览器空闲的时候预先下载将来页面的资源，使用dns-prefetch进行域名的预先转换，使用preload预先下载当前页面将要用到的JS文件。

6.可以通过将<img>设定一个固定的大小，避免页面小图换成大图时页面的重排和重绘。设置img标签的alt属性有利于SEO，爬虫会抓取alt的值，并依据该值把图片加到百度图库中，从而增加网站流量入口。

7.当src属性和href属性值为空时，一些浏览器可能把当前页面当成属性值加载，从而影响页面的性能。

8.iframe对网站性能影响大，具有隔绝的特性，目前的爬虫机器人不能从iframe中拿到数据。

 

第5章 CSS层级优化

1.样式多复用，少写重复代码。尽量避免同一类名多次渲染，可以给元素设置两个类，一个是基础类，另一个是重写了部分样式的类。

2.少用高优先级选择器，慎用!important。实现样式层和行为层的类名分离，如<div class='color-green helloBoy'>你好啊</div>。

3.使用伪选择器解决问题，避免写出过深层级的CSS选择器，不用曾经的CSS表达式。

4.减少昂贵的样式的使用，如box-shadow、gradients、filter、opacity、border-radius。

5.减少浏览器的重排和重绘，可以使用Chrome DevTools的Performance面板查看一个刷新操作会发生的动作，避免float滥用。

6.使用CSS Sprites，配合background-position属性可以减少对小图标的请求。

7.充分利用强大的CSS3，可以实现动画效果，减少JS的使用，从而优化页面的性能。CSS中有很多利用到GPU加速渲染的属性。

8.相较于window.resize，使用媒体查询实现页面自适应更好。

 

第6章 JavaScript层级优化

1.JS的运行机制是单线程+异步队列。

2.使用定时器要记得及时清除定时器。

3.合理使用CSS3动画，在使用该动画效果时添加类名即可，也可以通过requestAnimationFrame(animateUnit)来实现动画，提高用户体验。

4.使用for循环绑定事件会导致异步监听器过多，我们可以采用事件委托的方式监听，即委托给点击的父元素，可以解决分页导致元素未被绑定的问题。

5.JQ使用on函数来实现事件委托。

6.我们应避免重复的事件监听，即将原来的回调方法分离出来，当需要补充替换的时候，使用removeEventListener移除回调方法，JQ则使用off函数移除原有的事件即可。

7.事件的传播机制分为从外向里的事件捕获和从里向外的事件冒泡，很多浏览器都将事件冒泡作为默认的传播机制。

8.一般某个特定事件的传播机制只会是事件捕获和事件冒泡的其中一种。

9.为了防止JS在DOM树未创建前就加载执行，从而获取不到DOM节点，或出现事件绑定不到节点的问题，可以采用window.onload方法，等页面完全渲染完，再加载执行JS。

10.使用window.onload执行JS有时会过慢，使得页面处于假死状态，因此我们可以使用JQ的ready方法，该方法在DOM树构建完毕后执行，提升了页面的性能。

11.两个window.onload，后面会覆盖前面的。

12.Vue组件生命周期包括beforeCreate、created（可以使用methods和data）、beforeMount、mounted（可以操作DOM）、beforeUpdate、updated（更新后的DOM）、beforeDestroy、destroyed。

13.使用变量缓存，可以提升代码性能。用容器包裹全局变量，实现变量私有化，可以减轻window的负担，且避免全局变量造成变量污染。

 

第7章 资源加载优化

1.

更多文章请关注《万象专栏》