专栏首页front-end technology前端小知识点总结,助力你成功面试!

前端小知识点总结,助力你成功面试!

1.Doctype的作用:此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。 2.严格模式与混杂模式如何区分?有何意义? 区分浏览器的使用的标准 3.什么是web语义化,有什么好处? =>去掉样式后页面呈现清晰的结构 =>盲人使用读屏器更好地阅读 =>搜索引擎更好地理解页面,有利于收录 =>便团队项目的可持续运作及维护

4.如何进行网站性能优化 1.前端方面: =>减少HTTP请求:合并文件、CSS精灵、inline Image =>减少DNS查询:DNS查询完成之前浏览器不能从这个主机下载任何任何文件。方法:DNS缓存、将资源分布到恰当数量的主机名,平衡并行下载和DNS查询 =>避免重定向:多余的中间访问 =>使Ajax可缓存 =>非必须组件延迟加载 =>未来所需组件预加载 =>减少DOM元素数量 =>将资源放到不同的域下:浏览器同时从一个域下载资源的数目有限,增加域可以提高并行下载量 =>减少iframe数量 =>不要404

2.Server方面

=>使用CDN =>添加Expires或者Cache-Control响应头 =>对组件使用Gzip压缩 =>配置ETag =>Flush Buffer Early =>Ajax使用GET进行请求 =>避免空src的img标签

3.Cookie方面 =>减小cookie大小 =>引入资源的域名不要包含cookie =>css方面 =>将样式表放到页面顶部 =>不使用CSS表达式 =>使用不使用@import =>不使用IE的Filter 4.Javascript方面 =>将脚本放到页面底部 =>将javascript和css从外部引入 =>压缩javascript和css =>删除不需要的脚本 =>减少DOM访问 =>合理设计事件监听器 5.图片方面 =>优化图片:根据实际颜色需要选择色深、压缩 =>优化css精灵 =>不要在HTML中拉伸图片 =>保证favicon.ico小并且可缓存 6.移动方面 =>保证组件小于25k =>Pack Components into a Multipart Document

1.css sprite是什么,有什么优缺点

=>概念:将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案。

1.优点: 减少HTTP请求数,极大地提高页面加载速度 增加图片信息重复度,提高压缩比,减少图片大小 更换风格方便,只需在一张或几张图片上修改颜色或样式即可实现

2.缺点: 图片合并麻烦 维护麻烦,修改一个图片可能需要从新布局整个图片,样式

1.display: none;与visibility: hidden;的区别

=>联系:它们都能让元素不可见

=>区别:

display:none;会让元素完全从渲染树中消失,渲染的时候不占据任何空间;visibility: hidden;不会让元素从渲染树消失,渲染师元素继续占据空间,只是内容不可见
display: none;是非继承属性,子孙节点消失由于元素从渲染树消失造成,通过修改子孙节点属性无法显示;visibility: hidden;是继承属性,子孙节点消失由于继承了hidden,通过设置visibility: visible;可以让子孙节点显式
修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘。
读屏器不会读取display: none;元素内容;会读取visibility: hidden;元素内容

display: block;和display: inline;的区别

block元素特点:

1.处于常规流中时,如果width没有设置,会自动填充满父容器
2.可以应用margin/padding
3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素
4.处于常规流中时布局时在前后元素位置之间(独占一个水平空间)
5.忽略vertical-align

inline元素特点

1.水平方向上根据direction依次布局
2.不会在元素前后进行换行
3.受white-space控制
4.margin/padding在竖直方向上无效,水平方向上有效
5.width/height属性对非替换行内元素无效,宽度由元素内容决定
6.非替换行内元素的行框高由line-height确定,替换行内元素的行框高由height,margin,padding,border决定
7.浮动或绝对定位时会转换为block
8.vertical-align属性生效
复制代码

PNG,GIF,JPG的区别及如何选

参考资料: 选择正确的图片格式 GIF:

8位像素,256色
无损压缩
支持简单动画
支持boolean透明
适合简单动画
JPEG:

颜色限于256
有损压缩
可控制压缩质量
不支持透明
适合照片
PNG:

有PNG8和truecolor PNG
PNG8类似GIF颜色上限为256,文件小,支持alpha透明度,无动画
适合图标、背景、按钮
复制代码

CSS有哪些继承属性

关于文字排版的属性如:
font
word-break
letter-spacing
text-align
text-rendering
word-spacing
white-space
text-indent
text-transform
text-shadow
line-height
color
visibility
cursor
复制代码

XMLHttpRequest通用属性和方法

readyState:表示请求状态的整数,取值:
UNSENT(0):对象已创建
OPENED(1):open()成功调用,在这个状态下,可以为xhr设置请求头,或者使用send()发送请求
HEADERS_RECEIVED(2):所有重定向已经自动完成访问,并且最终响应的HTTP头已经收到
LOADING(3):响应体正在接收
DONE(4):数据传输完成或者传输产生错误
onreadystatechange:readyState改变时调用的函数
status:服务器返回的HTTP状态码(如,200, 404)
statusText:服务器返回的HTTP状态信息(如,OK,No Content)
responseText:作为字符串形式的来自服务器的完整响应
responseXML: Document对象,表示服务器的响应解析成的XML文档
abort():取消异步HTTP请求
getAllResponseHeaders(): 返回一个字符串,包含响应中服务器发送的全部HTTP报头。每个报头都是一个用冒号分隔开的名/值对,并且使用一个回车/换行来分隔报头行
getResponseHeader(headerName):返回headName对应的报头值
open(method, url, asynchronous [, user, password]):初始化准备发送到服务器上的请求。method是HTTP方法,不区分大小写;url是请求发送的相对或绝对URL;asynchronous表示请求是否异步;user和password提供身份验证
setRequestHeader(name, value):设置HTTP报头
send(body):对服务器请求进行初始化。参数body包含请求的主体部分,对于POST请求为键值对字符串;对于GET请求,为null
复制代码

sessionStorage,localStorage,cookie区别

都会在浏览器端保存,有大小限制,同源限制
cookie会在请求时发送到服务器,作为会话标识,服务器可修改cookie;web storage不会发送到服务器
cookie有path概念,子路径可以访问父路径cookie,父路径不能访问子路径cookie
有效期:cookie在设置的有效期内有效,默认为浏览器关闭;sessionStorage在窗口关闭前有效,localStorage长期有效,直到用户删除
共享:sessionStorage不能共享,localStorage在同源文档之间共享,cookie在同源且符合path规则的文档之间共享
localStorage的修改会促发其他文档窗口的update事件
cookie有secure属性要求HTTPS传输
浏览器不能保存超过300个cookie,单个服务器不能超过20个,每个cookie不能超过4k。web storage大小支持能达到5M
复制代码

javascript跨域通信

同源:两个文档同源需满足

协议相同
域名相同
端口相同
跨域通信:js进行DOM操作、通信时如果目标与当前窗口不满足同源条件,浏览器为了安全会阻止跨域操作。跨域通信通常有以下方法

如果是log之类的简单单项通信,新建<img>,<script>,<link>,<iframe>元素,通过src,href属性设置为目标url。实现跨域请求
如果请求json数据,使用<script>进行jsonp请求
现代浏览器中多窗口通信使用HTML5规范的targetWindow.postMessage(data, origin);其中data是需要发送的对象,origin是目标窗口的origin。window.addEventListener('message', handler, false);handler的event.data是postMessage发送来的数据,event.origin是发送窗口的origin,event.source是发送消息的窗口引用
内部服务器代理请求跨域url,然后返回数据
跨域请求数据,现代浏览器可使用HTML5规范的CORS功能,只要目标服务器返回HTTP头部Access-Control-Allow-Origin: *即可像普通ajax一样访问跨域资源
复制代码

javascript有哪几种数据类型

六种基本数据类型
undefined
null
string
boolean
number
symbol(ES6)(需要重点了解)
一种引用类型
Object
复制代码

什么闭包,闭包有什么用

闭包是在某个作用域内定义的函数,它可以访问这个作用域内的所有变量。闭包作用域链通常包括三个部分:

函数本身作用域。
闭包定义时的作用域。
全局作用域。
闭包常见用途:
创建特权方法用于访问控制
事件处理程序及回调
复制代码

javascript有哪些方法定义对象

对象字面量: var obj = {};
构造函数: var obj = new Object();
Object.create(): var obj = Object.create(Object.prototype);
复制代码

评价一下三种方法实现继承的优缺点,并改进

function Shape() {}

function Rect() {}

// 方法1
Rect.prototype = new Shape();

// 方法2
Rect.prototype = Shape.prototype;

// 方法3
Rect.prototype = Object.create(Shape.prototype);

Rect.prototype.area = function () {
  // do something
};
复制代码

数组去重: splice(0,1) slice数组的截取返回一个数组 var slice = Array.prototype.slice // 无法打印这些值 var myvar = "my value"; (function() { console.log(myvar); var myvar = "local value"; })();

//数组的方法 1.concat() 连接两个数组并返回一个新的数组。 2.join()将数组的所有元素连接成一个字符串。 3.push() 在数组末尾添加一个或多个元素,并返回数组操作后的长度。 4.pop() 从数组移出最后一个元素,并返回该元素。 5.shift() 从数组移出第一个元素,并返回该元素。 6.unshift() 在数组开头添加一个或多个元素,并返回数组的新长度。 7.slice(start_index, upto_index) 从数组提取一个片段,并作为一个新数组返回。 8.splice(index, count_to_remove, addElement1, addElement2, ...)从数组移出一些元素,(可选)并替换它们。 9.reverse() 颠倒数组元素的顺序:第一个变成最后一个,最后一个变成第一个。 10.sort() 给数组元素排序。 11.indexOf(searchElement[, fromIndex]) 在数组中搜索searchElement 并返回第一个匹配的索引。 12.lastIndexOf(searchElement[, fromIndex]) 和 indexOf差不多,但是是从结尾开始,并且是反向搜索。 13.forEach(callback[, thisObject]) 在数组每个元素项上执行callback。 14.map(callback[, thisObject]) 在数组的每个单元项上执行callback函数,并把返回包含回调函数返回值的新数组。 》译者注:也就是遍历数组,并通过callback对数组元素进行操作,并将所有操作结果放入数组中并返回该数组。 15.filter(callback[, thisObject]) 返回一个包含所有在回调函数上返回为true的元素的新数组。 》译者注:callback在这里担任的是过滤器的角色,当元素符合条件,过滤器就返回true,而filter则会返回所有符合过滤条件的元素。 16.every(callback[, thisObject]) 当数组中每一个元素在callback上被返回true时就返回true。 》译者注:同上,every其实类似filter,只不过它的功能是判断是不是数组中的所有元素都符合条件,并且返回的是bool值。 17.some(callback[, thisObject]) 只要数组中有一项在callback上被返回true,就返回true。 》译者注:同上,类似every,不过前者要求都符合筛选条件才返回true,后者只要有符合条件的就返回true。 18.reduce(callback[, initialValue]) applies callback(firstValue, secondValue) to reduce the list of items down to a single value. 19.reduceRight(callback[, initalvalue]) 和 reduce()相似,但是是从最后一个元素开始的。

一.对象的使用,这对程序的理解至关重要 1.for(var i in obj) { if(obj.hasOwnProperty(i)) { console.log(i); } } 2.判断对象是否有某个属性 从 ECMAScript 5 开始,有三种原生的方法用于列出或枚举对象的属性: 1.for...in 循环 该方法依次访问一个对象及其原型链中所有可枚举的属性。 2.Object.keys(o) 该方法返回一个对象 o 自身包含(不包括原型中)的所有属性的名称的数组。 3.Object.getOwnPropertyNames(o) 该方法返回一个数组,它包含了对象 o 所有拥有的属性(无论是否可枚举)的名称。 3.定义 getter 与 setter 一个 getter 是一个获取某个特定属性的值的方法。 一个 setter 是一个设定某个属性的值的方法。 你可以为预定义的或用户定义的对象定义 getter 和 setter 以支持新增的属性。 定义 getter 和 setter 的语法采用对象字面量语法。 4.你可以用 delete 操作符删除一个不是继承而来的属性。

一.支付宝的面试题 1.深浅拷贝 2.react 3.react-native 4.vue 5.原生的js 6.github 7.基本的数据类型: null undefined object string number boolean 8.null和undefined 9.数组的一些操作方法 push pop shift unshift slice splice indexof lastIndex 10.typeof null === object 11.instanceof 12.数据的操作方法 1.深浅拷贝(进行stringify和parse) var o = { x: 1, y: { z: [false, null, ''] } };

var s = JSON.stringify(o);

p = JSON.parse(s);

console.log(o, p);

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • css 对元素在文档中的排列的影响

        2)、position 的属性值为: absolute | relative,且 z-index 值不为 auto ;

    前端老鸟
  • 下一代的web应用-pwa,它将成为你未来的核心竞争力!

    PWA模型将继约20年前横空出世的Ajax与约10年前风靡移动互联网的响应式设计一样,掀起web应用模型的第三次革命技术,将web技术带进一个全新的时代

    前端老鸟
  • 都2019年下半年了,今年新热技术都在这里!抓紧时间搞起来!

    互联网发展迅速,不进步就等于在落后,2019年前半年都要过去了,热门新技术你掌握了吗?

    前端老鸟
  • 最全的数组操作方法,你造吗?

    在 JavaScript 中,对于数组的操作非常频繁,对应的 API 也很丰富 。ECMAScript 规范在每一版发布时,都会提供新的 API 来增强数组的操...

    grain先森
  • CSS中伪类与伪元素,你弄懂了吗?

    熟悉前端的人都会听过css的伪类与伪元素,然而大多数的人都会将这两者混淆。本文从解析伪类与伪元素的含义出发,区分这两者的区别,即使你有用过伪类与伪元素,但里面总...

    Javanx
  • 布隆过滤器

    之前读吴军《数学之美》的时候提到布隆过滤器,觉得蛮有意思的,所以总结一下。 在计算机中,判断一个元素是不是在一个集合中,通常是用hash来解决,这在数据量不大的...

    Leetcode名企之路
  • HTML基础知识普及

    <meta charset="utf-8"> 规定页面的字符编码 <meta name="viewport" content="width=device...

    lesM10
  • “面试不败计划”:集合、日期、异常、序列化、其他知识点

    好好学java
  • 语言小知识-Java ArrayList类 深度解析

    花了一天时间,翻译了一遍 java.util.ArrayList 类的源码(1700 多行,还是很有收获的),包括注释和代码解读,并提了一些问题,也写了下自己的...

    Wizey
  • 死磕 java集合之ArrayDeque源码分析

    通过继承体系可以看,ArrayDeque实现了Deque接口,Deque接口继承自Queue接口,它是对Queue的一种增强。

    彤哥

扫码关注云+社区

领取腾讯云代金券