web高效前端编程读写笔记
2019-07-31 本文已影响0人
LazyG
1.css相关
- .a,.b{逗号指a和b相同的css样式}
- .a .b{空格指后代元素};
- .a>.b{大于号指子代元素};
- .a+.b{这个“+”是选择相邻兄弟,叫做“相邻兄弟选择器”}
- .a~.b{这个“~”是选择器 a之后出现的所有b}
- 更多css选择指南
2.实现redio/checkbox自定义
<style>
input [type=checkbox] {
display: none;
}
.checkbox{
color:green;
}
input[type=checkbox]:checked + .checkbox {
color: red;
}
</style>
<label>
<input type="checkbox">
<span class="checkbox"></span>
</label>
3.Form表单提交的用途
- 1.提交表单会以action的参数为url提交AJAX请求method参数可以设置请求方式,并重定向
- 2.form内的input点击回车按钮时会触发表单提交
4.IE下的Input
- 在IE下input type不认识的情况下会强制转化为text 例如 type="email"会转化为 type="text"
这时候 inpte[type=email]样式会失效
5.伪元素
1.常用伪元素,不会影响查DOM的效率,不是实际的HTML标签,可以加快浏览器加载,对SEO也有帮助
2.img/input等单标签没伪元素
6.JS性能优化
1.JS/CSS/HTML 解耦 (通过class来控制样式)
2.减少重复代码,相同功能的js可封装成公用函数
3.不要滥用闭包,访问闭包内的变量会加成查找时间
消耗性能的写法(访问factor的时间比访问count的时间长)
function getResult(count) {
count++;
function process() {
var factor = 2;
return count * factor - 5;
}
return process();
}
好的写法(这样访问factor的时间和访问count的时间一样)
function getResult(count) {
count++;
function process() {
var factor = 2;
return count * factor - 5;
}
return process(count);
}
4.不要滥用全局变量,全局作用域比较复杂,查找属性较慢
5.不要频繁的访问全局变量,可以赋值给本作用域变量
6.==和的===差异
null == undefined // true
''== '0' // false
0 == '' // true
0 == '0' // true
' \t\r\n ' == 0 // true
new String("abc") == 'abc' // true
new Boolean(true) ==true // true
true ==1 // true
7.减少http请求,如果css样式较少的时候,可以写成内联样式,减少http请求
8.http1.1同时请求条数有限制,过多请求占用资源
7.CSS优化
1.做动画时能用transform就不要用position/width/height减少layout的影响范围。
2.简化DOM结构,特别是需要做动画的,flex布局做动画更流畅,比float有优势。
3.减少base64图片存放,3k的图片转成base64,体积将变成4k,用base64图片又能减少http请求,所以要把握好度。
macdown 常用笔记
- 代码段
CGFloat height = 100;
CGFloat width = 100;
UIView *myView = [[UIView alloc]init;
- 表格
|:--|:--:|---:|(居左 居中 居右)
| s | ss | ss |
|---|---|---|
| dsa | dsa | sad |
|s|ss|ss|
|:--|:--:|--:|
|dsa|dsa|sad|
- 高亮
高亮
>高亮
- 上面
我在下面我在上面
我在下面<sup>我在上面</sup>
- 标红
dsadsadasdsa
`dsadsadasdsa`
- 斜体
*text*
- 加粗
text
**text**
- 分割线
---