前端常见的知识点（一）

来源：互联网发布：银行管理系统java 编辑：程序博客网时间：2024/06/10 12:25

各个浏览的内核和前缀

Chrome：webkit -webkit-

Safari： webkit -webkit-

Firefox：gecko -moz-

IE：trident -ms-

opera：presto -o-

所谓的浏览器内核就是浏览器所采用的渲染引擎，渲染引起决定了浏览器如何显示网页的内容及页面的格式信息

css

1.常见的空标签：<br> <hr> <img> <link>（css规范规定：每个元素都会有display属性，确定该元素的类型，每个元素都有默认值）

2.要想写出跨浏览的CSS，必须要知道浏览器解析CSS的两种模式：标准模式和怪异模式

标准模式：浏览器按照W3C的标准执行代码

怪异模式：浏览器按照自己的方式执行代码，不同的浏览器执行方式不一样

如何判断浏览器到底怎么解析文档，就是在网页中的DTD声明直接相关，DTD声明顶了标准文档的类型

3.display的属性值

list-item：此元素会作为列表显示

inlin-block：既具有block的宽高由具有inline的同行元素特性

flex：设置为flex后，子元素的float、clear和vertical-align属性将失效

4.未知div大小，实现垂直水平居中与浏览器中的实现方式

<!DOCTYPE html>  <html>  <head>      <title>未知div大小，垂直水平居中</title>      <meta charset="utf-8">      <style type="text/css">    *{margin:0;padding:0;}     div{    border:1px solid #000;    position: absolute;// 主要代码    left: 50%;    top:50%;    transform:translate(-50%,-50%);    }    </style> <body>    <div>  hello<br>  hello word<br>  hello everyone<br>  hello<br>  hello word<br>  hello everyone  </div></body>  </html>

<!DOCTYPE html>  <html>  <head>      <title>未知div大小，垂直水平居中</title>      <meta charset="utf-8">      <style>    *{margin:0;padding:0;}    html,body{height:100%;}    body{display:flex;align-items:center;justify-content:center;}    </style>    <div>         hello<br>        hello<br>        hello<br>        hello     </div>  </div>  </body>  </html>

5.清除浮动的方式有

1）给父元素定义高度

2）clear：both

3）定义伪类after和zoom

4）父级定义overflow：hidden

6.盒模型

1）content+padding+margin+border

2）IE下：content包括padding+border

7.引入css文件有三种方式

1）行内式：<p style="color:red;">123</p>

2）内嵌式：<style></style>

3）外链式：<link rel="stylesheet" type="text/css" href="路径">

8.浏览器兼容性问题：

（1）每个浏览器默认的内外补丁都不同，所以在编写代码时，都要清除内外补丁 *{margin：0；padding：0；}

（2）几个img标签放在一起的时候，有些浏览器会有默认的间距，清除内外补丁也没有作用，img标签添加float属性，就可以解决了

（3）IE6认识的hack 是下划线_ 和星号 *

IE7 认识的hack 是星号 *

比如：height:300px;*height:200px;_height:100px;

IE6浏览器在读到height:300px的时候会认为高时300px；继续往下读，他也认识*heihgt，所以当IE6读到*height:200px的时候会覆盖掉前一条的相冲突设置，认为高度是200px。继续往下读，IE6还认识_height,所以他又会覆盖掉200px高的设置，把高度设置为100px；最后识别的height：100px

9.DOCTyps作用：告知浏览器的解析器用什么文档标准解析这个文档

标准模式：排版和js运作都是以浏览器支持的最高标准在运行

兼容模式：页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为防止站点无法工作

HTML5

1.HTML5中form表单中新的输入控件

email：电子邮箱文本框，输入不是邮箱的时候，验证不能通过

tel：电话号码

url：网页的URL

number：只能包含数字的输入框

color：颜色选择器

datetime：显示完整的日期

time：显示时间，不含时区

date：显示日期

2.解决HTML5新标签的浏览器兼容问题：在IE6/7/8下，支持document.createElement（）方法产生的标签，可以根据这种方式创建出HTML的新标签，需要添加默认的样式

3.对语义化标签的理解：让页面内容简洁化，结构更清晰，便于浏览器搜索引擎解析，同时便于阅读代码的人对网站更容易的分块

1.如何减少HTTP请求，提高性能

1）CSS Scriptes（CSS精灵图）：每个图片的加载都会发送一个HTTP请求，把全网站的图标都放在一个图像文件中，用CSS的 background-iamge和background-position属性来定位像是其中的一小部分。

2）js和css文件都只存在一份：合并脚本和css文件，可以减少HTTP请求。

2.面向对象

面向对象中：对象下的变量叫属性，对象下的函数叫方法

js的封装：js只有私有和公有两个封装方式

js的继承：不是通过关键字extends，而是通过对象和原型链的方式来完成继承的

js的多态：它本身无态，无态就是多态的一种体现

原型链：实例对象与原型之间的链接，叫做原型链

原型链的最外层：object.prototype

原型：改写对象下的属性或者方法，让相同的属性或者方法在内存中只存在一份，好处就是可以提高性能

3.对作用域的理解：作用域链的作用就是保证执行环境里有权访问变量和函数是有序的，作用域链的变量只能向上访问，变量访问到window对象就终止，作用域链向下访问变量是不被允许的。

4.Ajax请求过程

1）创建一个XMLHTTPRequest对象，也就是创建一个异步调用对象

2）创建一个新的HTTP请求，同时指定该请求的方式，URL及验证信息

3）设置相应HTTP请求状态变化函数

4）发送HTTP请求

5）获取异步调用返回的数据

6）使用js和DOM来实现局部刷新

5.js跨域请求的方式

1）通过jsonp跨域

2）通过修改window.domain来跨子域

3）用PHP来请求数据，ajax请求PHP中的数据（数据代理）

6.前端性能优化的方式

1）减少DOM操作（DOM操作会重新渲染DOM树）

2）部署前，图片压缩，代码压缩

3）优化js代码，减少冗余代码

4）减少HTTP请求

7.常见的HTTP状态码

200：请求成功

400：发送了一个错误的请求

404：请求失败，未找到请求的资源

500：服务器遇到一个错误，使其无法为请求提供服务

8.js中常见的数据类型：String、Number、Boolean、null、undefined

9.js闭包：js在函数内部可以读取全局变量，在函数外部无法读取局部变量

10.事件委托：捕获、目标、冒泡（IE9不支持冒泡，解决办法就是为父元素添加事件监听，减少DOM的重排和重绘）

11.如何获取对象，对象元素

document.getElementById('id')document.getElementsByTagName('a')

12.Ajax请求数据时，get和post的区别

get：将获取的数据存放在url中，保密性不好，存储的数据有限，并且需要encodeURLComponent编码

post：将数据存放在natwork中，保密性好，可以存放大量数据，但是需要send（）方法

13.Ajax优点：（1）通过异步刷新，提升用户体验

（2）优化了浏览器和服务器之间的传输，减少了不必要的数据往返，减少宽带占用

（3）减少了大用户量下的服务器负载

（4）实现动态不刷新

Ajax缺点：（1）暴露了与服务器交互细节

（2）不容易调试

14.添加、移除、移动、复制、创建和查找节点

（1）创建新节点

document.createElement（‘标签名称’）// 创建一个具体元素

（2）添加、移除、替换、插入

appendChild()removeChild() replaceChild()insertBefore()

（3）查找

getElementsByTagName（）// 通过标签名称

getElementById（）// 通过元素Id，唯一属性

getElementsByName（）// 通过元素的Name属性值

15.js中的内置对象：

数据封装类对象：object、Array、Boolean、number、string

其他对象：function、arguments、match、date

16.this对象的理解：

（1）this总是指向函数的直接调用者

（2）如果有new关键字，this指向new出来的对象

（3）在事件中，this指向触发这个事件的对象，在IE中attachEvent中this总是指向window

17.数组去重

var arr = [1,4,7,1,4,7,2,5,8];   var arr2 = [];   for(var i=0;i<arr.length;i++){   if(arr2.indexOf(arr[i]) == -1){   arr2.push(arr[i]);   }   }console.log(arr2);

18.随机数组中，数组可能包含数组，将数组 [1,[2,3,4],5,[6,7],8]，最后转换为[1, 2, 3, 4, 5, 6, 7, 8]

var arr = [1,[2,3,4],5,[6,7],8];var arr2 = [];for(var i=0;i<arr.length;i++){if(arr[i].length == undefined){arr2.push(arr[i]);}if(arr[i].length !=1){for(var j=0;j<arr[i].length;j++){arr2.push(arr[i][j]);}}}console.log(arr2);

移动端

1.移动端的默认样式：

默认字体设置：helvetica

清除点击的阴影：-webkit-tap-highlight-color

消除按钮圆角：-webkit-appearance （想要彻底的删除加上：border-radius:0）

禁止文字的缩放：-webkit-text-size-adjust:100%

选中文字设置：-webkit-user-select:none（不可以选中文字，有兼容性问题）

2..IOS10下设置meta禁止用户缩放是不可行的，可以用阻止PC事件document.addEventListenter（‘touchstart’，function（ev）{ev.preventDefault（）}）解决

阅读全文

0 0