前端开发中自己常见问题

前端性能优化网站

一.页面级优化

• 1.减少http请求
• (1). 从设计实现层面简化页面　　
• (2). 合理设置 HTTP缓存　—原则很简单，能缓存越多越好，能缓存越久越好。例如，很少变化的图片资源可以直接通过 HTTP Header中的Expires设置一个很长的过期头 ;变化不频繁而又可能会变的资源可以使用 Last-Modifed来做请求验证。尽可能的让资源能够在缓存中待得更久。　　
• (3). 合并与压缩一个css和js文件,图片转成webP格式　—如果可以的话，尽可能的将外部的脚本、样式进行合并，多个合为一个。另外， CSS、 Javascript、Image 都可以用相应的工具进行压缩，压缩后往往能省下不少空间。　　
• (4). CSS Sprites　　导航栏中的图片合并成一张精灵图,减少图片请求次数　　
• (5). 预览本地 Images　　使用dataURL把图片的二进制数据,进base64编码,形成一个字符串,可以直接作为img的src直接使用　　

• (6). Lazy Load Images（图片懒加载）　能在某些条件下或者页面刚加载时减少 HTTP请求数。对于图片而言，在页面刚加载的时候可以只加载第一屏，当用户继续往后滚屏的时候才加载后续的图片。
  原理:把路径存在一个自定义属性中,当进入可视区,追加到img的src中取(jQuery.lazyload.js);

• 1. 将外部脚本置底（将脚本内容在页面信息内容加载后再加载）
• 1. 异步执行 inline脚本(其实原理和上面是一样，保证脚本在页面内容后面加载。)
• 1. 避免页面跳转 —服务器在处理完http的请求后,会返回http响应报文.如接收的是3xx状态码,网页会重定向,重定向次数过多,网页会一直呈现刷新状态;
• 1. 将 CSS放在 HEAD中
• 1. 异步请求 Callback（就是将一些行为样式提取出来，慢慢的加载信息的内容）
• 1. 减少不必要的 HTTP跳转
• 1. 避免重复的资源请求

二、代码级优化

• 1. Javascript
• 1. CSS选择符
• 1. HTML
• 1. Image压缩

cookie,sessionStorage,localStorage的区别:

• cookie的数据每次请求时都会发往服务器,sessionStorage和localStorage储存在本地;
• cookie只能 储存4k左右的数据; 其它两可以储存5M甚至更多的数据;
• cookie作用时间一直到过期为止; sessionStorage数据周期是关闭浏览器为止;localStorage储存的数据一直存在;

什么是ajax和json,它们的优缺点;

• ajax是一种无刷新页面,向后台发送数据请求,然后渲染页面的技术; 使用XMLHttpRequest进行异步数据查询和检索;
• 能不更新页面的前提下维护数据,异步模式,能快速地与用户进行交互,减轻服务器工作;
• 使用ajax后会影响浏览器的前进后退,即用户本地没有缓存.浏览前后都要向服务器发送请求;

• 发送get请求时可能会暴露用户数据,更新的动态无法被搜索到;

• json是一种数据交互的文本格式,可用于任何编程语言; 冒号赋值,容易混淆数据;

拖拽一个页面某元素

• 1.给移动的小盒子添加 draggble=true
• 2.监听大盒子 ondragover =function(event){event.preventDefault()};
• 3.监听大盒子 ondrop=funtion(){to.appendChild(move)}

闭包

• 闭包就是函数中的函数,里面的函数可以访问外面函数的变量,外面的变量是这个内部函数的一部分;
• 作用:可以访问函数中得变量,可长期保存在内存中,生命周期较长;
• 闭包不能滥用,否则会导致内存泄漏,影响网页性能;

window.onload 和jquery中$(function(){}) 入口函数

• window.load 等页面内包括图片等资源所有元素加载完毕才执行;
• jquery的$(function(){})等DOM结构执行完毕即可;

数组去重,冒泡,排序

/* 数组去重 */
var oldArr=[10,11,10,12,53,62,10,11,88]
var newArr=[oldArr[0]];
for(var i=0;i<oldArr.length;i++){
    //必须赋值true
    var flag = true;
    // console.log(newArr.length);
    //新数组必须有长度,不然会死循环; 因此先加旧数组中的第一个;
    for(var j=0;j<newArr.length;j++){
        if(oldArr[i]==newArr[j]){
            //如果相等 改标记为flase 中断
            flag=false;
            break;
        }
    }
    //如果不相等,追加
    if(flag){
        newArr.push(oldArr[i])
    }
}
console.log(newArr);


/* 数组冒泡 */
var sortArr=[10,21,72,55,66,88];
for(var i=0;i<sortArr.length;i++){
    for(var j=0;j<i;j++){
        if(sortArr[j]>sortArr[i]){
            var temp;
            temp=sortArr[j];
            sortArr[j]=sortArr[i];
            sortArr[i]=temp;
        }
    }
}
console.log(sortArr);

浏览器兼容性

• 浏览器内核不同,对网页的解析就不同;
• *{margin:0;padding:0} 标签的margin,padding解析结果都不同;
• 块属性float后,又有横向margin,在ie6中margin会较大,撑到下一行中; display:inline;转成行内属性克解决;

跨域问题

var声明的变量作用域是在整个函数内

• let声明的变量作用域在块或子块中(if,function)

js数据类型

• Number,string,boolean,array,object,null(空),undefined(未定义)
• NaN不是数据类型,非数字值;MAX_VALUE极大值

检查数据类型

• typeof:string,number,boolean,function,object(array,null,obj),undefined
• 当遇到对象检查时,用instanceof判断对象具体类型

jq元素和zepto遍历后变成dom元素

文字竖直方向的对齐方式

• vertical-align:middle; 给盒子图片添加该属性

回到顶部

• $(html,body).animate({scollTop:0},500); 头部absolate会影响

一行文字在屏幕变小时不会换行

• 直接给父盒子加overflow:hidden;

git开发

• git add 文件名 (git add . 提交所有文件)
• git commit -m “提交说明”
• git pull origin dev 获取远程仓库最新版本
• git push origin dev 推送到远程仓库

json格式中stringfy和parse用法

• json是用于存储和传输数据的格式,常用于服务端向网页传递数据;
• stringfy转成json文本的字符串
• parse 将json字符串转成javascript对象

javascript中this的指向

• 1.全局作用域中指向window
• 2.方法调用时 谁调用指向谁
• 3.构造函数或构造函数原型对象指向构造函数的实例

HTTP状态码

• 200,301(跳转到其它url上),404,500
• 1xx: 需要进一步操作 2xx: 成功 3xx: 重定向 4xx: 客户端错误 5xx: 服务器错误

http请求缓存机制

• 第一次请求时:浏览器通过http的header报头,附带Expires(页面过期时间),Cache-Control(缓存),Last-Modefied,此时服务器记录第一次请求的Last-Modified(通常由文件的时间信息产生)/Etag(响应中资源的校验值);
• 再次请求时:浏览器请求头附带Expries,Cache-Control,If-Modified-Since/Etag,向服务器发起请求;
• 服务器根据第一次记录的Last-Modified/Etag和再次请求的If-Modified-Since(客户端存取的该资源最后一次修改的时间)/Etag,判断是否需要更新; 资源未发生变化,客户端不需要重新下载,返回304响应;
• 缓存优点:服务器响应更快,减少网络宽带消耗;

!DOCTYPE html的严格模式混搭模式

• 声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。
*

JS框架

常见浏览器内核

• Trident内核:属于IE浏览器内核
• Geko内核:FireFox火狐浏览器内核
• Webkit内核:Safari和以前Chrome的内核
• Presto内核:Opera浏览器内核
• Blink内核:Chrome内核

转载需备注出处