面试题总结
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压缩软件
浏览器的内核
IE
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
2.
对文字添加特效
text-shadow
线性渐变
gradient
旋转
transform
rotate(9deg)
旋转
scale(0.85,0.9)
缩放
translate(0px,-30px)
定位
skew(-9deg,0deg)
倾斜
3.
增加了更多的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）
email
提供邮箱格式的验证
谷歌和火狐样式的提示不同
\w{1,}@\w{1,}\
url
提供url验证
[a-zA-Z]{1}
number
提供数字格式验证
三个属性
max 最大值
min 最小值
step 步长
输入的值不在范围，会报错
tel
电话号码
没验证 因为国际标准不一样
search
搜索
右侧 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
作用：将输入域放置在表单外面
<input type="text" form="表单id">
required
minlength
maxlength
min
max
pattern
2.视频和音频
<video> 视频
src
视频的路径
controls
是否显示控件
兼容性差
autoplay
是否自动播放，默认不播放
loop
是否循环播放
poster=“”
海报（播放之前有张海报，播放的时候就没有了）
preload="auto"
预加载
<audio> 音频
3.绘图
Canvas绘图
<canvas width="" height="">
获得画笔
var ctx=cl.getContext('2d')
流程
设置样式
ctx.fillStyle
填充的样式
ctx.strokeStyle
描边样式
ctx.lineWidth
描边宽度
画图
绘制矩形
ctx.fillRect( ) 填充一个矩形
x
y
w
h
ctx.strokeRect( ) 描边一个矩形
ctx.clearRect( ) 清除矩形
绘制文本
ctx.fillText( ) 填充一个文本
txt 文本
x
y
ctx.strokeText( ) 描边文本
ctx.measureText(txt).width
文本宽度
绘制路径
注意：路径本身不可见，只有填充或者描边才可见
ctx.beginPath( )
开始一个路径
ctx.moveTo( ) 移动
x
y
ctx.lineTo( )
绘制线
ctx.arc( ) 绘制圆
cx
圆点
cy
圆点
r
起始角度
结束角度
角度
弧度
角度
公式：
弧度=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
第二种
<svg width="" heigth="">
绘制矩形
<rect width="" height="" x="" y=""></rect>
绘制圆形
<circle r="" cx="" cy=""></circle>
绘制椭圆
<ellipse rx="横向半径" ry="纵向半径" cx="" cy=""></ellipse>
绘制直线
<line x1="" y1="" x2="" y2="" stroke="" stroke-width=""></line>
x1 y1起点坐标
x2 y2重终点坐标
必须声明stroke
绘制折线
<polyline points="x,y x,y x,y" stroke="" stroke-width="" fill=""></polyline>
通常在折线里fill为透明 fill="transparent"
绘制多边形
<polygon points="x,y x,y x,y" stroke="" stroke-width="" fill="transparent"></polyline>
多边形和折线的区别
多边形会自动闭合到起始点
折线不会自动闭合
绘制文本
<text x="" y="" font-size="" font-family="">文本内容</text>
默认基线是第三根线
svg中的文字是可以选中----标签的innerHTML
canvas中fillText( )做不到
svg中的文字内容能够被搜索引擎查询到
排名会靠前
如果是图片搜索引擎的爬虫是搜索不到内容，但是如果是标签就可以搜索到了
绘制图像
<image xLink:href="图片路径" x="" y="" width="" height=""></image>
注意：image标签在svg内部使用
绘制渐变
定义和使用特效
1.先定义特效（渐变）
<defs><特效元素 id=""></特效></defs>
2.在某个元素中应用特效
<rect fill="url(#特效id)"></rect>
渐变色的区别
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
0 条评论
下一页
