目录
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,就无法回流或者重绘了