

首页  思维导图  详情



面试题总结

2017-03-14 10:04:30   0  举报





仅支持查看

AI智能生成

面试题总结：在面试过程中，常见的问题包括自我介绍、职业规划、工作经验、团队合作、解决问题的能力等。面试官通过这些问题来了解应聘者的能力和适应性。应聘者需要准备充分，清晰表达自己的观点和经验，展示自己的优势和潜力。同时，面试也是双向选择的过程，应聘者也可以提问了解公司文化、团队氛围等问题，以便做出更好的决策。面试结束后，应聘者应及时发送感谢信，表达对面试机会的感激之情，并再次强调自己的兴趣和适应能力。

模版推荐

作者其他创作

大纲/内容

如何自学一门新的编程语言？掌握一门语言的步骤？

1.了解背景：历史、现状、发展趋势、特点、应用领域

2.搭建运行环境，写出Hello World

3.数据类型

4.变量和常量

5.运算符

6.逻辑结构

7.通用小程序（任何语言都可以写出来）

8.函数和对象

9.常用预定义函数、对象、组件、第三方工具、框架

10.实用小项目

你常用的web学习网站有哪些？

下载安装包

官网

www.oracle.com

国内镜像网站

mirrors.sohu.com

维基百科

wikipedia.org

必应

github

开源代码

文件压缩网站

tool.oschina.net/jscompress

YUI.Compressor(java)

大批量js压缩软件

浏览器的内核

trident内核

Firefox

gecko内核

Safari

webkit内核

Opera

Blink内核

Chrome

Blink内核

 一次完整的HTTP事务事是怎样的一个过程

基本流程

1.域名解析

2.发起TCP的3次握手

3.建立TCP连接后发起http请求

4.服务器端响应http请求，浏览器得到html代码

5.浏览器解析html代码，并请求html代码中的资源

6.浏览器对页面进行渲染呈现给用户

对前端工程师这个职位你是怎么样理解的？

1.前端是最贴近用户的程序员，前端的能力就是能让产品从90分进化到100分，甚至更好

2.参与项目，快速高质量完成实现效果图，精确到1px

3.与团队成员，UI设计，产品经理的沟通

4.做好页面结构，页面重构和用户体验

5.处理hack,兼容、写出优美的代码格式

hack的概念

我们对于CSS来说他们解决各浏览器对CSS解释不同所采取的区别不同浏览器制作不同的CSS样式的设置来解决这些问题就叫做CSS hack

6.针对服务器的优化、拥抱最新前端技术

PS相关知识

设置背景

Alt+Delete

黑背景

Ctrl+Delete

白背景

雪碧图中将白背景要隐藏

图的保存

静态图的存储 （雪碧图）

普通存储

文件名  .psd

类型  *.pad;*.pdd

存储为

普通存储

GIF

PNG

透明背景

JPG

存储为web格式

PNG

JPG

格式仅限图像

动态图的存储

切片工具

只要蓝色的用户切片

视图--->清除切片

点击图片右键，编辑切片选项

按shift键，可以同时选中多个

存储为web格式

PNG-8

注意：不用选中所有用户切片，只需要选中切片即可

必须要注意的事项

1.进行操作的文件必须是PSD文件，因为脚本的运行依据是图层，只有PSD文件才存在图层

web前端必备的知识体系

CSS3和HTML5

CSS3

1.

圆角

border-radius

阴影

box-shadow

对文字添加特效

text-shadow

线性渐变

gradient

旋转

transform

rotate(9deg)

旋转

scale(0.85,0.9)

缩放

translate(0px,-30px)

定位

skew(-9deg,0deg)

倾斜

增加了更多的CSS选择器

1.兄弟选择器

1.相邻兄弟选择器

选择器1+选择器2

兄弟选择器只能向后找，不能向前找

2.通用兄弟选择器

选择器1~选择器2

匹配某元素后面的所有兄弟元素

2.属性选择器

1.[attr]

匹配页面中所有附带attr属性的元素

2.elem[attr]

匹配页面中所有附带attr属性的elem元素

3.[attr1][attr2]..

匹配既附带attr1，同时又附带attr2属性的页面元素

4.[attr=value]

匹配页面中附带attr属性并且值为value的页面元素

5.[class~=value]

匹配页面中附带class属性的元素，class属性值是以空格隔开的值列表，并且value是该列表中的一个独立的值

6.[attr^=value]

匹配页面中附带attr属性，并且值以value字符作为开始的元素

7.[attr*=value]

匹配页面中附带attr属性，并且值中包含value字符的页面元素

8.[attr$=value]

匹配页面中附带attr属性，并且值是以value字符结尾的页面元素

3.伪类选择器

1.目标伪类

:target

突出显示活动的HTML锚元素

2.元素状态伪类

:enabled

匹配每个已启用的元素

:disabled

匹配每个被禁用的元素

:checked

匹配每个被选中元素

只在radio、checkbox中用

3.结构伪类

:first-child

匹配属于其父元素中的首个子元素

:last-child

匹配属于其父元素中的最后一个子元素

:nth-child(n)

匹配属于其父元素中的第n个子元素

第一个n不变，第二个n为数字

:empty

匹配没有子元素的每个元素

:only-child

匹配属于其父元素的唯一子元素

4.否定伪类

:not(选择器)

将满足选择器的元素排除出去

4.伪元素选择器

:first-字符  或者::first-字符

匹配指定元素的首字符

:first-line 或者::first-line

匹配指定元素的首行

注意：以上两个同时出现时，以首字符为主

::selection

用于匹配用户选区的部分

只能做背景颜色和文本颜色

注意

:和::的区别

:在CSS2中使用，既能表示伪类选择器，也能表示伪元素选择器

::主要在CSS3中使用，只表示伪元素选择器

为了兼容性，尽可能使用 : 来代替 ::

多背景  rgb

4.在CSS3中唯一引入的伪元素是::selection

5.媒体查询，多栏布局

6.border-image

HTML5

1.表单2.0

1.表单新特性

type

旧的（HTML）

text

文本框

password

密码框

radio

单选按钮

checkbox

复选框

file

文本选择框

button

普通按钮

submit

提交按钮

reset

重置按钮

image

图片

hidden

隐藏域

新的（HTML5）

提供邮箱格式的验证

谷歌和火狐样式的提示不同

\w{1,}@\w{1,}\

url

提供url验证

[a-zA-Z]{1}

number

提供数字格式验证

三个属性

max   最大值

min  最小值

step   步长

输入的值不在范围，会报错

tel

电话号码

没验证  因为国际标准不一样

搜索

右侧 X

谷歌有  火狐没有

range

范围选择：滑动块

max    最大值

min    最小值

step   步长

value   初始值

color

颜色选择

弹出框，windows自带颜色

日期

date

总日期

弹出框{FF没有实现}

month

月

week

星期

2.新的表单元素

datalist

数据列表

应用后是不可见的

progress

进度条

min

max

value

meter

刻度尺

min

最低值

low

低值

optimum

最优值

最优值在上限之上

红——黄——绿

最优值在上限和下限之间

黄——绿——黄

最优值在下限之下

绿——黄——红

hign

高值

max

最高值

value

当前值

output

输出

注意：上述四个新元素仅用于提示，用户无法操作，也无法随着表单输入进行提交

3.表单元素的新属性

autofocus

自动获得焦点

autocomplete

true/false

记录输入的内容、提示

placeholder

占位

multiple

输入多个值，分隔符是逗号

form

作用：将输入域放置在表单外面

required

minlength

maxlength

min

max

pattern

2.视频和音频

<video> 视频

src

视频的路径

controls

是否显示控件

兼容性差

autoplay

是否自动播放，默认不播放

loop

是否循环播放

poster=“”

海报（播放之前有张海报，播放的时候就没有了）

preload="auto"

预加载

<audio>  音频

3.绘图

Canvas绘图

获得画笔

var ctx=cl.getContext('2d')

流程

设置样式

ctx.fillStyle

填充的样式

ctx.strokeStyle

描边样式

ctx.lineWidth

描边宽度

画图

绘制矩形

ctx.fillRect( )  填充一个矩形

ctx.strokeRect( )  描边一个矩形

ctx.clearRect( )  清除矩形

绘制文本

ctx.fillText( )   填充一个文本

txt   文本

ctx.strokeText( )   描边文本

ctx.measureText(txt).width

文本宽度

绘制路径

注意：路径本身不可见，只有填充或者描边才可见

ctx.beginPath( )

开始一个路径

ctx.moveTo( )   移动

ctx.lineTo( )

绘制线

ctx.arc( ) 绘制圆

圆点

起始角度

结束角度

角度

弧度

角度

公式：

弧度=90*Math.PI/180

ctx.closePath( )

闭合路径

ctx.fill( )

ctx.stroke( )

绘制图像

ctx.drawImage( 图片的对象,x,y)

ctx.drawImage(图像对象,x,y,w,h)

缩放图片

理论：使用方法

图片对象加载有时间

流程：

创建对象

var img=new Image( )

为对象的src属性赋值

img.src="img/1.jpg"

为对象绑定事件.onload

图片加载后触发

img.onload

绘制图片对象

图像相关

ctx.rotate(角度)

旋转：累加

ctx.translate(x,y)

修改圆点坐标

SVG绘图

创建2种方式

第一种

创建一个.svg文件----XML文件

加载img  object embed

第二种

绘制矩形

绘制圆形

绘制椭圆

绘制直线

x1  y1起点坐标

x2  y2重终点坐标

必须声明stroke

绘制折线

通常在折线里fill为透明   fill="transparent"

绘制多边形

多边形和折线的区别

多边形会自动闭合到起始点

折线不会自动闭合

绘制文本

默认基线是第三根线

svg中的文字是可以选中----标签的innerHTML

canvas中fillText( )做不到

svg中的文字内容能够被搜索引擎查询到

排名会靠前

如果是图片搜索引擎的爬虫是搜索不到内容，但是如果是标签就可以搜索到了

绘制图像

注意：image标签在svg内部使用

绘制渐变

定义和使用特效

1.先定义特效（渐变）

2.在某个元素中应用特效

渐变色的区别

1.当y1和y2相等，而x1和x2不同时，水平渐变

2.当x1和x2相等，而y1和y2不同时，垂直渐变

3.当y1和y2不相等，而x1和x2不不同时，角形渐变

特殊：分组

<g></g>

</svg>

注意：在JS里只能用原生DOM

理论：canvas和svg绘图的不同和和区别

操作图片不同

canvas

位图

图片由像素组成，放大失真

svg

矢量图

图片由路径组成，放大不失真

区别

canvas

位图

颜色细腻，缩放失真

绘图js,每一个图形不是html标签

只能为canvas绑定事件

统计图，图形密集型游戏

svg

矢量图

缩放不失真，颜色不够细腻

由标签组成，每个图形都是一个html标签

为每个图形绑定事件

统计图，图标，地图应用

webGL

4.地理定位

读取数据的方法

window.navigator.geolocation{ getCurrentPosition(succCB,errCB);warchPosition( );clearWarch( )}

第三方API

百度地图API

官网：lbsyun.baidu.com

微信/微博API

API：应用程序开发接口

url

函数

对象

5.拖放API

七个事件

源对象可以触发的事件

src.onchange

目标对象可以触发的事件

6.Web Worker

7.Web Storage

8.Web Socket

CSS的选择器有哪些

派生选择器

id选择器

类选择器

属性选择器

后代选择器

子代选择器

群组选择器

浏览器对象模型BOM里常用的对象，window对象的常用方法

对象

window

常用方法

alert( )

confirm( )

prompt( )

open( )

close( )

document

location

screen

history

navigator

介绍下你对浏览器内核的理解

2部分

渲染引擎

负责取得网页的内容（HTML、XML、图像等）、整理讯息，以及计算网页的显示方式，然后输出至显示器或打印机

JS引擎

解析和执行javascript来实现网页的动态效果

简述一下你对HTML语义化的理解

用正确的标签做正确的事情

html语义化让页面的内容结构化，结构更加清晰、便于对浏览器、搜索引擎解析

即使在没有CSS样式的情况下也以一种文档格式显示，并且是容易阅读的

线程与进程的区别

一个程序至少有一个进程，一个进程至少有一个线程

表设计有问题，少列

解决

1.如果数据量不大

追加列   ALTER  TABLE

 Collect

Get Started

(100%)kafka产品生态与kafka面试题

 Collect

Get Started

zookeeper面试题总结

 Collect

Get Started

Spring面试题

 Collect

Get Started

Redis面试题





0 条评论

下一页