前端优化,包括css,jss,img,cookie
前端优化,来自某懒观看麦子学院视频的笔记。
- 尽量减小HTTP的请求数
- 使用CDN
- 添加Expirs头,或者Cache-control
- Gzip组件压缩文件内容
- 将CSS放在页面上方
- 将脚本放到页面下方
- 减小CSS中Expressions:只在IE中使用,在css中经过js动态赋值
- 将javaScript和CSS独立成外部文件
- 减小DNS查询
- 压缩javaScript和CSS
- 避免重定向
- 移除重复的脚本
- 配置实体标签(ETags):客户端请求文件,服务器读取文件标签,若是未修改就直接返回304.
- 使用AJAX缓存
- 避免空的src href属性
- 尽早地刷新缓冲
- 使用get来完成ajax
- 延迟加载:分批加载
- 预先加载:客户端缓存js文件等
- 减小DOM元素
- 避免404页面
- 高效缩写CSS
- bigpipe技术,分层显示,先出框架,再加载框架内的物体。
- 使用
替代@import
- 避免使用滤镜:只在旧版IE中使用,修正图片问题
- CSS无图片技术:css image(css引入背景图片比较占资源,若是用css绘制相似小三角这样的简单图片,则大大减负)
- smush.it、转png格式压缩图片大小
- 合并和拆分图片:合并:CSS sprites 将小图片合成大图片,再用背景定位显示图标。拆分:多线程拆分后下载。
- 多域名下载图片
- IE6缓存背景图片
- 预加载图片
- 减少cookie的体积,移除没必要要的cookie(注意在适应级别上设置cookie,以便子域名不受影响),设置cookie域
- 静态资源使用无cookie域名
- 设置合理的cookie过时时间
- 优化js循环语句。将length属性抽取至判断语句以外。for(in)效率最差,for(;;)=while();
- js使用闭包进行缓存
- js再也不循环中建立函数。改成抽取函数后调用
- js手动消除引用,告诉垃圾回收器。不推荐delete函数,推荐使用=null的方法。
- 慎用js全局对象,由于不会被垃圾回收
- js绑定的事件不须要后取消绑定。推荐用on,防止屡次绑定
- 慎用js闭包,可能会致使内存泄漏
- js少用eval,特别是在循环内。json[i][变量]=1这样的语句不要使用eval
- 使用json格式初始化js的对象和数组。而不是new一个。前者引擎直接解释,后者调用构造器。
- js使用Math.floor(),“”+的方示进行类型转换。Math是内部对象
- js使用正则处理字符串比js循环要快,但构建正则对象比较耗时,尽可能抽取后复用。
- 存储时使用对象仍是数组。键值对中值多样,使用对象。其余使用数组
- 数组中对象尽可能一致
- 缓存ajax.函数缓存。h5中的sessionStorage(会话级)和localStorage(持久化)
- bool值的断定,经过率越小越往前。
- 工具yslow、pagespeed
欢迎关注本站公众号,获取更多信息