前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端小知识点总结,助力你成功面试!

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

作者头像
前端老鸟
发布2019-08-22 19:25:35
1K0
发布2019-08-22 19:25:35
举报
文章被收录于专栏: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;的区别

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

=>区别:

代码语言:javascript
复制
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的区别及如何选

代码语言:javascript
复制
参考资料: 选择正确的图片格式 GIF:

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

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

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

CSS有哪些继承属性

代码语言:javascript
复制
关于文字排版的属性如:
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通用属性和方法

代码语言:javascript
复制
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区别

代码语言:javascript
复制
都会在浏览器端保存,有大小限制,同源限制
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跨域通信

代码语言: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有哪几种数据类型

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

什么闭包,闭包有什么用

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

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

javascript有哪些方法定义对象

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

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

代码语言:javascript
复制
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);

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019年08月21日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
内容分发网络 CDN
内容分发网络(Content Delivery Network,CDN)通过将站点内容发布至遍布全球的海量加速节点,使其用户可就近获取所需内容,避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题,有效提升下载速度、降低响应时间,提供流畅的用户体验。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档