1. 标准盒子模型与 IE盒子模型，以及box-sizing属性
w3c标准盒子模型： box-sizing：content-box
height高度只包括content的高度,不包括padding，margin以及border的高度
IE盒子模型： box-sizing：boder-box
height高度不但包括content的高度，还包括padding，border的高度，但不包括margin的高度
2. css选择器有哪些？哪些属性可以继承
一共9种。id选择器（#myid）,类选择器（.myClassName）,标签选择器（div,ul,p）,相邻选择器（h1 + p）,子选择器（ul>li）,后代选择器（ul li）,通配符选择器（*），属性选择器，伪类选择器（a:hover, li:nth-child）
可继承的属性： font-size, font-family,color
不可继承的属性： padding，height，margin，width，border
3. css优先级如何计算？
4. 清除浮动的几种方式
一、额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear:both）
二、父级添加overflow属性（父元素添加overflow：hidden）
三、 使用after伪元素清除浮动（推荐使用）
四、使用before和after双伪元素清除浮动
5. css优化、提高性能的方法有哪些？
加载性能：
(1)css压缩：将写好的css进行打包压缩，可以减少很多体积
(2)减少使用@important，而建议使用link,因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载
选择器性能：
(1)避免使用通配规则
(2)尽量少的使用标签选择器，而是用类名选择器
(3)不要用标签去限定ID或者类选择器：如,ui #nav
(4)尽量少的去使用后代选择器，降低选择器的权重值
(5)考虑继承
渲染性能：
(1)慎重使用高性能属性：浮动、定位
(2)尽量减少页面重排、重绘
(3)抽象提取公共样式，减少代码量
可维护性、健壮性：
(1)样式与内容分离；将css代码定义到外部css中
(2)将具有相同属性的样式抽离出来，整合并通过class在页面中进行使用，提高css可维护性
6. 浏览器是怎样解析css选择器的？
浏览器对css选择器是从右到左进行匹配解析的，如果是子代选择器，浏览器会遍历所有的子元素来确定是否是指定的元素。
7. 如何让Chrome支持小于12px 的文字？
谷歌最小字体是12px，不管你设置8px还是10px，在浏览器中只会显示12px,解决这个问题我们的做法是：针对谷歌浏览器内核，加webkit前缀，用transform:scale()这个属性进行缩放
<style>
p span {
font-size: 10px;
-webkit-transform:scale(0.8);
display: block;
}
</style>
<p>
<p><span>测试</span></p>
</p>
8. 如何让页面文字变得更加清晰，更细，用css怎么做？
-webkit-font-smoothing: antialiased
9. 如果需要手动写动画，你认为最小时间间隔是多少？
因为多数显示屏默认的频率是60HZ,即一秒刷新60次,所以时间间隔为1/60 *1000ms = 16.7ms
10. link和@import区别
（1）link 属于 XHTML 标签，除了加载 CSS 外，还能用于定义 RSS,
定义 rel 连接属性等作用；而@import 是 CSS 提供的，只能用于加
载 CSS;
（2）页面被加载的时，link 会同时被加载，而@import 引用的 CSS
会等到页面被加载完再加载;
（3）import 是 CSS2.1 提出的，只在 IE5 以上才能被识别，而 link
是 XHTML 标签，无兼容问题。
11.webpack 的打包原理
答法一：把所有依赖打包成一个 bundle.js 文件，通过代码分割成单元片段并按需加载。
答法二：webpack打包原bai理是根据文件间的依赖关系对其进行静态分析，然后将这些模块按指定规则生成静态资源，当 webpack 处理程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
webpack有两种组织模块的依赖方式，同步、异步。异步依赖将作为分割点，形成一个新的块；在优化了依赖树之后，每一个异步区块都将作为一个文件被打包。
webpack有一个智能解析器，几乎可以处理任何第三方库。无论它们的模块形式是CommonJS、AMD还是普通的JS文件；甚至在加载依赖的时候，允许使用动态表require("、/templates/"+name+"、jade")。
12.微信小程序封装请求
1、创建一个http.js,代码如下：
let rootUrl = "http://www.baidu.com";//具体接口域名根据你的实际情况填写
function getData(url,data,cb){
wx.request({
url : rootUrl + url,
data: data,
method: 'post',
header: {
// "Content-Type": "json", //get请求时候
"Content-Type": "application/x-www-form-urlencoded" //POST请求的时候这样写
},
success: function(res){
return typeof cb == "function" && cb(res.data)
},
fail: function(){
return typeof cb == "function" && cb(false)
}
})
}
module.exports = {
req : getData //暴露一个方法
}
这段代码有个坑：就是那个请求头header，如果是get请求
header{
"Content-Type": "json"
}
如果是post请求
header{
"Content-Type": "application/x-www-form-urlencoded" //POST请求的时候这样写
}
2、在小程序app.js里配置全局函数
var http = require('http/http.js') //引入刚创建的http.js,地址根据自己的地址填写
App({
onLaunch: function() {
//调用API从本地缓存中获取数据
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
},
getUserInfo: function(cb) {
var that = this
if (this.globalData.userInfo) {
typeof cb == "function" && cb(this.globalData.userInfo)
} else {
//调用登录接口
wx.getUserInfo({
withCredentials: false,
success: function(res) {
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
}
})
}
},
globalData: {
userInfo: null
},
func:{
req:http.req //这里配置我们需要的方法
}
})
3、在项目代码中调用方法
var app = getApp() ;
Page({
data: {
title:"111111"
},
//事件处理函数
changeMenus: function(){
let postdata = {
userId:12
}
app.func.req('/abner/web/getUserByOpenId',postdata,(res)=>{
console.log(res)
}
})
}
})
13.闭包
理解闭包首先要理解，js 垃圾回收机制，也就是当一个函数被执行完后，其作用域会被
收回，如果形成了闭包，执行完后其作用域就不会被收回。
如果某个函数被他的父函数之外的一个变量引用，就会形成闭包。
闭包的作用，就是保存自己私有的变量，通过提供的接口（方法）给外部使用，但外部不能 直接访问该变量。
闭包的优点：1.能够读取函数内部的变量 2.让这些变量一直存在于内存中，不会在调用结束后，被垃圾回收机制回收
闭包的缺点：由于闭包会使函数中的变量保存在内存中，内存消耗很大，容易造成内存泄露 ，函数调用完手动回收变量！
14.跨域
跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。
对于端口和协议的不同，只能通过后台来解决。我们要解决的是域名不同的问题。
1.下面是用 php 进行的设置，“*”号表示允许任何域向我们的服务端提交请求：
header{“Access-Control-Allow-Origin: *”}
2.(二) JSONP(JSON with Padding 填充式 JSON 或参数式 JSON)
在 js 中，我们虽然不能直接用 XMLHttpRequest 请求不同域上的数据时，但是在页面上
引入不同域上的 js 脚本文件却是可以的，jsonp 正是利用这个特性来实现的。
JSONP 由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的
函数，而数据就是传入回调函数中的 JSON 数据。
首先第一个 script 便签定义了一个处理数据的函数;
然后第二个 script 标签载入一个 js 文件，http://example.com/data.php 是数据所在
地址，但是因为是当做 js 来引入的，所以 http://example.com/data.php 返回的必须是一
个能执行的 js 文件;
最后 js 文件载入成功后会执行我们在 url 参数中指定的函数，并且会把我们需要的
json 数据作为参数传入。
15.ajax请求数据步骤：
（1）创建XMLHttpRequest异步对象
var xhr = new XMLHttpRequest()
（2）设置回调函数
xhr.onreadystatechange = callback
（3）使用open方法与服务器建立连接
//get方式
xhr.open("get","test.php",true)
//post方式发送数据需要设置请求头
xhr.open("post","test.php",true)
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
（4）向服务器发送数据
//get不需要传递参数
xhr.send(null)
//post需要传递参数
xhr.send("name=jay&age=18")
（5）在回调函数中针对不同的响应状态进行处理
functioncallback(){
//判断异步对象的状态
if(xhr.readyState==4){
//判断交互是否成功
if(xhr.status==200){
//获取服务器响应的数据
varres=xhr.responseText
//解析数据
res=JSON.parse(res)
}
}
}
扫一扫
1123
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
