前言
大家好,我是lzh,目前是一名前端工程师,这里是我总结的前端知识点,觉得有趣的话点个star,交流前端知识请添加微信:lai_1397119416(附赠一份前端面试资料哦~)
持续更新,敬请期待...
HTML 篇
百度 ife 的 h5 语义化文章,讲得很好,推荐阅读
CSS 篇
总结工作中常用的 CSS 如三角形,图形结合,阴影效果,一行省略,多行省略
CSS 三角形
.triangle{
width: 0;
border-width: 10px 20px;
border-style: solid;
border-color: #000 transparent transparent transparent; /*倒三角*/
}
.triangle{
width: 0;
border-width: 10px 20px;
border-style: solid;
border-color: transparent #000 transparent transparent; /*右三角*/
}
.triangle{
width: 0;
border-width: 10px 20px;
border-style: solid;
border-color: transparent transparent #000 transparent; /*正三角*/
}
.triangle{
width: 0;
border-width: 10px 20px;
border-style: solid;
border-color: transparent transparent transparent #000; /*左三角*/
}
用CSS的clip-path实现不规则矩形
利用clip-path
.discount-btn{
width:129px;
height:48px;
background: linear-gradient(90deg, #ffa25e 0%, #fd6930 100%);
clip-path: polygon(0 0,100% 0%,75% 100%,0% 100%); // 上 x,y 右 x,y 下 x,y 左 x,y
}
polygon 每一对在列表中的参数都代表了多边形顶点的坐标, xi 与 yi ,i代表顶点的编号,即,第i个顶点
实现效果:
利用border属性
div {
width:0;
border-top:100px solid green;
border-left:150px solid blue;
border-right:100px solid transparent;
}
实现效果:
缺点:颜色无法渐变
CSS实现立体圆柱
.yuanzhu {
position: relative;
height: 54px;
width: 230px;
margin-top: 30px;
background: linear-gradient(180deg, #ffeab4 0%, #fff1d1 27%, #f8bb58 100%);
margin: 30px auto;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.yuanzhu::after {
position: absolute;
right: -10px;
content: '';
display: block;
width: 20px;
height: 54px;
border-radius: 50%;
background: linear-gradient(180deg, #fcc35c 0%, #ab710e 100%);
}
实现效果:
重绘和回流(重排)
- 重绘:当渲染树的元素外观(如颜色)发生改变,不影响布局时,产生重绘
- 回流:当渲染树的元素的布局(如位置,尺寸,隐藏/显示)发生改变时,产生回流
- 注意:JS获取Layout属性值(如:offsetLeft、scrollTop、getComputedStyle等)也会引起回流。因为浏览器需要通过回流计算最新值
- 回流必定产生重绘,但重绘不一定引起回流
如何最小化重绘(repaint)和回流(reflow):
- 需要要对元素进行复杂的操作时,可以先隐藏(display:"none"),操作完成后再显示
- 需要创建多个DOM节点时,使用DocumentFragment创建完后一次性的加入document
- 缓存Layout属性值,如:var left = elem.offsetLeft; 这样,多次使用 left 只产生一次回流
- 尽量避免用table布局(table元素一旦触发回流就会导致table里所有的其它元素回流)
- 避免使用css表达式(expression),因为每次调用都会重新计算值(包括加载页面)
- 尽量使用 css 属性简写,如:用 border 代替 border-width, border-style, border-color
- 批量修改元素样式:elem.className 和 elem.style.cssText 代替 elem.style.xxx
JavaScript基础篇
Vue源码篇
-
reactivity