部分问题汇总
- string = "176532897651"降序排序
- var let const 区别
- const 可以更改对象的属性吗
- 箭头函数的优势
- ES5,ES6新特性
- 网址到页面渲染过程
- 页面优化方法
- 如何减少http请求
- H5新特性
- Canvas
- link , import 区别
问题解答
- string = "176532897651"降序排序
<html>
<body>
</body>
<script>
//升序排序
var str = "176532897651";
var arr = str.split("");
console.log("升序排序"+arr.sort());
//降序排序
var compare = function (x, y) {//比较函数
if (x < y) {
return 1;
} else if (x > y) {
return -1;
} else {
return 0;
}
}
console.log("降序排序"+arr.sort(compare));
//以下实现去重
var set = new Set(arr);
var newStr = Array.from(set);
console.log("去重"+newStr);
</script>
</html>
- var let const 区别
- const 可以更改对象的属性吗？
关键字 const 有一定的误导性。它没有定义常量值。它定义了对值的常量引用。因此，我们不能更改常量原始值，但我们可以更改常量对象的属性。
const PI = 3.141592653589793;
PI = 3.14; // 会出错
PI = PI + 10; // 也会出错
<script>
const people = {name:"yy",sex:"female",age:"18"}
people.age = 3;
document.getElementById("demo").innerHTML = people.age;
</script>
常量对象可以更改
您可以更改常量对象的属性：
// 您可以创建 const 对象：
const car = {type:"porsche", model:"911", color:"Black"};
// 您可以更改属性：
car.color = "White";
// 您可以添加属性：
car.owner = "Bill";
但是您无法重新为常量对象赋值：
const car = {type:"porsche", model:"911", color:"Black"};
car = {type:"Volvo", model:"XC60", color:"White"}; // ERROR
- 箭头函数的优势
1、箭头函数写代码拥有更加简洁的语法；
2、不会绑定this。 - ES5,新特性
“use strict” 指令：定义 JavaScript 代码应该以“严格模式”执行
String.trim()：删除字符串两端的空白字符
Array.isArray()：检查对象是否为数组
Array.forEach()：每个数组元素调用一次函数
Array.map()：返回一个新的数组，元素为原始数组调用函数处理后的值。
Array.filter()：把Array的某些元素过滤掉，然后返回剩下的元素
Array.reduce()：接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值
Array.reduceRight()：该方法与reduce()的不同之处是在操作数组中数据的方向不同，reduce()方法是从头向尾进行，而reduceRight()是从尾向头
Array.every()：对数组中每一项运行给定函数，如果该函数对每一项返回true,则返回true
Array.some()：对数组中每一项运行给定函数，如果该函数对任一项返回true，则返回true
Array.indexOf()：检索数组中的某个元素值并返回其位置
Array.lastIndexOf()：与 Array.indexOf() 类似，但是从数组结尾处开始检索
JSON.parse()：从Web服务器收到的文本转换为 JavaScript 对象
JSON.stringify()：从Web服务器收到的文本将其转换为字符串
Date.now()：返回自零日期（1970 年 1 月 1 日 00:00:00:00）以来的毫秒数
属性 Getter 和 Setter
新的对象属性和方法 - ES6新特性
JavaScript let
JavaScript const
幂 (**)
默认参数值
Array.find()：返回通过测试函数的第一个数组元素的值
Array.findIndex()：返回通过测试函数的第一个数组元素的索引 - 网址到页面渲染过程
输入网址；
发送到DNS服务器，并获取域名对应的web服务器对应的ip地址；
与web服务器建立TCP连接；
浏览器向web服务器发送http请求；
web服务器响应请求，并返回指定url的数据（或错误信息，或重定向的新的url地址）；
浏览器下载web服务器返回的数据及解析html源文件；
生成DOM树，解析css和js，渲染页面，直至显示完成； - 页面优化方法
一、减少 HTTP 请求数量
在浏览器与服务器进行通信时，主要是通过 HTTP 进行通信。浏览器与服务器需要经过三次握手，每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限（不同浏览器允许并发数），一旦 HTTP 请求数量达到一定数量，资源请求就存在等待状态，这是很致命的，因此减少 HTTP 的请求数量可以很大程度上对网站性能进行优化。
减少HTTP请求方法：
1、CSS Sprites：国内俗称 CSS 精灵，这是将多张图片合并成一张图片达到减少 HTTP 请求的一种解决方案，可以通过 CSS background 属性来访问图片内容。这种方案同时还可以减少图片总字节数。
2、合并 CSS 和 JS 文件：现在前端有很多工程化打包工具，如：grunt、gulp、webpack等。为了减少 HTTP 请求数量，可以通过这些工具再发布前将多个 CSS 或者 多个 JS 合并成一个文件。
3、采用 lazyLoad：俗称懒加载，可以控制网页上的内容在一开始无需加载，不需要发请求，等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量。
二、控制资源文件加载优先级
浏览器在加载 HTML 内容时，是将 HTML 内容从上至下依次解析，解析到 link 或者 script 标签就会加载 href 或者 src 对应链接内容，为了第一时间展示页面给用户，就需要将 CSS 提前加载，不要受 JS 加载影响。一般情况下都是 CSS 在头部，JS 在底部。
1、利用浏览器缓存浏览器缓存是将网络资源存储在本地，等待下次请求该资源时，如果资源已经存在就不需要到服务器重新请求该资源，直接在本地读取该资源。
2、减少重排（Reflow）基本原理：重排是 DOM 的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证 DOM 树上的所有其它结点的 visibility 属性，这也是 Reflow 低效的原因。如果 Reflow 的过于频繁，CPU 使用率就会急剧上升。
三、减少 Reflow，如果需要在 DOM 操作时添加样式，尽量使用 增加 class 属性，而不是通过 style 操作样式。
1、减少 DOM 操作
2、图标使用 IconFont 替换 - H5新特性
HTML5 中的一些有趣的新特性：
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search - Canvas
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
- link , import 区别
对于如何使用css的样式，主要有三种： 内联 ，外联，内嵌（也可称为行内）。其中外联样式的引入有两种：link 和 @import 。
（1）.从属关系的区别：
link是html的标签，除了加载css文件，还可以定义RSS ，rel连接属性等 ； @import 是css提供的语法规则，只能加载css样式，只有导入样式表的作用。
（2）加载顺序的区别：
link引入css时，在页面载入时同时加载；@import引入的css将在页面加载完毕后被加载。
（3）兼容性的区别：
link是html标签，无兼容性的问题 ; @import是在css2.1里提出的，低版本浏览器不兼容， 在 IE5+才能识别。
扫一扫
5981
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
