.CSS 盒子模型中（padding）是透明的，这部分可以显示背景。

<meta name=”viewport” content=””width=device-width,initial-scale=1”> 表示支持响应式设计

jquery 是JavaScript的类库，主要由ECMAscript（核心） DOM(文档对象模型) BOM（浏览器对象模型）

HTML语义化的理解

1.HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析
2.在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的
3.搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
4.使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解

从浏览器地址栏输入url到显示页面的步骤

浏览器根据请求的url交给dns域名解析，找到真实的ip。向服务器发送请求
服务器交给后台处理完成后返回数据，浏览器接收文件（html js css 图片等）
浏览器对加载的资源进行语法解析，建立相应的内部数据结构（如html和dom
载入解析到的资源文件，渲染页面完成
#HTML全局属性(global attribute)有哪些
class：为元素设置类标签标识
data-：为元素增加自定义属性
draggable：设置元素是否可拖拽
id：元素的唯一
lang：元素内容的语言
style：行内css样式
title：元素相关的信息

请描述一下 cookies，sessionStorage和 localStorage的区别？

cookie是w为了标示用户身份而储存在用户本地终端的数据
cookie数据始终在同源的http·请求中携带，
sessionStorage和localStorage不会把数据发送给服务器
储存大小
cookie数据不能超过4k
sessionStorage和localStorage储存可达到5M或者更大
localStorage储存持久化，浏览器关闭数据不丢失除非主动删除
sessionStorage数据在当前浏览器窗口关闭后自动删除
cookie设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

行内元素有哪些？块级元素有哪些？空(void)元素有那些？行内元素和块级元素有什么区别？

行内： span b a img input select strong
块级：p div ul ol li dd dt h1 h3
空元素： hr br img input link meta
行内元素不可以设置宽高，不独占一行
块级元素可以设置宽高，独占一行

HTTP状态码及其含义

1XX：信息状态码
2XX：成功状态码
3XX：重定向
4XX：客户端错误
5XX: 服务器错误

渐进增强和优雅降级之间的不同吗

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

渲染优化

1.用css3代码代替js动画，避免重绘或者倒流
2.页面中空的src 和href 会阻塞页面其他资源的加载
3.用innerhtml代替dom操作，减少dom操作次数，优化JavaScript性能
4.少用全局变量
5.设置的样式很多时设置className
6.图片预加载，样式表放顶部，脚本放底部加时间戳

网页性能优化

1、减少HTTP请求：合并文件、CSS精灵、inline Image

2、将样式表放到页面顶部

3、不使用CSS表达式

4、使用<link>不使用@import

5、将脚本放到页面底部

6、将javascript和css从外部引入

7、压缩javascript和css

CSS

盒子模型分ie盒模型和标准盒模型

IE盒模型的width/height = content + border + padding
标准盒模型的width/height = content

CSS优先级算法如何计算？

！important id class tag

CSS3有哪些新特性

圆角 阴影 文字特效text-shadow 线性渐变 旋转transfrom

CSS3新增伪类有那些？

：after 在元素之前添加内容，可以用来做清除浮动
：before 在原素之后添加内容
：enabled 已启用的表单元素
：disabled 禁用的表单元素
：checked 单选框或复选框被选中

css 选择器

通配符：*
ID选择器：#ID
类选择器：.class
元素选择器：p、a 等
后代选择器：p span、div a 等
伪类选择器：a:hover 等
属性选择器：input[type=”text”] 等

link与@import的区别

link是HTML方式，@import是CSS方式
link最大限度支持并行下载，@import过多嵌套导致串行下载，出现FOUC(文档样式短暂失效)
link可以通过rel="alternate stylesheet”指定候选样式
浏览器对link支持早于@import，可以使用@import对老浏览器隐藏样式
@import必须在样式规则之前，可以在css文件中引用其他文件
总体来说：link优于@import

绝对定位和相对定位的区别

position: absolute

绝对定位：是相对于元素最近的已定位的祖先元素

position: relative

相对定位：相对定位是相对于元素在文档中的初始位置

display:inline-block什么时候不会显示间隙？

移除空格
使用margin负值
使用font-size:0
letter-spacing
word-spacing

清除浮动的几种方式，各自的优缺点

父级div定义height
结尾处加空div标签 clear：both
父级div定义伪类：after和zoom
父级div定义overflow：hidden
父级也浮动需要定义宽度

为什么要初始化CSS样式?

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化

自适应布局

左侧浮动或者绝对定位，然后右侧margin撑开
使

包含，然后靠负margin形成bfc
使用flex

垂直居中有哪些方法？

单行文本的话可以使用height和line-height设置同一高度。
position+margin：设置父元素:position: relative;，子元素height: 100px;``position:absolute;top: 50%; margin: -50px 0 0 0;（定高）
position+transform：设置父元素position:relative,子元素：position: absolute;``top: 50%;transform: translate(0, -50%);（不定高）
百搭flex布局(ie10+)，设置父元素display:flex;align-items: center;（不定高）

水平居中的方法

元素为行内元素，设置父元素text-align:center
如果元素宽度固定，可以设置左右margin为auto;
如果元素为绝对定位，设置父元素position为relative，元素设left:0;right:0;margin:auto;
使用flex-box布局，指定justify-content属性为center
display设置为tabel-cell

Flex布局

display:flex //设置flex模式
flex-direction：cloumn //决定元素横排还是竖排
flex-wrap:wrap //元素是不是折行
justify-content:space-between //同一排下排列方式
align-items:center //同一排下元素如何对齐
align-content:center //多行对齐方式

CSS3动画（简单动画的实现，如旋转等）

依靠CSS3中提出的三个属性：transition、transform、animation
transition：定义了元素在变化过程中是怎么样的，包含transition-property``、transition-duration、transition-timing-function、transition-delay。
transform：定义元素的变化结果，包含rotate、scale、 skew、translate。
animation：动画定义了动作的每一帧（@keyframes）有什么效果，包括animation-name，animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction

CSS在性能优化方面的实践

css压缩与合并、Gzip压缩
css文件放在head里、不要用@import
尽量用缩写、避免用滤镜、合理使用选择器

stylus/sass/less区别

均具有“变量”、“混合”、“嵌套”、“继承”、“颜色混合”五大基本特性
Scss和LESS语法较为严谨，LESS要求一定要使用大括号“{}”，Scss和Stylus可以通过缩进表示层次与嵌套关系
Scss无全局变量的概念，LESS和Stylus有类似于其它语言的作用域概念
Sass是基于Ruby语言的，而LESS和Stylus可以基于NodeJS NPM下载相应库后进行编译；

如何对一个数组去重？

1.set 结构去重（es6y用法）

1
[...new set(array)]

2.遍历 将值添加到新数组，用indexOf()判断值是否存在，已存在就不添加，达到去重效果。

1
2
3
4
5
6
7
8
9
let a = ['1','2','3',1,NaN,NaN,undefined,undefined,null,null, 'a','b','b'];
let unique = arr =>{
  arr.forEach(key=>{
    if(newA.indexOf(key)<0){
      newA.push(key)
    }
  })
  return newA
}

3.利用for嵌套for，然后splice去重（ES5中最常用）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function unique(arr){            
        for(var i=0; i<arr.length; i++){
            for(var j=i+1; j<arr.length; j++){
                if(arr[i]==arr[j]){         //第一个等同于第二个，splice方法删除第二个
                    arr.splice(j,1);
                    j--;
                }
            }
        }
return arr;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
    console.log(unique(arr))
    //[1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {…}, {…}]     //NaN和{}没有去重，两个null直接消失了

4.forEach遍历，然后利用Object.keys(对象)返回这个对象可枚举属性组成的数组，这个数组就是去重后的数组。

1
2
3
4
5
6
7
8
9
10

let a = ['1', '2', '3', 1,NaN,NaN,undefined,undefined,null,null, 'a', 'b', 'b'];
const unique = arr=>{
  var obj={}
  arr.forEach(val=>{
    obj[val]=0 //这步新添加一个属性，并赋值，如果不赋值的话，属性会添加不上去
  })
  return object.keys(obj)///`Object.keys(对象)`返回这个对象可枚举属性组成的数组，这个数组就是去重后的数组
}
 console.log(unique(a));//["1", "2", "3", "NaN", "undefined", "null", "a", "b"]

var、let、const之间的区别

var、let、const之间的区别
var声明变量可以重复声明，而let不可以重复声明

var是不受限于块级的，而let是受限于块级

var会与window相映射（会挂一个属性），而let不与window相映射

var可以在声明的上面访问变量，而let有暂存死区，在声明的上面访问变量会报错

const声明之后必须赋值，否则会报错

const定义不可变的量，改变了就会报错

const和let一样不会与window相映射、支持块级作用域、在声明的上面访问变量会报错

用JS创建10个标签，点击的时候弹出来对应的序号？(考点：作用域)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var i
for(i=0;i<10;i++){
  (function(i){
    var a = document.createElement('a')
    a.innerHtml = i +'<br>'
    a.addEventListener('click',function(e){
      e.preventDefault()
      alert(i)
    }
    })
    document.body.appendchild(a)

  })(i)
}

数组API

map: 遍历数组，返回回调返回值组成的新数组
forEach: 无法break，可以用try/catch中throw new Error来停止
filter: 过滤
some: 有一项返回true，则整体为true
every: 有一项返回false，则整体为false
join: 通过指定连接符生成字符串
push / pop: 末尾推入和弹出，改变原数组， 返回推入/弹出项【有误】
unshift / shift: 头部推入和弹出，改变原数组，返回操作项【有误】
sort(fn) / reverse: 排序与反转，改变原数组
concat: 连接数组，不影响原数组， 浅拷贝
slice(start, end): 返回截断后的新数组，不改变原数组
splice(start, number, value...): 返回删除元素组成的数组，value 为插入项，改变原数组
indexOf / lastIndexOf(value, fromIndex): 查找数组项，返回对应的下标
reduce / reduceRight(fn(prev, cur)， defaultPrev): 两两执行，prev 为上次化简函数的return值，cur 为当前值(从第二项开始)

获取随机数，要求是长度一致的字符串格式

1
2
3
4
5
var random=Math.random()
var random = random+'0000000000'
console.log(random)
var random = random.slice(0, 10)
console.log(random)

性能优化

javascript性能优化

1
2
3
4
5
6
1、尽可能把 <script> 标签放在 body 之后，避免 JS 的执行卡住 DOM 的渲染，最大程度保证页面尽快地展示出来
2、尽可能合并 JS 代码：提取公共方法，进行面向对象设计等……
3、CSS 能做的事情，尽量不用 JS 来做，毕竟 JS 的解析执行比较粗暴，而 CSS 效率更高。
4、尽可能逐条操作 DOM，并预定好 CSs 样式，从而减少 reflow 或者 repaint 的次数。
5、尽可能少地创建 DOM，而是在 HTML 和 CSS 中使用 display: none 来隐藏，按需显示。
6、压缩文件大小，减少资源下载负担。

JavaScript几条基本规范

1
2
3
4
5
6
7
8
9
1、不要在同一行声明多个变量
2、请使用===/！==来比较true/false或者数值
3、使用对象字面量替代new Array这种形式
4、不要使用全局变量
5、Switch语句必须带有default分支
6、函数不应该有时候有返回值，有时候没有返回值
7、For循环必须使用大括号
8、IF语句必须使用大括号
9、for-in循环中的变量 应该使用var关键字明确限定作用域，从而避免作用域污染
Author: 孟健康
Link: http://yoursite.com/2020/05/28/%E7%AC%94%E8%AF%95%E9%A2%98/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.
欢迎打赏
  • 微信
    微信
  • 支付寶
    支付寶