目录
2、Doctype 的作用是什么？标准模式和兼容模式有什么区 别？
7、v-if 和 v-for 的优先级是什么？如同时出现，应怎么优化
一、优先级，权重的计算
！important：Infinity
行内样式：1，0，0，0
id选择器：0，1，0，0
class类选择器：0，0，1，0
属性选择器：0，0，1，0 （[attr*=val]）
伪类选择器：0，0，1，0 （hover、:first-child、target）
伪元素选择器：0，0，0，1 （E::first-letter、E::before和E::after）
标签选择器：0，0，0，1
通配符选择器：0，0，0，0
继承样式：0，0，0，0
浏览器默认属性
二、图片精灵及优缺点
精灵图是一种网页图片的应用技术，它把背景图片（一般是很多小的图标）都整合到一张图片上。
背景图像的位置：background-image
利用background-position来进行图片的定位。
同时也可以设置背景图片的大小：background-size
背景图是否重复：background-repeat
背景图是否随着页面的其余部分滚动：background-attachment
优点：有效减少http请求，减少图片加载时间
缺点：合成比较麻烦，需要精准定位。
三、display:inline-block的间隙问题
相邻的inline-block元素之间有空格或者换行符就会产生间隙，计算是不是inline-block的元素被设置为inline-block，也会产生水平间距。
解决方案：
1、将这几个标签写到同一行，但是代码可读性很差，也不好看。
2、设置margin外边距，但是不同浏览器外边距不一样，就不好控制
3、在父级加font-size：0；在子元素里设置需要的字体大小，消除垂直间的间隙。
4、利用浮动：display：float来清除
四、垂直水平居中：
1、position+tranform
.fa {
positon:relative;
}
.son{
position:absolute;
left:50%;
right:50%;
transform:translate(-50%,-50%)
}
2、postion+margin:宽高各移一半
.fa{
position:relative;
}
.son{
position:absolute;
left:50%;
top:50%;
margin-left:-父元素宽度的一半px；
margin-top:-父元素高度的一半px;
}
3、margin-top:（父height-子heigh）/2
.fa {
box-sizing:border-box;
padding-top:1px;
}
.son {
margin:0 auto;
margin-top:（父height-子heigh）/2
}
4、positon+margin
.fa{
positon:relative;
}
.son{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
5、flex
.fa {
display:flex;
justify-content:center;
align-items:center;
}
6、flex+margin:auto
.fa {
display:flex;
}
.son{
margin:auto;
}五、回流和重绘
回流（reflow）
当浏览器发现某个部分发生了点变化影响了布局，需要倒回去重新渲染，内行称这个回退的过程叫reflow。
reflow会从<html>这个root frame开始递归往下，依次计算所有的结点几何尺寸和位置。
reflow几乎是无法避免的。现在界面上流行的一些效果，比如树状目录的折叠、展开（实际上是元素的显示与隐藏）等，都将引起浏览器的reflow。
鼠标滑过、点击......只要这些行为引起了页面上某些位置的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲染。
通常我们都无法预估浏览器到底会reflow哪一部分的代码，它们都彼此互相影响着。
重绘
改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变。
回流必将引起重绘，而重绘不一定会引起回流。
重绘：当渲染树种的元素外观（颜色）发生改变，不影响布局，智产生重绘
回流：当渲染树种的元素布局（如尺寸、位置、影藏/显示状态）发改变的时候，会产生重绘回流（JS获取Layout属性值，比如offsetLeft、scrollTop、getComputedStyle等等也会引起回流，因为浏览器需要通过回流计算最新值）
六、关于兼容性的问题
1、常见的兼容性问题：
1) 不同浏览器标签默认的 margin 和 padding 不一样。*{margin:0;padding:0;}；
2) 超链接访问过后 hover 样式就不出现了，被点击访问过的超链接样式不再具有 hover 和 active 了。
解决方法是改变 CSS 属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}；3) 图片添加超链接时，在 IE 浏览器中会有蓝色的边框：给图片添加 border:0 或 者 border：none;
4) 透明度设置，IE 不识别 opacity 属性：
标准写法：opacity: value;(取值范围 0-1)；
兼容 IE 浏览器 filter: alpha(opacity=value);(取值范围 1-100)；5) 图片默认有间隙：添加浮动;
6) 鼠标指针 BUG：
cursor: hand 只有 IE 浏览器识别；
cursor:pointer;IE 及其他浏览器都识别；7) 按钮默认大小不一：
i. 如果按钮是一张图片，直接用背景图作为按钮图片；
ii. 用 a 标记模拟按钮，使用 JS 实现其他功能；
2、Doctype 的作用是什么？标准模式和兼容模式有什么区 别？
声明在文档的第一行，位于 html 前面，用于告知浏览器的解析器用什么标准来解 析这个文档，如果没有声明文档标准就以兼容模式解析。
标准模式的排版和 JS 都是以浏览器支持的最高标准来运行。
兼容模式页面以宽松、向后兼容的方式显示，模仿老版本的浏览器，防止站点无 法工作。
3、原生 JS 兼容浏览器的元素事件绑定
function addEvent (el, ename, fn) {
if(el.addEventListener){
el.addEventListener(ename, fn);
} else if (el. attachEvent) {
el.attachEvent('on' + ename, fn);
} else {
// 一定要用中括号，里面支持表达式
el['on'+ename] = fn;
}
}
4、Vue2.0 兼容 IE 哪个版本以上吗？
不支持 ie8 及以下，部分兼容 ie9 ，完全兼容 10 以上，因为 vue 的响应式原理是 基于 es5 的 Object.defineProperty(),而这个方法不支持 ie8 及以下
七、关于优化的问题
1、CSS 优化、提高性能的方法有哪些？
1) 多个 CSS 合并，尽量减少 HTTP 请求；2) 将 CSS 文件放在页面最上面；3) 移除空的 CSS 规则；4) 避免使用 CSS 表达式；5) 选择器优化嵌套，尽量避免层级过深；6) 充分利用 CSS 继承属性，减少代码量；7) 抽象提取公共样式，减少代码量；8) 属性值为 0 时，不加单位；9) 属性值为小于 1 的小数时，省略小数点前面的 0；10) CSS Sprite；
2、前端开发中，如何优化图像？图像格式的区别？
优化图像：1) 不用图片，尽量用 css3 代替。 如要实现修饰效果半透明、边框、圆角、阴影、渐变等，在当前主流浏览器中都可以用 CSS 达成；2) 使用矢量图 SVG 替代位图。对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持 SVG 了，可放心使用；3) 使用恰当的图片格式，我们常见的图片格式有 JPEG、GIF、PNG；基本上，内容图片多为照片之类的，适用于 JPEG。而修饰图片通常更适合用无损压缩的 PNG。GIF 基本上除了 GIF 动画外不要使用，且动画的话，也更建议用 video 元素和视频格式，或用 SVG 动画取代。4) 按照 HTTP 协议设置合理的缓存。5) 使用字体图标 webfont、CSS Sprites 等。6) 用 CSS 或 JavaScript 实现预加载。7) WebP 图片格式能给前端带来的优化。WebP 支持无损、有损压缩，动态、静态 图片，压缩比率优于 GIF、JPEG、JPEG2000、PG 等格式，非常适合用于网络等图片传输。
3、web 前端开发，如何提高页面性能优化？
内容方面：1) 减少 HTTP 请求；2) 减少 DOM 元素数量；3) 使得 Ajax 可缓存；针对 CSS：前面有了针对 JS：1) 脚本放到 HTML 代码页底部；2) 从页面中剥离 JavaScript 与 CSS；3) 精简 JavaScript 与 CSS；4) 移除重复脚本；针对图片：1) 优化图片：前面有提到如何优化图片；2) 不要在 HTML 中使用缩放图片；
4、如何利用 webpack 来优化前端性能
1、压缩代码。uglifyJsPlugin 压缩 js 代码， mini-css-extract-plugin 压缩 css 代码2、利用 CDN 加速，将引用的静态资源修改为 CDN 上对应的路径，可以利用 webpack 对于 output 参数和 loader 的 publicpath 参数来修改资源路径3、删除死代码（tree shaking），css 需要使用 Purify-CSS4、 提取 公共 代码 。webpack4 移 除了 CommonsChunkPlugin ( 提 取公 共代 码)， 用optimization.splitChunks 和 optimization.runtimeChunk 来代替
5、在生产环境下如何提升 webpack 优化构建速度
1、优化 babel-loader（加缓存，加 hash）2、noParse（不去解析属性值代表的库的依赖）3、IgnorePlugin（忽略本地化内容，如引入了一个插件，只用到了中文语言包，打包的时候把非中文语言包排除掉）4、happyPack（多进程进行打包）5、parallelUglifyPlugin（多进程打包 js，压缩，优化 js）
6、在 webpack 中如何做到长缓存优化？
1、什么是长缓存浏览器在用户访问页面的时候，为了加快加载速度，会对用户访问的静态资源进行存储，但是每一次代码升级或者更新，都需要浏览器去下载新的代码，最方便和最简单华清远见教育集团 – 高端 IT 就业培训专家 华清远见教育集团 – 高端 IT 就业培训专家的更新方式就是引入新的文件名称2、具体实现在 webpack 中，可以在 output 给出输出的文件制定 chunkhash，并且分离经常更新的代码和框架代码，通过 NameModulesPlugin 或者 HashedModulesPlugin 使再次打包文件名不变
7、v-if 和 v-for 的优先级是什么？如同时出现，应怎么优化
性能更好？
v-for 的优先级与 v-if 的优先级始终有一个更高，容易出发 v-if 为 false 但 v-for并不重新运算的问题。避免出现这种情况，如果实在需要，则在外嵌套 template，在这一层进行 v-if 判断，然后在内部进行 v-for 循环，避免每次只有 v-if 只渲染很少一部分元素，也需要遍历同级的所有元素
8、vue 项目优化解决方案？
1.使用 mini-css-extract-plugin 插件抽离 css2.配置 optimization 把公共的 js 代码抽离出来3.通过 Webpack 处理文件压缩4.不打包框架、库文件，通过 cdn 的方式引入5.小图片使用 base646.配置项目文件懒加载7.UI 库配置按需加载8.开启 Gzip 压缩
9、使用 vue 后怎么针对搜索引擎做 SEO 优化？
1. SSR 服务器渲染,即单页面后台渲染2.vue-meta-info 与 prerender-spa-plugin 预渲染3. 使用 nuxt，但是 nuxt 部署有一定局限性，需要服务器配置 node 环境4. 使用 Phantomjs 针对爬虫做处理。
10、前端如何进行SEO优化？
面试题 —— 前端如何进行SEO优化？_爱喝牛奶~的博客-CSDN博客_前端seo怎么优化
11、总合：WEB前端性能优化，提高页面加载速度
笔试题/面试题——WEB前端性能优化，提高页面加载速度_爱喝牛奶~的博客-CSDN博客
一、图片
1、不同业务场景下，选择不同格式的图片
1） JPEG/JPG （有损压缩、体积小、加载快、不支持透明）
2）PNG （无损压缩、质量高、体积大、支持透明）
3）SVG (文本文件、体积小、不失真、兼容性好)
4）Base64 （文本文件、依赖编码、小图标解决方案）
5）Webp （支持透明、可以显示动态图片，兼容性不强）
2、使用图片精灵，减少http请求，和图片加载次数
3、尽量使用字体图标，减少http请求
4、将多个样式表或者脚本文件 合并到一个文件种，可以减少http请求
二、将样式表放在头部，减少页面首屏出现的时间
三、将脚本放在底部，js的执行和下载会阻塞DOM树的构建
四、css选择器优化
浏览器解析css选择器的规则是从右向左的，好处是为了尽早过滤掉一些无关的样式规则和元素，这样会提高查找选择器所对应的元素的效率。1)选择器的选择
1、尽量避免在选择器末尾添加通配符
2、不限定ID选择器：ID就是唯一的，不要携程div#nav这样，没必要。
3、不限定class选择器：可以进一步细化类名，比如li.nav写成nav-item
4、尽量避免后代选择器
5、用类选择器代替子代选择器
6、依靠继承，从而避免重复设定规则
7、选择器中最右边的选择符成为关键选择符，尽量避免使用各种后代选择器组合，性能低
8、避免CSS表达式2)重绘和回流
在发生重绘和回流的时候，如果使用的不是优化的CSS选择器，那就就导致效率降低
1、回流和重绘
回流（reflow）
当浏览器发现某个部分发生了点变化影响了布局，需要倒回去重新渲染，内行称这个回退的过程叫reflow。
reflow会从<html>这个root frame开始递归往下，依次计算所有的结点几何尺寸和位置。
reflow几乎是无法避免的。现在界面上流行的一些效果，比如树状目录的折叠、展开（实际上是元素的显示与隐藏）等，都将引起浏览器的reflow。
鼠标滑过、点击......只要这些行为引起了页面上某些位置的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲染。
通常我们都无法预估浏览器到底会reflow哪一部分的代码，它们都彼此互相影响着。
重绘
改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变。回流必将引起重绘，而重绘不一定会引起回流。
重绘：当渲染树种的元素外观（颜色）发生改变，不影响布局，智产生重绘
回流：当渲染树种的元素布局（如尺寸、位置、影藏/显示状态）发改变的时候，会产生重绘回流（JS获取Layout属性值，比如offsetLeft、scrollTop、getComputedStyle等等也会引起回流，因为浏览器需要通过回流计算最新值）
2、渲染主流程：
渲染引擎首先是通过网络请求获得所请求文档的内容，通过以8k分块的方式完成。
在渲染引擎取得内容之后的基本流程：
解析html以构建dom树—>构建render树—>布局render树—>绘制render树
- DOM Tree：浏览器将HTML解析成树形的数据结构
- CSS Rule Tree：浏览器将CSS解析成树形的数据结构
- Render Tree：DOM和CSSOM合并后生成Render Tree
- Layout：有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去计算出每个节点在屏幕中的位置
- Painting：按照算出来的规则，通过显卡，把内容画到屏幕上3、回流何时发生
当页面布局和几何属性改变时就需要回流。下述情况会发生浏览器回流：
添加或者删除可见的DOM元素
元素位置改变
元素的尺寸改变——边距、填充、边框、宽度和高度
内容的改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变
页面渲染初始化
浏览器窗口尺寸改变——resize事件发生时
4、如何影响性能
页面上任何一个结点触发reflow，都会导致它的子结点及祖先结点重新渲染。
每次重绘和回流发生时，浏览器会根据对应的css重新绘制需要渲染的部分，如果你的选择器不优化，就会导致效率降低
方法：
1、将多次修改保存起来，一次性修改
2、避免逐条改变样式，使用类名去合并样式
3、将DOM离线，给元素设置dsaplay：none，就无法回流或者重绘了