精华内容
下载资源
问答
  • 前端知识点

    2019-07-11 10:19:09
    前端知识点 HTML + CSS 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端 一些自适应或垂直水平居中问题汇总 Normal Flow Containing ...

    原文文章:前端工程师手册

     前端知识点

    HTML + CSS


    对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端
    • 一些自适应或垂直水平居中问题汇总
    • Normal Flow
    • Containing Block
    • Margin Collapse
    • BFC
    • Baseline
    • Writing Mode
    • unicode-bidi

    JavaScript


    补充一下JS的深入理解,参考汤姆大叔的博客: 深入理解JavaScript系列,理解一些原理性质的东西。别停留在使用上,不然面试的时候很容易吃亏。那些你觉得不在意的东西,往往会是你成功的阻碍。

    数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄漏、事件机制、异步装载回调、模板引擎、Nodejs、JSON、ajax等。

    JS的知识点:

    1、DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
    
    2、DOM操作 —— 如何添加、移除、移动、复制、创建和查找节点等。
    
    3、事件 —— 如何使用事件,以及IE和标准DOM事件模型之间存在的差别。
    
    4、XMLHttpRequest —— 这是什么、怎样完整地执行一次GET请求、怎样检测错误。
    
    5、严格模式与混杂模式 —— 如何触发这两种模式,区分它们有何意义。
    
    6、盒模型 —— 外边距、内边距和边框之间的关系,及IE8以下版本的浏览器中的盒模型
    
    7、块级元素与行内元素 —— 怎么用CSS控制它们、以及如何合理的使用它们
    
    8、浮动元素 —— 怎么使用它们、它们有什么问题以及怎么解决这些问题。
    
    9、HTML与XHTML —— 二者有什么区别,你觉得应该使用哪一个并说出理由。
    
    10、JSON —— 作用、用途、设计结构。

    基础知识


    • JavaScript的基本数据类型
    • 内置对象的常用方法
    • 理解事件机制
    • 理解原型继承
    • 理解作用域问题
    • 理解模块化
    • 性能优化
    • 知道基本的编程语法,比如循环,判断,try/catch 等等
    • 理解包括多种函数定义以及赋值的方式,包括匿名函数
    • 理解基本的命名空间,全局(window)空间以及对象空间(不包括闭包)
    • 理解上下文的角色以及 this 变量的使用
    • 理解各种对象以及函数的初始化和声明方式
    • 理解 javascript 比较操作符,如<, >, ==, ===,以及对象和字符串比较的原理和对象映射
    • 理解对象属性和函数的数组索引,以及这和真实的数组之间的区别。

    中级知识


    • 理解常用库的实现原理,比如选择器部分,事件绑定部分
    • 检测浏览器类型与版本
    • 了解特性检测
    • 理解定时器,以及它的工作原理,包括何时以及如何使用定时器来异步执行方法调用
    • 关于回调的深度支持,以及如何通过 call 和 apply 方法来控制上下文和函数参数传递
    • 理解 JSON 标记以及 eval 函数
    • 理解闭包以及他们如何影响你的代码效率
    • AJAX 以及对象序列化

    高级知识


    • 理解方法的 arguments 变量,包括如何使用它来通过 arguments.length 重载函数,以及通过 arguments.callee 来进行递归调用,需要注意使用这个特性有一定的危险性,因为 ECMAScript 5 的 Strict 模式不支持此功能,但 jQuery 和 Dojo 都用到了它。
    • 高级闭包比如 self-memoizing 函数,partially applied 函数,以及最可爱的 (function(){})() 调用。
    • 函数以及 HTML prototype,prototype chain,以及如何使用基本的javascript对象和函数(比如 Array)来简化代码。
    • 对象类型以及 instanceof 的使用
    • 正则表达式和表达式编译
    • With 语句以及为什么不要使用它们
    • 最困难的部分,知道如果利用所有这些工具,并产生处干净,整洁,健壮,快速,可维护以及兼容不同浏览器的代码。

    和web相关的知识


    • 如何高效的操作 Dom(添加,删除以及更新),还有如何通过使用 document fragments 这样的工具来最小化浏览器的 re-flows。
    • 浏览器的 DOM 元素属性提取(比如,style,position等等),jQuery 和 Dojo 都可以很好的完成这些工作,尽管如此,理解从 CSS 和 style 标签中提取属性的差异,以及如何计算 position 和 size 还是很重要的。
    • 跨浏览器的事件处理,绑定,反绑定,冒泡,以及如何取得期望的回调上下文。在一次,现成的框架也可以很好的处理这些事情,但是你应该对 IE 浏览器和 W3C 标准浏览器之间的不同有所了解。
    • 正则表达式选取 DOM 节点
    • 浏览器功能检测以及智能降级

    其他


    HTTP、WEB安全、正则、优化、重构、响应式、团队协作、可维护、SEO、UED、架构、职业生涯

    参考资料


    最后上两张图(祝大家早日成为一个优秀的程序员):

     

    展开全文
  • 前端知识点总结

    2018-07-30 22:01:32
    不要通过,我放错资源了。然而不知道怎么更改。 对前端知识点的总结。 可以帮助你迅速梳理前端的知识要点。 既可以从容面对面试,也可以梳理自身知识点。
  • 前端知识点整理

    2017-11-14 22:48:39
    前端知识点整理,JavaScript +HTML+css,jquery PHP bootstrap
  • 前端知识点大百科全书
  • Web前端知识点总结.doc

    2019-10-04 10:04:13
    Web前端知识点总结
  • 你可能不知道的前端知识点
  • 您可能不知道的前端知识点
  • 前端知识点大全

    2018-11-16 09:10:23
    前端知识点总结  花了几个晚上整理的前端知识点,收录进来以备后续查看。 1、自动化构建工具Gulp的使用方法。 考察nodejs安装,npm依赖库安装,全局安装,本地安装,--save和—save-dev 区别,gulp基本脚本编写...

                                                         前端知识点总结


     花了几个晚上整理的前端知识点,收录进来以备后续查看。

    1、自动化构建工具Gulp的使用方法。

    考察nodejs安装,npm依赖库安装,全局安装,本地安装,--save和—save-dev 区别,gulp基本脚本编写,gulp常用功能。

    2、什么是跨域问题?如何解决?表单可以跨域吗?

           考察同源策略及跨域解决方案。

    浏览器同源策略:凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域

    常用解决方案:代理(nginx反向代理)、jsonp。

    3、解释下什么是jsonp, jsonp和ajax的区别。

    4、尽可能详细的解释下ajax的原理。

    http://www.cnblogs.com/mingmingruyuedlut/archive/2011/10/18/2216553.html

    XMLHttpRequest 是 AJAX 的基础。

    Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据

    5、http和https请求区别。

    6、http三次握手及每次握手的作用。

    1:客户端发送了一个带有SYN的Tcp报文到服务器,这个三次握手中的开始。表示客户端想要和服务端建立连接。 
    2:服务端接收到客户端的请求,返回客户端报文,这个报文带有SYN和ACK标志,询问客户端是否准备好。 
    3:客户端再次响应服务端一个ACK,表示我已经准备好。

     

    断开连接的4次挥手

    1:TCP发送一个FIN,用来关闭客户到服务端的连接。

    2:服务端收到这个FIN,他发回一个ACK,确认收到序号为收到序号+1,和SYN一样,一个FIN将占用一个序号。

    3:服务端发送一个FIN到客户端,服务端关闭客户端的连接。

    4:客户端发送ACK报文确认,并将确认的序号+1,这样关闭完成。

     

    可能有人会有疑问,tcp我握手的时候为何ACK和SYN是一起发送。挥手的时候为什么是分开的时候发送呢,原因是TCP的全双工模式,接收到FIN意味着没有数据发送过来了,但是还可以继续发送数据

     

    7、http数据报的结构,有哪些常见包头,这些包头的作用。

    • 请求行(request line)
    • 消息头部(header)
    • 空行
    • 请求正文
    • Content-Type:指定请求和响应的内容类型,如果未指定即为text/html
    •       常用的Content-Type
    •         text/plain:普通文本
    •         tex/html:html文本
    •         application/x-javascript:js
    •         application/x-www-form-urlencoded:默认形式表单发包类型
    •         multipart/form-data:用在发送文件的post包中
    •         application/json:通过json传输
    •         application/xml:通过xml传输
    • Content-Length:用于指定请求或相应的内容长度
    • Accept-Encoding: gzip
    • Content-Encoding: gzip

     

    8、http常见的响应码及意义。

    1XX——信息类(Information),表示收到http请求,正在进行下一步处理,通常是一种瞬间的响应状态

    2XX——成功类(Successful),表示用户请求被正确接收、理解和处理

    200(OK):请求成功。一般用于GET与POST请求

    201(Created):已创建。成功请求并创建了新的资源

     

    3XX——重定向类(Redirection),表示没有请求成功,必须采取进一步的动作

    301(Moved Permanently):资源被永久移动。请求的资源已被永久的移动到新URI,返回信息会包括新的URI,浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI

    302(Found):资源临时移动。资源只是临时被移动,客户端应继续使用原有URI

    304:用其他策略获取资源

    4XX——客户端错误(Client Error),表示客户端提交的请求包含语法错误或不能正确执行

    400(Bad Requests):客户端请求的地址不存在或者包含不支持的参数

    401(Unauthorized):未授权,或认证失败。对于需要登录的网页,服务器可能返回此响应

    403(Forbidden):没权限。服务器收到请求,但拒绝提供服务

    404(Not Found):请求的资源不存在。遇到404首先检查请求url是否正确

    5XX——服务端错误(Server Error),表示服务器不能正确执行一个正确的请求(客户端请求的方法及参数是正确的,服务端不能正确执行,如网络超时、服务僵死,可以查看服务端日志再进一步解决)

    500(Internal Server Error):服务器内部错误,无法完成请求

    503(Service Unavailable)

    9、前端如何向后台提交数据。

           常用的:表单提交 submit方式,但是会刷新页面,和ajax提交,需要对form表单数据序列化,可以用Formdata对象。

    表单submit提交是浏览器实现的,不通过js引擎。

    Ajax和$http都是通过XMLHTTPRequest实现的。

    10、websocket是长连接么?连接建立之后如何保证连接状态?

           主要考如何设计实现websocket的心跳机制。

    11、常见的浏览器内置对象。如何获取当前页面的url?

           location、window、document、history、Navigator

    12、JS的有哪些数据类型

           基本数据类型:undefined、null、boolean、number、String

           引用类型:function、object、Array

    14、定义一个数组变量、赋初值、向数组头和尾插入和删除数据。

           Pop  push    shift  unshift(插入)

    15、数组的遍历方法。(要求多种)

           For     foreach    for(x in y)

    16、什么是类数组。如何遍历。

    • 拥有length属性,其它属性(索引)为非负整数(对象中的索引会被当做字符串来处理,这里你可以当做是个非负整数串来理解)
    • 不具有数组所具有的方法

     

    var myArray = {
    
        length: 4,
    
        "0": "first",
    
        "1": "second",
    
        "2": "third"
    
    };
    
    var temp = Array.prototype.slice.call(myArray);

     

    17、eval作用。如何通过一个字符串调用函数名和这个字符串一样的函数。(类似于java的反射)

           Eval作用是进行表达式运算并返回值。比如eval(3+5) ==8

    eval('test').call(this);

    调用test的方法。

    18、获取当前时间戳

           new Date().getTime();

    19、四舍五入保留两位小数

           var num =2.446242342;num = num.toFixed(2);

    20、取整

      var aa = parseInt('1.22');

    21、encodeURI()和encodeURIComponent() 区别

           使用encodeURI()编码后的结果是除了空格之外的其他字符都原封不动,只有空格被替换成了%20。而encodeURIComponent()方法则会使用对应的编码替换所有非字母数字字符。这也正是可以对整个URI使用encodeURI(),而只能对附加在现有URI后面的字符串使用encodeURIComponent()的原因所在。一般来说,我们使用encodeURIComponent()方法的时候要比使用encodeURI()更多,因为在实践中更常见的是对查询字符串参数而不是对基础URL进行编码

    22、html5 drag涉及的几个事件及时间的触发时机

    dragstart:事件主体是被拖放元素,在开始拖放被拖放元素时触发。

    drag:事件主体是被拖放元素,在正在拖放被拖放元素时触发。

    dragenter:事件主体是目标元素,在被拖放元素进入某元素时触发。

    dragover:事件主体是目标元素,在被拖放在某元素内移动时触发。

    dragleave:事件主体是目标元素,在被拖放元素移出目标元素是触发。

    drop:事件主体是目标元素,在目标元素完全接受被拖放元素时触发。

    dragend:事件主体是被拖放元素,在整个拖放操作结束时触发

    23、Web Worker是什么,怎么使用,怎么回传消息。

    web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。(IE不支持)

    使用的关键几步:

    1. 监测浏览器是否支持。
    2. 穿件web worker文件。即要异步执行的代码。(如何想要回调,可以使用postMessage方法)
    3. 创建worker对象。
    4. worker对象添加事件回调监听。

    24、Cookie如何防范XSS攻击。什么是XSS攻击。

           跨站脚本攻击。通常做法就是在网页中嵌入客户端脚本(JS),当客户端加载网页时,通过JS脚本获取用户的cookie,导航到恶意网站等。

           将cookie标记为httponly 就可以防止通过js获取客户端cookie。

    25、Cookie和session的区别与联系。

           Cookie是一种存储方式。

           Session是服务端用来标记客户端的一些信息。

           表达成用cookie可以在客户端用来记录session信息。Session一般是由后台生成并保存的。

    26、JavaScript中如何检测一个变量是一个String类型?请写出函数实现

    typeof(obj) === "string"  obj.constructor === String

    27、typeof 和 instanceof  区别

           Typeof的运算数可以是任何类型,返回值为:number,boolean,string,function,object,undefined这些基础类型。

    instanceof  主要是用来判断变量是不是一个对象的实例。比如:

    cat instanceof Cat  判断cat这个实例是不是Cat类的一个实例。

    28、数组去重。算法考察。

    第一种写法:利用了类数组临时变量。

    var src = [0,2,3,4,4,0,2];
    
    var temp = {};
    
    var dest = [];
    
    for(var i = 0 ;i< src.length;i++){
    
        if( !temp[src[i]] ){
    
            temp[src[i]] = 1;
    
            dest.push(src[i]);
    
        }
    
    }
    
    console.log(dest);

    第二种写法:利用了Array的indexof方法。

    for(var i = 0;i< src.length;i++){
    
        if(dest.indexOf(src[i]) < 0){
    
            dest.push(src[i]);
    
        }
    
    }

    29、$(document).ready()方法和window.onload 区别

           ready方法是dom元素加载完成。Onload方法是资源加载完成,包括图片。

    30、jquery绑定事件方法,最好用哪一种。

           最好用on方法,去除绑定用off。

    31、行内元素有哪些?块级元素有哪些? 空(void)元素有那些?

           行内元素:a、b、span、img、input、strong、select、label、em、button、textarea

           块级元素:div、ul、li、dl、dt、dd、p、h1-h6、blockquote

    空元素:即系没有内容的HTML元素,例如:br、meta、hr、link、input、img

    32、使用正则表达式的写法。(例子)

    var reg = /pattern/flags // 字面量创建方式 var reg = new RegExp(pattern,flags); //实例创建方式 pattern:正则表达式

    flags:标识(修饰符) 标识主要包括: 1. i 忽略大小写匹配 2. m 多行匹配,即在到达一行文本末尾时还会继续寻常下一行中是否与正则匹配的项 3. g 全局匹配 模式应用于所有字符串,而非在找到第一个匹配项时停止

    正则表达式有4个常用方法test、exec、match和replace

    test:字符串中是否存在符合正则的内容。

    exec:捕获符合正则的字符串。

    Match:匹配成功的字符串数组。

    Replace:替换匹配正则的部分。

    33、优化页面加载,都有哪些方式。

           1、压缩css和js文件

           2、合并js和css文件减少http请求。

           3、合理设计业务逻辑,减少http请求。

           4、优化图片,设计合适大小的图片源文件。

    5、图片标明宽高可以减少布局调整。

    6、CSS样式放在头部、js放在尾部。

    7、服务器开启gzip压缩。

    8、尽量减少DOM元素数量。

    34、浏览器加载页面的流程

           1、解析html 创建dom数。

    2、按照顺序加载link、style、script文件。并执行script,阻塞式。

    3、解析css。 浏览器默认<外部样式<内联样式(内联样式和外部样式后加载的生效)<行内元素。

    4、CSS和dom合并,渲染

    5、布局重拍和重绘。

    35、变量为undefined和null的区别。

     var ccc;
    
    typeof(ccc);
    
    ccc = null;
    
    typeof(ccc);

           第一个typeof为undefined,第二个为object。

    36、box-sizing都有哪些值都代表什么意思,哪些场景使用。

    content-box: 在宽度和高度之外绘制元素的内边距和边框

    border-box: 在宽度和高度内绘制元素的内边距和边框

    inherit:从父元素继承。

    37、display inline和inline-block的区别。

           只有inline-block有盒子模型相关的属性。

    38、什么是伪数组,如何遍历。如何把它变为一个真Array。

    1,具有length属性
    
    2,按索引方式存储数据
    
    3,不具有数组的push,pop等方法
    var fakeArray = {
       length: 4,
       "aa": "first",
       "bb": "second",
         "cc": "third"
     };
    Array.prototype.slice.call(fakeArray)
    39、cookie和localStorage sessionStorage区别和用法。
                   1、cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递,而sessionStorage和localStorage不会自动把数据发送给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。
                    2、存储大小限制也不同,cookie数据不能超过4K,同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据,如会话标识。sessionStorage和localStorage虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大
                    3、数据有效期不同,sessionStorage仅仅在当前浏览器窗口关闭之前有效;localStorage始终有效,窗口或者浏览器关闭之后也一直保存,因此作用持久数据;cookie,只在设置cookie过期时间之前有效,即使窗口关闭或者浏览器关闭。
                    4、作用域不同:sessionStorage在不同的浏览器窗口中不共享,即使是同一个页面,localStorage在所有的同源窗口中是共享的,cookie也是在所有同源的窗口中共享的。
    40、什么是序列化和反序列化,为什么要用到这个,如何实现。
               复杂对象无法在http中传输,所以要序列化。使用JSON
    41、上下固定,中间滚动布局如何实现
    42、call和apply的区别。举例使用。
    43、为什么要清除浮动,怎么清除。
               浮动对文档流产生了影响,下边增加一个div,然后设置clear:both
    44、介绍position属性。
               absolute、fixed、relative、static、inherit
    45、垂直水平居中的方法。
    46、什么是深拷贝、什么是浅拷贝,如何实现深拷贝。
    47、前端实现文件断点续传的思路
               主要是文件分割。File对象的slice方法分割文件+ajax上传

    48、介绍flex布局

    • flex-direction属性决定主轴的方向(即项目的排列方向)
    • flex-wrap 属性定义,如果一条轴线 排不下,如何换行
    • flex-flow flex-direction属性和flex-wrap属性的简写形式
    • justify-content定义了项目在主轴上的对齐方式
    • align-items定义项目在交叉轴上如何对齐。
    • align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用

     

    49、Promise 和 async/await

    function sleep(time){
    
        return new Promise(function (resolve,reject) {
    
    
    
            setTimeout(function () {
    
                resolve();
    
            },time);
    
        });
    
    }
    
    
    
    
    
    (async function() {
    
        debugger;
    
        sleep(5000);
    
        debugger;
    
        await sleep(2000);
    
        debugger;
    
    
    
    })();
    
    
    
    (function(){
    
        debugger;
    
    })()

     

    50、利用Promise实现异步。举例。这个是原生的,有很多种promise的实现。 Jquery中是用的deferred

    var p = new Promise(function (resolve,reject) {
    
        //reject('222');
    
        //resolve('111');
    
    });
    
    
    
    p.then(function (param) {
    
        debugger;
    
    },function (param) {
    
        debugger;
    
    });

     

    51、什么是订阅-发布模式,如何实现。

    52、浏览器事件流向是怎样的,DOM事件流是哪两种模式。如何阻止事件冒泡,如何捕获事件。

    53、如何进行cookie劫持,如何防止被劫持。

           XSS(跨站点脚本攻击)

    1. 给Cookie添加HttpOnly属性,这种属性设置后,只能在http请求中传递,在脚本中,document。cookie无法获取到该Cookie值。对XSS的攻击,有一定的防御值。但是对网络拦截,还是泄露了
    2. 在cookie中添加校验信息,这个校验信息和当前用户外置环境有些关系,比如ip,useragent等有关。这样当cookie被人劫持了,并冒用,但是在服务器端校验的时候,发现校验值发生了变化,因此要求重新登录,这样也是种很好的思路,去规避cookie劫持
    3. cookie中sessionid的定时更换,让sessionid按一定频率变换,同时对用户而言,该操作是透明的,这样保证了服务体验的一致性

    54、介绍下原型链、原型的概念。

    55、如何用js实现继承。

    原型链继承
    构造继承
    实例继承
    拷贝继承
    寄生组合继承

     

    56、防抖和节流的区别。如何进行防抖和节流设计。

    57、什么是闭包,有什么特点,什么场景下要使用闭包。

    什么时候使用闭包。1、不想变量污染。 2、想要变量常驻内存,以进行共享
    闭包具备以下几个特点:1、函数中套函数,且内部函数作为return值返回。2、内部函数使用外部函数中的变量

     

    58、JS实现异步的方案。(非真正的异步,只是相对于与顺序调用函数而言)

           1、回调函数。

           2、发布/订阅模式

           3、promise

    59、如何判断一个变量是不是数组。

    function isArrayFn(value){
    
        if (typeof Array.isArray === "function") {
    
            return Array.isArray(value);
    
        }else{
    
            return Object.prototype.toString.call(value) === "[object Array]";
    
        }

    60、JS是单线程的么?为什么ajax请求为什么可以异步执行。

    61、let、const以及var的区别

    ES6 新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效

    const声明一个只读的常量。一旦声明,常量的值就不能改变。

    62、介绍下内存回收机制,有哪些场景会造成内存泄露。

    内存泄露是指一块被分配的内存既不能使用,又不能回收,直到浏览器进程结束

    1. 意外的全局变量。未使用var声明。
    2. 闭包引起的内存泄露。
    3. 没有清理的dom元素引用。
    4. 被遗忘的定时器或者回调。

     

    63、this 和原型的区别

           this永远指向函数运行时所在的对象,而不是函数被创建时所在的对象。

    1.如果是call、apply,指定的this是谁,就是谁。

    2.普通的函数调用,函数被谁调用,this就是谁。

    64、单页面应用和多页面应用的区别,如何选择

           多页面SEO较好。

    65、堆和栈的区别。

    堆和栈都是运行时内存中分配的一个数据区,因此也被称为堆区和栈区,但二者存储的数据类型和处理速度不同。堆(heap)用于复杂数据类型(引用类型)分配空间,例如数组对象、object对象;它是运行时动态分配内存的,因此存取速度较慢。栈(stack)中主要存放一些基本类型的变量和对象的引用,其优势是存取速度比堆要快,并且栈内的数据可以共享,但缺点是存在栈中的数据大小与生存期必须是确定的,缺乏灵活性。

    JavaScript堆不需要程序代码来显示地释放,因为堆是由自动的垃圾回收来负责的,每种浏览器中的JavaScript解释引擎有不同的自动回收方式,但一个最基本的原则是:如果栈中不存在对堆中某个对象的引用,那么就认为该对象已经不再需要,在垃圾回收时就会清除该对象占用的内存空间。因此,在不需要时应该将对对象的引用释放掉,以利于垃圾回收,这样就可以提高程序的性能。释放对对象的引用最常用的方法就是为其赋值为null,例如下面代码将newArray赋值为null:

    66、什么是高阶函数。举例

    编写高阶函数,就是让函数的参数能够接收别的函数。

    setInterval,setTimeout,sort

    67、display none visibility hidden区别

            display none 不生成dom元素。visibility hidden只是不显示,但是占位。

    68、data-属性的作用是什么

    69、请解释一下inline和inline-block的区别,块级元素和行内元素区别。

           主要是盒子模型的区别。

    70、谈一下JS模块化编程。如何实现。

    https://www.cnblogs.com/lishuxue/p/6000205.html

    CommonJS, AMD, CMD都是JS模块化的规范。

    CommonJS是服务器端js模块化的规范,NodeJS是这种规范的实现。

    AMD(异步模块定义)和CMD(通用模块定义)都是浏览器端js模块化的规范。RequireJS 遵循的是 AMD,SeaJS 遵循的是 CMD。

     

    requirejs 加载模块的核心思想是利用了动态加载脚本的异步性以及 onload 事件以毒攻毒,关于脚本的加载,我们需要注意一下几点:

    •   在 HTML 中引入 <script> 标签是同步加载;
    •   在脚本中动态加载是异步加载,且由于被加载的脚本在事件队列的后端,因此总是会在当前脚本之后执行;
    •   使用 onload 和 onerror 事件可以监听脚本加载完成,以异步的事件来处理异步的事件

     

     

    71、匿名自执行函数写法,什么场景下用这种写法。

    //使用匿名自执行函数实现单例模式
    
    
    
    var obj = (function () {
    
        var obj = new Object();
    
    
    
        obj.kick = function () {
    
            console.log('kick');
    
        }
    
    
    
        return obj;
    
    })();

     

    72、请解释JSONP的工作原理,以及它为什么不是真正的AJAX。

           JSONP (JSON with Padding)是一个简单高效的跨域方式,HTML中的script标签可以加载并执行其他域的javascript,于是我们可以通过script标记来动态加载其他域的资源。例如我要从域A的页面pageA加载域B的数据,那么在域B的页面pageB中我以JavaScript的形式声明pageA需要的数据,然后在 pageA中用script标签把pageB加载进来,那么pageB中的脚本就会得以执行。JSONP在此基础上加入了回调函数,pageB加载完之后会执行pageA中定义的函数,所需要的数据会以参数的形式传递给该函数。JSONP易于实现,但是也会存在一些安全隐患,如果第三方的脚本随意地执行,那么它就可以篡改页面内容,截获敏感数据。但是在受信任的双方传递数据,JSONP是非常合适的选择。

    73、讲一下作用域  作用域链。并举例说明。

    变量提升、函数提升。----先使用后定义。

    作用域链相关知识的总结:

    1.执行环境决定了变量的生命周期,以及哪部分代码可以访问其中变量

    2,执行环境有全局执行环境(全局环境)和局部执行环境之分。

    3.每次进入一个新的执行环境,都会创建一个用于搜索变量和函数的作用域链

    4.函数的局部环境可以访问函数作用域中的变量和函数,也可以访问其父环境,乃至全局环境中的变量和环境。

    5.全局环境只能访问全局环境中定义的变量和函数,不能直接访问局部环境中的任何数据。

    6.变量的执行环境有助于确定应该合适释放内存。

     

    每个函数都有自己的执行环境,当执行流进入一个函数时,函数的环境就被推入一个环境栈中,当函数执行完毕后,栈将其环境弹出,把控制权返回给之前的执行环境(这句话有助于理解闭包)

     

    74、==和===有什么不同?一个字符串一个number类型可能==么

    ==, 两边值类型不同的时候,要先进行类型转换,再比较。 ===,不做类型转换,类型不同的一定不等。

    75、什么是"use strict";?使用它的好处和坏处分别是什么?

    在代码中出现表达式-"use strict"; 意味着代码按照严格模式解析,这种模式使得Javascript在更严格的条件下运行。

    好处:

    消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为;

    消除代码运行的一些不安全之处,保证代码运行的安全;

    提高编译器效率,增加运行速度;

    为未来新版本的Javascript做好铺垫。

    坏处:

    同样的代码,在"严格模式"中,可能会有不一样的运行结果;一些在"正常模式"下可以运行的语句,在"严格模式"下将不能运行。

    76、Angular自定义指令的写法

    77、Angular监听变量变化的方法

    78、Angular如何手动触发页面和模型的同步

    79、Angular数据绑定写法,span可以用ng-model么

    80、Angular如何实现多级路由。如何设置默认路由

    81、Angular中如何对$http请求进行统一的拦截。

    82、Angular依赖注入的写法

    83、Angular自定义服务的的几种写法

    84、Angular如何定义全局变量

    85、Angular中 $emit 和$broastcast的区别。 如何阻止事件冒泡。

    86、$interval开启的定时循环任务,如何在$scope销毁的时候清除。

    87、ng-if ng-show的区别。

    展开全文
  • 前端知识点梳理

    前端知识点梳理

    在这里插入图片描述

    展开全文
  • 本文是小编给大家收藏整理的关于vue项目前端知识点,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 下面小编就为大家带来一篇css前端知识点总结(必看篇)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 前端知识点汇总(1)

    千次阅读 2020-02-12 16:18:08
    前端知识点——五大主流浏览器及其内核 IE浏览器 内核是trident Firefox(火狐浏览器) 内核是Gecko Google chrome 内核是webkit/blink Safari(苹果浏览器) 内核是webkit opera(欧朋浏览器) 内核是presto 前端知识点...

    前端知识点——五大主流浏览器及其内核

    IE浏览器 内核是trident
    Firefox(火狐浏览器) 内核是Gecko
    Google chrome 内核是webkit/blink
    Safari(苹果浏览器) 内核是webkit
    opera(欧朋浏览器) 内核是presto

    前端知识点——css选择器及其权重

    css选择分为7种:分别是 通配符选择器/标签选择器/伪元素选择器/类名选择器/属性选择器/伪类选择器/id选择器。

    css选择器权重比较

    !important 权重无穷
    行间样式 权重1000
    id选择器 权重100
    class|[属性选择器]|伪类 权重10
    标签选择器|伪元素 权重1
    通配符选择器 权重0

    前端知识点——伪类与伪元素

    伪类

    在这里插入图片描述

    伪元素

    在这里插入图片描述

    前端知识点——块级元素|行级元素|行级块元素

    块级元素

    特点:独占一行,可以通过css改变宽高,display:block;
    举例:div p ul li ol li hr form address

    行级元素

    特点:内容决定元素所占位置,不可以通过css改变宽高,display:inline;
    举例:span strong em a del

    行级块元素

    特点: 内容决定大小,可以改变宽高,display:inline-block;
    举例:img

    前端知识点——position的常用属性

    position:absolute;绝对定位

    特点:脱离原来位置进行定位,相对于最近的有定位的父级进行定位,如果没有有定位的父级,则相对于文档进行定位。

    position:relative;相对定位

    特点:保留原来位置进行定位,相对于自己原来的位置进行定位。

    position:fixed;固定定位

    特点: 固定到某一位置,不会随着页面的滚动而改变位置。

    前端知识点——parseInt()函数

    parseInt();可以有一个参数,也可以有两个参数。

    当有一个参数的时候,执行此函数的结果就是将此参数转化为整数,此参数默认为十进制数。

    当有两个此参数时,如果第一个参数是“0x”开头的,则代表是16进制的,如果第一个参数是“0”开头的,则代表是8进制的,然后将这个数转化成第二个参数的进制的。

    parseInt(021,8); 第一个参数是0开头的,则这个数是8进制的,所以转化成十进制的结果就是 2*8+1=17,第二个参数是8,则需要将十进制的17转化为8进制,结果就是15.

    前端知识点——浮动流

    float:left/right;浮动元素产生了浮动流。

    浮动元素产生了浮动流。所有产生了浮动流的元素,块级元素看不到他们,产生了bfc的元素和文本类属性(inline)的元素以及文本都能够看法浮动元素。

    清除浮动的几种方法:

    触发块级元素的bfc属性。 float:left/right;position:absolute;overflow:hidden;
    在浮动元素的兄弟元素上,新增一个p元素或者div元素,添加一个额clear类名,css属性为clear:both;
    给浮动元素的父级添加clearfix属性,给父级的伪元素添加以下css代码,伪元素的三件套:

    .clearfix::after{
    	content:"";
    	display:block;
    	clear:both;		
    }
    

    position:absolute;float:left/right;

    添加了这两种css样式的元素,可以打元素内部把元素转换成 inline-block;行级块元素的特征是L元素根据宽高改变位置,且可以通过css设置宽高。

    文本元素溢出打点

    单行文本溢出打点

    禁止换行:white-space:nowrap;
    溢出部分隐藏:overflow:hidden
    文本显示为点:text-overflow:ellipsis;

    多行文本溢出打点

    溢出部分隐藏:overflow:hidden;
    文本显示为点:text-overflow:ellipsis;
    将对象作为弹性伸缩盒子模型展示:display:-webkit-box;
    限制在一个块元素显示的文本的行数:-webkt-line-clamp:2;
    设置或检索伸缩盒子对象的子元素的排列方式:-webkit-box-orient:vertical;

    文字替换图片的方法:

    html中写文字,css样式设置background-image:url(图片) no-repeat;
    设置css样式。
    text-indent:-9999px;文字缩进,负值则表示文字会出显示区域。
    white-space:nowrap;设置文字不要换行。
    overflow:hidden;溢出部分隐藏。
    这样设置的结果就是,如果css出现了问题,则Html中会显示文字,如果css没有问题,则展示图片。

    文字替换图片的方法2:

    考虑的原理是padding中可以出现背景图片但是不能出现内容,所以可以将元素高度设置为0;padding-top设置为元素的原有高度,overflow:hidden;此时设置的文字不会展示,图片会展示,但是当css不识别的时候,只能展示为文字。

    展开全文
  • utility_front_knowledege 总结项目中遇到的实用前端知识点
  • 前端知识点——Web Sockets 本系列文章是我在实习面试之前的对自己掌握的知识点的总结,就从一直不太熟悉的webSockets开始吧~ WebSockets的第一印象: 可以创建和服务器进行双向会话的高级技术,取代了曾经使用的...
  • 前端知识点总结——H5

    千次阅读 2019-06-20 21:59:44
    前端知识点总结——H5 1.html5新特性 (1)新的语义标签 (2)增强型表单* (3)音频和视频 (4)Canvas绘图 (5)SVG绘图 (6)地理定位 (7)拖动API (8)Web Worker (9)Web Storage (10)Web Socket 2.增强型表单 1.新input type ...
  • 主要介绍了JS前端知识点总结之内置对象,日期对象和定时器相关操作,简单总结分析了JS内置对象,日期对象和定时器相关对象方法及使用技巧,需要的朋友可以参考下
  • 学习web前端你的小伙伴都是知道的js是一个门槛,如果学不会js对于日后的开发也是有一定的影响的,但是怎么学习好js,小猿圈web前端讲师讲解JS前端知识点整理总结,希望对于学习web前端的你有所帮助。JS前端知识点...
  • 前端知识点随记

    2020-08-10 10:30:38
    CSS 知识点1.1 鼠标样式|十字|1.2 css 半透明样式1.3 CSS3 transform 属性1.3.1 旋转1.3.2 缩放1.4 特殊写法 \91.5 解决video标签在谷歌不能自动播放2. Javascript 知识点2.1 创建节点2.2 插入节点2.3 修改元素样式...
  • 记录下前端知识点BUG资料博文 JS BUG以及知识点资料博文 1 JS判断数据类型的几种方式 CSS BUG以及知识点资料博文 1 CSS技巧(一):清除浮动

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,488
精华内容 6,595
关键字:

前端知识点