浏览器输入url后发生了什么?
1.域名解析,找到服务器ip地址
2.主机与服务器三次握手建立连接
3.浏览器根据url发送http请求,服务器返回响应页面资源
4.加载页面中的其他资源请求:img,css,javascript等等
ajax产生的背景
web应用程序一次http请求对应一个页面,请求更新数据时会刷新整个页面,
ajax
XMLHttpRequest
ajax优点
异步通信,响应迅速;无需刷新页面,在页面内与服务器通信;按需请求数据分担服务器压力;
ajax缺点
破坏了浏览器回退功能;安全问题;破坏了程序的异常机制,给调试带来困难;
H5的新特性
- 用于绘画 canvas 元素。
- 用于媒介回放的 video 和 audio 元素。
本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;
sessionStorage 的数据在浏览器关闭后自动删除。
语意化更好的内容元素,比如 article、footer、header、nav、section
- 表单控件,calendar、date、time、email、url、search
css3
- CSS3实现圆角(border-radius),阴影(box-shadow),边框图片border-image
对文字加特效(text-shadow、),强制文本换行(word-wrap),线性渐变(linear-gradient)
3.旋转,缩放,定位,倾斜:transform:rotate(90deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);
增加了更多的CSS选择器、多背景、rgba();
- 在CSS3中唯一引入的伪元素是 ::selection ;
- 媒体查询(@media),多栏布局(flex)
web前端优化
css放置head里js放置body底部;减少http请求,压缩js文件等,合并css,js,雪碧图;图片懒加载;
cdn加速;反向代理;
优化减少dom操作,避免无谓的循环合理使用return等结束操作
盒模型
content,padding,border,margin
w3c height,width content 不包含其他部分;ie width,height包含content,padding,border
隐藏元素
display:none
visibility:hidden
opacity:0
z-index:-1
x的y次方
var getSum = function(x,y){
var sum = 0;
if(y==1){
sum = x;
}else if(y>1){
sum = getSum(x, y-1)*x;
}
return sum;
}
箭头函数与function
箭头函数this指向创建环境,function里this指向调用环境
使用箭头函数 不能用于构造函数,即不能被new
由于js的内存机制,function的级别最高,而用箭头函数定义函数的时候,需要var(let const定义的时候更不必说)关键词,而var所定义的变量不能得到变量提升,故箭头函数一定要定义于调用之前
模块化
匿名自执行函数
require.js sea.js
import/export
var min=Math.min.apply(null,array);
var max=Math.max.apply(null,array)
Array.prototype.push.apply(arr1,arr2);
实现三角
style=”width:0;height:0;border:7px solid transparent;border-top-color:#2DCB70;”
轮播图
style.transform或者style.left
在最后克隆第一张图片,实现平滑过渡