前端笔试（三）

最新推荐文章于 2024-09-25 00:51:26 发布

yan647

最新推荐文章于 2024-09-25 00:51:26 发布

阅读量455

点赞数

CC 4.0 BY-SA版权

分类专栏：前端学习

本文链接：https://blog.youkuaiyun.com/yan647/article/details/52673921

前端学习专栏收录该内容

25 篇文章

订阅专栏

get和post的区别 http://www.cnblogs.com/hyddd/archive/2009/03/31/1426026.html

get 获取/查询资源信息，安全的（不对数据进行修改）和幂等的

post 更新资源信息

用post必须用到form

get请求的数据会附在URL之后，用？分割URL和传输数据，参数之间用&相连

post提交的数据放置在http包的包体中

get方式提交的数据长度是有限制的，理论上post没有限制

post安全性比get高 get可能造成xss攻击

迅雷

四大主流浏览器内核（Trident、Gecko、Presto、Webkit） http://blog.youkuaiyun.com/hyehyo/article/details/51173693

浏览器内核

主要分成两部分：渲染引擎(layout engineer或RenderingEngine)和JS引擎。

渲染引擎：负责取得网页的内容（HTML、XML、图像等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

JS引擎：解析和执行javascript来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

各浏览器内核分别是什么？

一、Trident内核代表产品InternetExplorer，又称其为IE内核。Trident（又称为MSHTML），是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器包括：IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等。

二、Gecko内核代表作品MozillaFirefoxGecko是一套开放源代码的、以C++编写的网页排版引擎。Gecko是最流行的排版引擎之一，仅次于Trident。使用它的最著名浏览器有Firefox、Netscape6至9。

三、WebKit内核代表作品Safari、Chromewebkit是一个开源项目，包含了来自KDE项目和苹果公司的一些组件，主要用于MacOS系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示。主要代表作品有Safari和Google的浏览器Chrome。

四、Presto内核代表作品OperaPresto是由OperaSoftware开发的浏览器排版引擎，供Opera 7.0及以上使用。它取代了旧版Opera4至6版本使用的Elektra排版引擎，包括加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版。

IE环境下判断IE版本的语句...[if lte IE 6]……[endif][if lte IE 7]……[endif] http://www.jb51.net/css/39356.html

<!--[if IE 6]>

<![endif]-->只有IE6版本可见

<!--[if lte IE 6]>

<![endif]--> IE6及其以下版本可见

<!--[if gte IE 6]>

<![endif]--> IE6及其以上版本可见

lte：Less than or equal to，小于或等于。

lt ：Less than，小于。

gte：Greater than or equal to，大于或等于。

gt ：Greater than，大于。

! ：不等于

硬件加速 http://www.cnblogs.com/PeunZhang/p/3510083.html

translateZ(0);

translate3d(0,0,0);

zoom http://blog.youkuaiyun.com/u014516981/article/details/51824607

设置或检索对象的缩放比例、触发IE的haslayout属性，清除浮动，清除margin重叠

SVG http://baike.baidu.com/subview/85022/9539763.htm#viewPageContent

可缩放矢量图形，基于可扩展标记语言，使用XML格式定义图像，SVG图像在方法或改变尺寸时图形质量不会损失，是万维网联盟的标注，可以在任何文本编辑器创建，采用文本来描述对象，具有交互性和动态性，完全支持DOM

CSSOM http://www.jianshu.com/p/639237706bfa

CSSOM对象模型（CSS Object Model View），涉及两部分内容，第一部分和操作样式表相关，第二部分和元素尺寸相关

浏览器的渲染原理 http://coolshell.cn/articles/9666.html

repaint/reflow

Repaint——屏幕的一部分要重画，比如某个CSS的背景色变了。但是元素的几何尺寸没有变。
Reflow——意味着元件的几何尺寸变了，我们需要重新验证并计算Render Tree。是Render Tree的一部分或全部发生了变化。这就是Reflow，或是Layout。（HTML使用的是flow based layout，也就是流式布局，所以，如果某元件的几何尺寸发生了变化，需要重新布局，也就叫reflow）reflow 会从<html>这个root frame开始递归往下，依次计算所有的结点几何尺寸和位置，在reflow过程中，可能会增加一些frame，比如一个文本字符串必需被包装起来。

css::selection http://www.css88.com/archives/5169

::selection 伪类选择器用于突出显示的页面用户选择的任何部分，包括可编辑的文本字段中的文本

页面内容加载顺序的正确查看方法 http://www.phpvar.com/archives/2887.html

在chrome中查看，打开审查元素-Network-image

Array用法总结 http://gold.xitu.io/entry/57e0d0c97db2a24eb1c7a867

video标签只支持播放.mp4 .ogg .webm的视频文件

浏览器最大并发请求数 https://my.oschina.net/u/2608629/blog/648527

chrome :6 cookie free, css sprites, js/css combine, max expires time, loading images on demand

多域名加速访问 domain hash

减低页面加载时间的方法（非常实用） http://www.cnblogs.com/mabelstyle/p/3185967.html

CSS Sprite http://www.cnblogs.com/babycool/archive/2012/04/15/2450187.html

浏览器同一时间可以从一个域名下载多少资源 https://www.zhihu.com/question/20474326

cookie-free http://www.chinaz.com/web/2010/0420/111983.shtml

合并JS和CSS http://www.cnblogs.com/zskbll/p/4912950.html

keep alive http://www.cnblogs.com/sunhk/p/5182054.html http://www.cnblogs.com/huangfox/archive/2012/03/31/2426341.html

CDN 内容分发网络 Content Delivery Network 百度百科

CDN系统能够实时根据网络流量、和各节点的连接、负载状况、到用户的距离和响应时间等综合信息，将用户的请求重新导向离用户最近的服务节点上。目的是使用户可以就近取得所需内容，解决网络拥挤的状况，提高用户访问网站的响应速度

负载均衡和CDN http://blog.jobbole.com/86066/

overflow http://blog.sina.com.cn/s/blog_51048da701017yyp.html

hidden 一个绝对定位的元素是否被overflow:hidden隐藏，要看其包含块相对于overflow:hidden的位置来决定。

li{list-style: upper-roman; } 有序列表的序号格式

a text-decoration:none;/*去掉下划线*/

浏览器标题栏的小图标<link rel="icon" type="image/x-icon" href="1.ico">

下拉框重绘 http://blog.youkuaiyun.com/zww1984774346/article/details/52346645

jQuery

hover 语法 $(selector).hover(infunction,outfunction);mouseover时的函数，mouseout时的函数

animate 语法 $(selector).animate(styles,speed,easing,callback);

index 语法 $(selector).index() 获得第一个selector的名称和值

eq 语法$('selector:eq(index)') 获取第几个元素

contents 语法$('p').contents() 找到段落中的所有文本节点。。。。。

filter 语法 .filter(selector) 将匹配元素集合缩减为匹配指定选择器的元素

eg:改变所有 div 的颜色，然后向类名为 "middle" 的类添加边框：

  $("div").css("background", "#c8ebcc")
 
  .filter(".middle")
 
   .css("border-color", "red");

nodeType 语法node.nodeType 返回节点类型

remove() 方法移除被选元素，包括所有文本和子节点。

该方法不会把匹配的元素从 jQuery 对象中删除，因而可以在将来再使用这些匹配的元素。

但除了这个元素本身得以保留之外，remove() 不会保留元素的 jQuery 数据。其他的比如绑定的事件、附加的数据等都会被移除。这一点与 detach() 不同。

slideToggle和toggle区别 http://blog.youkuaiyun.com/gengyudan/article/details/8901784

都可以实现对一个元素的显示和隐藏

toggle：动态效果为从右至左。横向动作。

slideToggle：动态效果从下至上。竖向动作。

slideDown() 方法通过使用滑动效果，显示隐藏的被选元素。

cursor 规定要显示的光标的类型

阻止预渲染 http://www.cnblogs.com/suyuwen1/p/5506397.html

1.URL 中包含下载资源

2.页面中包含音频、视频

3.POST、PUT 和 DELETE 操作的 ajax 请求

4.HTTP 认证(Authentication)

5.HTTPS 页面

6.含恶意软件的页面

7.弹窗页面

8.占用资源很多的页面

9.打开了 chrome developer tools 开发工具

两个相邻元素的外边距重叠 http://www.cnblogs.com/R46W8/p/4948831.html

移动端click事件延迟300ms http://www.xiaomeiti.com/note/3585

禁用缩放、指针事件（Pointer Events）、指针事件（使非IE也支持，几个类库）、FastClick

网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）

Sass

有两种语法规则：Sass，Scss

是CSS的一种开发工具

解决inline-block元素的空白间距 http://www.w3cplus.com/css/fighting-the-space-between-inline-block-elements

*display:inline

这个是一种CSS hack写法

IE6识别*和_，不识别 !important

IE7识别*, 不识别_，识别 !important

而firefox两个都不识别，识别 !important

Chrome 的审查元素功能 https://www.zhihu.com/question/34682699

sublim

代码格式化 edit-line-reindent

Ctrl+ku改为大写 Ctrl+kl改为小写

<u>下划线标签元素

快速排序对冒泡排序的改进

CSS的钩子机制 http://www.alixixi.com/web/a/2015080395185.shtml

$cssHooks 处理兼容性问题