前端知识点
2016-11-07 18:47:13 0 举报AI智能生成
前端开发主要涉及HTML、CSS和JavaScript等技术。HTML用于创建网页的结构，CSS用于设计网页的样式，而JavaScript则用于实现网页的交互功能。此外，前端开发者还需要掌握一些框架和库，如React、Vue和Angular等，以提高开发效率和代码质量。在移动端开发中，还需要了解响应式设计和适配不同设备的方法。前端开发者需要具备良好的审美观和用户体验意识，以确保开发出美观且易用的界面。同时，随着Web技术的发展，前端开发者还需要不断学习新技术和新工具，以适应不断变化的开发需求。
作者其他创作
大纲/内容
前端知识点
存储
cookie
cookie在持久保存客户端数据提供了方便，分担了服务器存储的负担
cookie的局限性
cookie的最大大约为4096字节
每个特定的域名下cookie数量有限，chrome和Safari没有硬性的要求
IE和opera会清理近期最少使用的cookie，Firefox会随机清理cookie
优点
通过良好的编程，控制保存在cookie中session对象的大小
通过加密和安全传输技术（SSL），减少cookie被破解的可能性
只在cookie中存放不敏感数据，即使被盗也不会有重大损失
控制cookie的生命期，使之不会永远有效
极高的扩展性和可用性
缺点
1、cookie数量和长度的限制。每个的demain最多只能有20条cookie，每个cookie长度不能超过4kb，否则会被截掉
2、安全性问题。如果cookie被人拦截了，就会取得所有session信息。即使加密也于事无补
3、有些状态不可能保存在客户端，例如为了防止重复提交表单，需要在服务器端保存一个计数器，如果保存在客户端起不到任何作用
浏览器本地存储
在较高的浏览器中，js提供了sessionStorage和globalStrage，在html5中，用localStorage来取代globalStroge
sessionstorage用于本地存储一个会话中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后，数据也随之销毁，是会话级别的存储
localStorage用于持久化的本地存储，除非主动删除数据，否则数据永远不会过期
cookie和webStorage
1、cookie的大小受限，每一次请求都会发送，指定作用域，不可以跨域调用
web storage拥有setItem、getItem、removeItem、clear等方法，cookie则需要自己封装setCookie、getCookie
cookie的作用是与服务器进行交互，作为HTTP规范的一部分存在，webStrage仅仅是为了在本地存储数据
HTML
span style=\
1、<!DOCTYPE>声明位于文档中最前面，处于html标签之前，告知浏览器以何种模式来渲染文档2、严格模式的排版和js运作模式是以该浏览器支持的最高标准运行3、在混杂模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为，以防站点无法工作4、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现
1、三种DTD类型：严格版本、过渡版本、以及基于框架的HTML文档2、HTML 4.01 三种文档类型：Strict、transitional、frameset3、xhtml规定三种XML文档类型：strict、transitional 、frameset4、standards（标准）模式也是严格呈现模式用于呈现遵循最新标准的网页，而Quriks（包容）模式也就是松散呈现模式或兼容模式，用于呈现为传统浏览器而设计的网页
div style=\
html兼容性问题
html5
主要是关于图像、位置、存储、多任务等功能的增加
拖拽释放 drag and drop
语义化更好的标签内容 header nav footer aside article section
语音、视频 audio video
画布 canvas API
地理 geolocation
本地离线存储 localStorage长期存储数据，浏览器关闭后数据不丢失
sessionStorage在浏览器关闭后自动删除
表单控件 calendar date time email url search
新的技术webworker websocket geolocation
webSocket如何兼容低浏览器adobo flash socket\\activeX HTMLFile\\基于multipart编码发送XHR\\基于长轮询的XHR
元素的删除
纯表现的元素:basefont big center font s strike tt u
对可用性产生负面影响的元素：frame frameset noframes
iframe的优缺点
优点：1、解决加载缓慢的第三方内容如图表和广告等的加载问题2、span style=\
缺点：1、iframe会阻塞主页面的onload事件2、即时内容为空，加载也需要时间3、没有语义
浏览器多个标签之间的通信
优化问题
网站文件和资源进行优化
文件合并文件最小化、文件压缩使用CDN托管缓存的使用
减少页面加载时间的方法
优化图片
图像格式的选择
优化CSS
标明高度和宽度
减少http请求，合并文件，合并图片
FOUC 无样式内容闪烁
性能优化问题
综合问题
测试工具
profiler
JSperf
Dromaeo
内存泄露
判断脚本运行环境
判断Global对象是否为window，如果不为window，当前脚本没有在浏览器中
优雅降级和渐进增强
a href=\"javasciprt:void(0)\" style=\
安全性问题
浏览器问题
并行下载资源
事件处理机制
阻塞
62
HTTP
状态码
2
200 OK 请求已经成功，请求所希望的响应头或数据体将随此响应返回
201 create 请求已经被实现，而且一个新的资源已经依据请求的需要建立，且其URL已经随location头信息返回
202 Accepted 服务器已接受请求，但尚未处理。正如它可能被拒绝一样，最终该请求可能会也可能不会被执行，在异步操作的场合下最合适。返回202状态码的响应的目的是允许服务器接受其他过程的请求（例如某个每天只执行一次的基于批处理的操作），不必让客户端一直保持与服务的连接直到批处理全部完成。span style=\
203 Non-authoritative Infomation 服务器已经成功处理了请求，span style=\
204 no content
3
301 Moved Permanently 请求的网页已永久的移动到新的位置
302 found 临时性重定向
303 see other 临时性重定向，且总是使用GET请求新的URL
304 not Modified 自上次请求后，请求的网页未修改过
4
400 bad request 服务器无法理解请求格式，客户端不应该尝试再次发起相似的请求
401 unauthorized 请求未经授权
403 forbidden 禁止访问
404 not found 找不到如何与url相匹配的资源
5
500 internal server error 常见的服务器端错误
503 service unavailable 服务端暂时无法处理请求（可能是过载或维护）
get和post
get：一般用于信息授权，使用url传递参数，对所发送的信息数量也是有限制的，一般在2000个字符 需要使用request.queryString来获取变量的值 通过地址栏来传值的
post：一般用于修改服务器上的资源，对所发送的信息没有限制 通过request.form来获取变量的值 通过提交表单来传值
get请求返回的内容可以被浏览器缓存起来，每次提交的post，浏览器在刷新的时候都会跳出确认框，浏览器不会缓存post请求返回的内容
下列情况使用post1、无法使用缓存文件，更新服务器上文件或数据库2、向服务器发送大量数据，post没有数据量的限制3、发送包含未知字符的用户输入时，post比get更稳定可靠
安全性：get是安全的，因为其方法不会改变服务器端是数据，所以不会产生副作用post是安全的：get在url里面显示参数会引发一些安全问题
HTTP协议
与服务器交互的方法：get post put delete 查 改 增 删
http 请求格式：request line， headers、blank line、request-body
http 响应格式：status line，header，blank line、request-body
http 头
b style=\
CSS
排版
display
inline
行内元素会在一条直线上排列，都是同一行，不会换行
block
块级元素各占据一行，垂直方向排序，块级元素可以包含行内元素和块级元素，行内元素不能包含块级元素属性不同，主要在盒模型上 行内 width、height无效，margin上下无效、padding上下无效
inline-block
display：block转化块级
flex
none
隐藏对应的元素，在文档布局中不在给他分配空间，它各边的元素会合拢，当不存在
visibility：hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间
postion
table class=\"dataintable\" style=\
absolute和fixed的区别
CSS sprites
将网页中的一些背景图片整合到一张图片文件中利用css：background-image，background-repeat，background-position组合进行背景定位
这样可以减少很多图片请求的开销，因为请求耗时比较长请求虽然可以并发，但是有限制
盒子模型
css选择器
float
浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留1、使用空标签清除浮动。在所有浮动标签后面添加一个空标签，定义css clear:both 弊端就是添加了无意义的标签span style=\
浮动元素引起的问题和解决办法
父元素的高度无法被撑开，影响与父元素同级的元素与浮动元素同级的非浮动元素会跟随其后若非第一个元素浮动，该元素之前的元素也需要浮动，否则会影响页面显示的结构
解决办法：使用css中的clear：both；属性来清除元素的浮动，可以解决2、3问题对于问题1：code class=\"css plain\" style=\
使用after伪元素1、使用额外标签法，<div style=\"clear:both;\"></div>2、使用after伪元素span style=\
子主题
绘制
动画
引用
继承
优先级
新增的伪类
JavaScript
DOM操作
创建新节点
createDocumentFragmentcreateElementcreateTextNode
添加、移除、替换、插入
appendChildremoveChildreplaceChildinsertBefore
查找
getElementByTagNamegetElementByNamegetElementById
数据类型
null
表示一个表示无的对象，转化为数组是0
表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象
表示没有对象，此处不应该有值
作为函数的参数，表示该函数的参数不是对象
作为对象原型链的终点
undefined
是一个表示无的原始值，转化为数值时为NaN
当声明的变量还未被初始化时，变量的默认值为undefined
表示缺少值，，此处应该有一个值，但是还没有定义
变量被声明了，但是没有赋值时，就等于undefined
调用函数时，应该提供的参数没有提供，该参数等于undefined
对象没有赋值的属性，该属性的值为undefined
函数没有返回值时，默认返回undefined
对象
new的过程
属性和方法被加入到this应用的对象中
创建一个空的对象，并且this变量应用该对象，同时还继承了该函数的原型
新创建的对象由this所引用，并且最后隐式的返回this
json
是一种轻量级的数据格式，是基于JavaScript的一个子集。数据格式简单，易于读写，占用宽带小
延迟加载 、异步加载
页面操作
document.write和innerHTML
document.write只能重绘整个页面
innerHTML可以重绘页面的一部分
函数
this（call、apply）
动态改变每个类的某个方法的运行环境
作用域
闭包
框架
Node
优缺点
创建
原型
ajax
同源问题
跨域问题
jsonp
document.domain+iframe
window.name、window.postMessage
服务器上设置代理页面
前端概念
新的技术
0 条评论
回复 删除
下一页
