隐藏页面中某个元素的方法

1.opacity：0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如 click 事件，那么点击该区域，也能触发点击事件的

2.visibility：hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件，隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

3.display：none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素。不显示对应的元素，在文档布局中不再分配空间（回流+重绘）

CSS 选择器及优先级

选择器

id 选择器(#myid)
类选择器(.myclass)
属性选择器(a[rel=”external”])
伪类选择器(a:hover, li:nth-child)
标签选择器(div, h1,p)
相邻选择器（h1 + p）
子选择器(ul > li)
后代选择器(li a)
通配符选择器(*)

优先级：

!important
内联样式（1000）
ID 选择器（0100）
类选择器/属性选择器/伪类选择器（0010）
元素选择器/伪元素选择器（0001）
关系选择器/通配符选择器（0000）

原型链

5c486425000107c811760468[1].jpg

822e1844346f4694a2e04e22f6fa9fbc[1].png

前端性能优化手段

加：少请求（4 个）、精灵图、懒加载、缓存、压缩代码/图片（SVG 图片）执：C 头 J 尾、避免 img、iframe 的 src 为空、img 修改大小染：少 dom、用 requestAnimationFrame 替 setTimeout、5 个动画用 css 以上用 Canvas、节流防抖、gpu 加速样：避免标签 style、float、0 丢单位、脚：缓存 length

前端性能优化手段从以下几个方面入手：加载优化、执行优化、渲染优化、样式优化、脚本优化

加载优化:减少 HTTP请求、缓存资源、压缩代码、无阻塞、首屏加载、按需加载、预加载、压缩图像、减少 Cookie、避免重定向、异步加载第三方资源
执行优化：CSS 写在头部，JS 写在尾部并异步、避免 img、iframe 等的src为空、尽量避免重置图像大小、图像尽量避免使用 DataURL
渲染优化：设置 viewport、减少DOM节点、优化动画、优化高频事件、GPU加速
样式优化：避免在 HTML 中书写style、避免 CSS 表达式、移除 CSS 空规则、正确使用display：display、不滥用float等
脚本优化：减少重绘和回流、缓存 DOM 选择与计算、缓存.length的值、尽量使用事件代理、尽量使用id 选择器、touch 事件优化

进程、线程

什么是进程？

进程：是 cpu 分配资源的最小单位；（是能拥有资源和独立运行的最小单位）

什么是线程？

线程：是 cpu 调度的最小单位；（线程是建立在进程的基础上的一次程序运行单位，一个进程中可以有多个线程）

webpack 和 gulp 的区别

Gulp：

Gulp 是一个自动化构建工具，强调的是前端开发的流程，通过配置一系列的 task，定义 task 处理的事物，然后定义执行顺序，来让 Gulp 执行 task，从而构建前端项目的流程，说白了就是用来打包项目。

不管做什么功能，都有一个统一的接口进行管理，必须去注册一个任务，然后去执行，这也是它的特点之一，即“任务化”。

WebPack：

WebPack 是一个前端模块化方案，侧重模块打包，把开发中的所有资源（图片、js 文件、css 文件等）都看成模块，通过 loader（加载器）和 plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源，Gulp 也可以配置 seajs、requirejs 甚至 webpack 的插件。

它会分析你的项目结构，找到 JS 模块以及那些浏览器不能够直接运行的扩展语言（如：TypeScript 等），然后将其转换和打包为合适的格式供浏览器使用。它最大的优点就是“模块化”（万物皆模块）。

前端安全

XSS：跨站脚本攻击
CSRF：跨站请求伪造
iframe 安全

减少 reflow/repaint

定义 css 的 class、dom 属性变量、使用 fixed、table 布局（CCDFT）
（1）不要一条一条地修改 DOM 的样式。可以先定义好 css 的 class，然后修改 DOM 的 className。

（2）不要把 DOM 结点的属性值放在一个循环里当成循环里的变量。
（3）为动画的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他们的 CSS 是不会 reflow 的。
（4）千万不要使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。(table 及其内部元素除外，它可能需要多次计算才能确定好其在渲染树中节点的属性，通常要花 3 倍于同等元素的时间。这也是为什么我们要避免使用 table 做布局的一个原因。)

（5）不要在布局信息改变的时候做查询（会导致渲染队列强制刷新）