复习day3

1.怎么减少Dom操作?

2.页面插入1000个元素,如何进行优化?

3.js创建对象的几种方式?

4.js创建函数的几种方式?

5.js延迟加载的几种方式?

6.xss是什么?怎么抵御xss的攻击?

7.为什么利用多个域名来存储网站资源会更有效?

8.Ajax 的最大的特点是什么?

9、什么是ajax?ajax 的优缺点 ?

10、http常见的状态码?

11、eval 是做什么的?

12.简述一下 Sass、Less,且说明区别?

13、jquery 中如何将数组转化为 json 字符串,然后再转化回来?

14.清除浮动的方法?

15.px em rem

16.移动端触碰屏幕事件?

17.渐进增强和优雅降级?

18.js数组方法?

1.怎么减少Dom操作?

文档碎片 用createDocumentFragment 的Api做中间量,再一次性插入Dom中

3.js创建对象的几种方式?

1. 工厂模式 2. 构造函数模式 3. 原型模式 4. 混合构造函数和原型模式 5. 动态原型模式 6. 寄生构造函数模式 7. 稳妥构造函数模式

4.js创建函数的几种方式?

第一种(函数声明): function sum1(num1,num2){ return num1+num2; }

第二种(函数表达式): var sum2 = function(num1,num2){ return num1+num2; }

匿名函数: function(){}:只能自己执行自己

第三种(函数对象方式): var sum3 = new Function("num1","num2","return num1+num2");

5.js延迟加载的几种方式?

1.async 是和页面html一起解析     defer 等页面的dom,html解析完才解析js

2. 动态创建 DOM 方式(创建 script,插入到 DOM 中,加载完毕后 callBack)

3. 按需异步载入 js

4. 创建并插入 iframe,让它异步执行 js

6.xss是什么?怎么抵御xss的攻击?

xss俗称:跨站脚本攻击,就是你的页面有漏洞,可以让攻击者注入代码。达到窃取信息的目的;

例如:能够获取页面的dom,cookie,localstroage

三种类型:反射类型,通过url注入参数,注入之后,可以获取当前页面的一些关键信息

第二种:存储型注入,存储sql后注入

第三种:基于Dom,被执行的脚本会修改页面脚本的结构

注入点:1.html的节点内容或属性2.javascript代码3.父文本

怎么防御?

1.在使用模本字符串的时候,会用到《script》《script》标签,用$gt,$lt代替,单引号,双引号一并转义

2.对url注入的防御===对数据进行序列化,用json.stringfly(str)可以解决这个问题

3.可以用第三方库,像js-xss就有抵御,其实vue中已经有xss的防御了,比如url注入,用插值表达式{ {}}经过字符串化,浏览器不会对其中的内容进行执行操作。尽量少使用v-html

7.为什么利用多个域名来存储网站资源会更有效?

CDN 缓存更方便 突破浏览器并发限制 节约 cookie 带宽 节约主域名的连接数,优化页面响应速度 防止不必要的安全问题

8.Ajax 的最大的特点是什么?

Ajax 可以实现异步通信效果,实现页面局部刷新,带来更好的用户体验;按需获取数 据,节约带宽资源;

9、什么是ajax?ajax 的优缺点

Ajax 是全称是 asynchronous JavaScript andXML,即异步 JavaScript 和 xml,用于在 Web 页面中实现异步数据交互,实现页面局部刷新。

优点:可以使得页面不重载全部内容的情况下加载局部内容,降低数据传输量,避免用 户不断刷新或者跳转页面,提高用户体验

缺点:1、ajax 不支持浏览器 back 按钮。 2、安全问题 AJAX 暴露了与服务器交互的细节。 3、对搜索引擎的支持比较弱。 4、破坏了程序的异常机制。

10.http常见的状态码?

200   请求成功

301    永久重定向  资源(网页等)被永久转移其他url

302    临时重定向

403    禁止访问

404   找不到资源

500    内部服务器错误

203 服务器成功处理请求,但返回的信息来自另一来源

304 此次请求返回的网页未修改,继续使用上次的资源

405   方法禁用   服务器禁用了请求中指定的方法

409  冲突  服务器在请求时发生冲突

503  服务不可用 服务器目前无法使用

11、eval 是做什么的?

1. 它的功能是把对应的字符串解析成 JS 代码并运行 2. 应该避免使用 eval,不安全,非常耗性能(2 次,一次解析成 js 语句,一次执行)

12.简述一下 Sass、Less,且说明区别?

他们是动态的样式语言,是 CSS 预处理器,CSS 上的一种抽象层。他们是一种特殊的语法/语 言而编译成 CSS。 变量符不一样,less 是@,而 Sass 是$; Sass 支持条件语句,可以使用 if{}else{},for{}循环等等。而 Less 不支持; Sass 是基于 Ruby 的,是在服务端处理的,而 Less 是需要引入 less.js 来处理 Less 代码输 出 Css 到浏览器

13、jquery 中如何将数组转化为 json 字符串,然后再转化回来?

$.parseJSON('{"name":"John"}');

JSON.stringify

14.清除浮动的方法?

 答: 1.使用空标签清除浮动。这种方法是在所有浮动标签后面添加一个空标签定义css clear:both.弊端就是增加了无意义标签。
      2. 使用overflow。给包含浮动元素的父标签添加css属性overflow:auto;zoom:1;zoom:1用于兼容IE6。
      3.使用after伪对象清除浮动。该方法只适用于非IE浏览器。使用中需注意以下几点。
      一、该方法中必须为需要清除浮动元素的伪对象中设置height:0,否则该元素会比实际高出若干像素;
      二、content属性是必须的,但其值可以为空,content属性的值设为”.”,空亦是可以的。
      4.给浮动元素的父元素设置固定的高度
      5.使用befor和after双伪元素清除浮动(扩展内容)

15.px em rem

   px: 固定值
   em的值不是固定值
   em会继承父级元素的字体大小
   rem的值不是固定值
   rem会继承html元素的字体大小
   rem多数用于手机端布局

16.移动端触碰屏幕事件?


 touchstart: 开始触碰屏幕事件

touchmove: 触碰且在屏幕移动事件

touchend: 离开屏幕触发事件

touchcancel: 取消触碰事件,(发生场景:当前手机来电时)

事件对象.targetTouches: 获取触点列表

17.渐进增强和优雅降级?

渐进增强:针对低版本浏览器进行构建页面,保证基本功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验

优雅降级:一开始就构建完整的功能,然后针对低版本浏览器进行兼容

18.js数组方法?

 答:concat():合并数组,并返回合并之后的数据    
      join():使用分隔符,将数组转为字符串并返回    
      pop():删除最后一位,并返回删除的数据    
      shift():删除第一位,并返回删除的数据    
      unshift():在第一位新增一或多个数据,返回长度    
      push():在最后一位新增一或多个数据,返回长度     
      reverse():反转数组,返回结果     
      slice():截取指定位置的数组,并返回    
      sort():排序(字符规则),返回结果     
      splice():删除指定位置,并替换,返回删除的数据    
      toString():直接转为字符串,并返回    
      valueOf():返回数组对象的原始值    
      indexOf():查询并返回数据的索引        
      lastIndexOf():反向查询并返回数据的索引

猜你喜欢

转载自blog.csdn.net/H_hl2021/article/details/123056181
今日推荐